Pastalablog in はてな

時代はブログ! 日記もあるよ→http://pastak-diary.hatenadiary.com

最近の悩み ( JavaScriptでブラウザの拡大率を取得したい )

最近の主な悩みはブラウザの拡大率を取得する際のテクニックについてです。

Google Chromeの場合、ブラウザの拡大率を取得したければ

 Math.round((window.outerWidth / window.innerWidth)*100) / 100

とすると取得できるということになっているようです*1

MacGoogle Chromeだとウィンドウに枠がないので、拡大率が1の場合にwindow.outerWidthの値とwindow.innerWidthの値が一致して、それらしく感じます。また、Windowsでウィンドウを最大化している場合も同様です。

ですが、この方法実は問題があって、Windowsで最大化していない場合はウィンドウに枠が付く(しかもサイズはWindowsの設定で任意に変更可能)ので、window.outerWidthの値がウィンドウの枠の太さ分window.innerWidthの値よりも大きくなってしまうので拡大率が正確に取得できません。

ちなみに window.devicePixelRatio では拡大率のみを取り出すことが出来ないのでこの場合は利用できません。

何か良い方法をご存知の方がいらっしゃいましたらご教授ください。よろしくおねがいします。

京大マイコンクラブの合宿でFirefoxのアドオンをAdd-on SDKで作る話をしました

先日、京大マイコンクラブの合宿があってその場で部員に向けて Add-on SDK の話をしました。

サンプルコードなどは https://github.com/pastak/firefox-addon-sdk-sample にあります。

スライドを勢い良く作ったら170枚くらいになってしまって終わりが見えなくなってきたので適当に切り上げたので唐突にまとめスライドが来る。

Firefox でアドオンを作るときの最新情報はほぼ書けたと思っているのですが、 xpi testの話とかが書けなかったり、オプションの話とかもあんまり出来なかった。

間違いとかあれば教えて下さい。よろしくお願いします。

Vivaldi (Tech Preview) のPage ActionにCSSやJSを追加する (Mac OSX)

今日起きたら Vivaldi なるブラウザが話題になってた。

諸々は下の記事とかを読むと良さそう。

ウィンドウ下部にPage Actionというのがあってデフォルトで色んなフィルタとかが入ってる。

まだUser.JSとかUser.CSSとかは未実装っぽいけどこのPage Actionに任意のJSとCSSを追加する方法をメモしておきます。

(例では Test_-_BackGroundBlack.cssTest_-_OnLoadAlert.jsを追加してみることにします)

  1. /Applications/Vivaldi.app/Contents/Versions/1.0.83.38/Vivaldi Framework.framework/Resources/vivaldi/user_filesにお好きなJSやCSSを置く
  2. Vivaldiを再起動

ざっと見てるとuser.jsであるような@includeとかは使えないっぽい。

多分User.JSとかUser.CSSとか近々実装されそうという感じがしてる。

Gyazoした画像にヌマクローを書き加えるuser.js書いたので共有します

ポケモンでは12年前と同じくミズゴロウを選んだので、ヌマクローの目の死に具合は気になったのですが、まさかここまで流行るとは・・・

というわけで最近流行ってるヌマクローコラ画像が簡単に作れるuser.jsを書いた。

こんな具合でGyazoにアップロードした画像にヌマクローを忍び込ませることが出来る。

before

after

サンプルでは正面のヌマクローしか合成してないけど、後ろ向きのヌマクローも選べる。

画像はそれぞれ以下から取ってきてDataURL形式に変換して直書きしてあるので、user.jsのファイルが大きくなってしまった。

インストール

https://gist.github.com/pastak/2f986567f9ca9b11d99a

の「raw」を押すと降ってくるけど、Chromeとかだとインストールが始まってコケるので、なんとかしてローカルに持ってきて、「拡張機能」ページにD&Dすると入る。

使い方

Gyazo上の個別画像ページを開いてペンのボタンを押すとツールバーが出てきて準備(ヌマクロー画像の読み込み)が終わると「NF」と「NB」というボタンが出てくる。「NF」を押すと正面向きのヌマクロー、「NB」を押すと後ろ向きのヌマクローが描画出来る。

ただ1つ問題があって、これを利用するにはGyazoのDraw機能を利用しないといけなくて、そのためには有料プランじゃないといけないっぽいという問題があることに書いてから気付いた。

その辺は各自良しなによろしくおねがいします。

Go言語でWebアプリを書いてみた話とそのフォローアップ【KMCアドベントカレンダー1日目】

この記事はKMCアドベントカレンダー2014の1日目の記事です。

KMCアドベントカレンダー1日目ということで先日GDG京都の勉強会とKMC学習発表会で話した「Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto」の補足などを書いてみたいと思います。

各種packageについて

今回の資料では

を使用する構成を紹介しました。

じっくり比較したわけではないけど、Golang でのウェブ開発を考えてみる - Qiita を参考にしたりした。

ただ、方針として自分も含めて普段RubyなどでWebアプリケーションを書いているという想定をしたので、今回はSinatraっぽい感じの構成になったと思っています。

スライドの中ではViewTemplateも紹介したけど、発表後のやり取りでこういうのがあった。僕も所感的にはGoでわざわざViewを書かなくても良いのではという感じではあるという気分です。

スライド中では紹介しなかったけど、バリデーションに関しては https://github.com/asaskevich/govalidator というのを使ったりしました。

大体のバリデーション項目は関数化されているのであまり凝ったことをしないのであればこれで事が足りた。

読んだ資料

ざっと、Golangチュートリアルを読んだあとはGo言語の初心者が見ると幸せになれる場所 - Qiitaを読んでどの辺りを参照するようにすれば良いかを掴んだり、あと良さそうなpackageがざっと載ってる https://github.com/avelino/awesome-go を眺めたりした。

あと、Webアプリケーションを作ることに関する諸々のことはうう astaxie/build-web-application-with-golang · GitHub にめちゃくちゃ詳しく載ってる。元は中国語だけど有志によって英語と日本語に翻訳されていて便利だった。

フォーム関係の話とか、セッションとcookie関係の話とか暗号化関係の話とかWebアプリケーション作るときにさっとやれるようになっておきたいことがまとまっていて参照できるのはめでたいって感じでかなり助かった。

本当はサンプルコードを載せたりサンプルアプリケーションを公開したりしたかったのだけど、あいにくMBPのHDDが死んでしまったのでこの辺で勘弁して下さい。

KMCアドベントカレンダー2日目は誰も立候補者が居ないので困っています。よろしくおねがいします。

KMCM

京大マイコンクラブではGo言語を書いて遊びたい部員を募集しています。KMCには入部制限はありません。年齢や学歴、人種、宗教、信条、性別、社会的身分、門地、国籍、経験などは不問です。また活動に関する制約もありません。IRCのチャット越しに会話に参加することだけでも大丈夫です。詳細は下記Webページを御覧ください。

入部案内 — 京大マイコンクラブ (KMC)

Go言語でWebアプリケーションを書くために見たものメモ

今週末のGDGの勉強会で話すのでそれように資料を作らないといけないからそれように見たりしたやつをまとめてメモ。

あと、もし見とくと良さそうなものとかあれば教えて下さい