読者です 読者をやめる 読者になる 読者になる

Pastalablog in はてな

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

ツールバーから直近のGyazoった画像にシュッとアクセス出来るアプリをElectronで書いた

追記 2015/06/19

Windows向けのBuildを作ってみた。 https://www.dropbox.com/s/qbrzdyh8ggkw1wc/Gyazo-Menubar-win32.zip?dl=0

作ってはみたものの実際に動くか試していないので、何か情報がありましたら https://github.com/pastak/gyazo-menubar/issues/2 にてお知らせください。

これでWindowsがサポートされたって書いてあるから動くと期待しています。よろしくお願いします。

概要

LTの資料を作ったり、Qiitaやブログに記事を書いたりするときにスクショをパッとGyazoで撮り溜めておいてあとでパパパッと記事に貼りたいみたいな場合があると思うのですが、多分そういう時に便利なアプリケーションなのではないかと思って作ってみた。

今日もLTをすることになってたのだけど、適当にパパっと素材をGyazoしてそれをパーッとKeyNoteに貼ることで難を逃れて助かった。

MacOSX向けのビルド済appは https://www.dropbox.com/s/ccx705tu9hvh5yf/Gyazo-Menubar.app.zip?dl=0 に置いてあるので適当に落として解凍してもらえば利用できます。

それ以外の環境でも動くかもですが、利用している Electronの menubar モジュールがMacOSXしかサポートしていないのと僕も確認してないのでどう動くかが不明という問題があります。

利用例

Gyazo

  • 画像上でコンテキストメニューを開くと、 MarkdownやHTML ( <a><img /></a>形式 )の他に画像Blobをクリップボードに格納することが出来ます。
    • 画像Blobは各種オフィス系アプリケーションにそのままペーストすることも出来ますし、Qiitaなどに貼り付けるとアップロードが行われて便利。

Gyazo

利用者の声

背景

ElectronというかAtom-Shellの頃から気にはなっていたのだけどなかなか触るキッカケがなかったのだけど、サークルで勉強会が行われたり、バイト先のリードエンジニアとElectronの話*1をしたりしていてやる気が出てたので一念発起して書いてみた。

所感としてはNodeモジュールやJSやHTMLやCSSなどの資産を使ってアプリケーションを書けるのは良い。まぁ過去には色んなことがあって転けたりも色々あったけど、まぁこの程度のものをシュッと書いてシュッとクロスプラットフォームにビルドしようと思えば出来るのはなかなか魅力的。

webView中に表示するHTMLもNodeJSインテグレーションを利用できるとか、最近だとBabelが標準で入っているとかいうのもあってその辺も体験が良かった。

https://github.com/maxogden/menubar の実装が悪いのか僕の理解が悪いのか、サンプルに似せて書いただけでは、electron-prebuild で上手く動かせても electron-packagerでビルドすると動かないみたいなのがちょくちょくあって結局 menubar の中身を読んで挙動が揃うように引数を工夫したりした。(例えばこの辺りとか https://github.com/pastak/gyazo-menubar/blob/master/app.js#L22 あと after-create-windowイベントのhookも上手く動かないように見えてshowイベントを使うようにしたりした)。この辺りはちょっと時間が出来たらIssue書くなりPR送るなりしたい気がする。

あー、あと、こういう話はするかどうか分かりませんが、今月末に東京でGyazoの勉強会イベントやるので来てください。今のところLTが少なくて困っています。よろしくお願いします。

最近の悩み ( 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 では拡大率のみを取り出すことが出来ないのでこの場合は利用できません。

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

株式会社はてなに入社しました

株式会社はてなに入社しました

株式会社はてなに入社しました - hitode909の日記

京大マイコンクラブの合宿で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)