ChromeExtensionの自動ビルドと自動リリースの話 - Pastalablog in はてな
Chrome Extension を作っている人は多いと思うのですが、プロダクトの1つとして作っていたりすると、他のアプリケーションなどと同様に自動ビルドや自動リリースを整えたいと思うのが人情だと思います。 先日、その辺りの仕組みをgyazo/gyazo-chrome-extensionのリポジトリで利用したいと思ったので、シュッと整えたり、それに際して幾つか便利なツールを実装したりしたので紹介します。 自動ビルド Chrome Extensionもユーザーからバグ報告があります。コードの上のバグだと検出出来たりするのですが、Extensionの場合はUI上の不具合の割合が多く、たまにWindowsとか特定の環境やバージョンでしか再現性のないバグがあったりすると手元の環境で再現するのが大変なので、再現できる人にチェックをお願いしたりすることになると思います。 この時、相手がエンジニアだった
Chrome ExtensionをFirefoxが採用予定のWebExtensionとして書き換える際に便利なwemfというコマンドラインツールを作りました - Pastalablog in はてな
Chrome Extensionのpackage.jsonをWebExtensionに対応するように変換してくれるコマンド作った。Firefoxがサポート済のAPIのみを利用しているなら、これで変換すれば動くようになるはず https://t.co/leu3lEEmwo— 特別になり太郎 (@pastak) February 6, 2016 Firefox46 が Developer Edition としてリリースされました。 WebExtensionはFirefox46でalpha stateということになっています。 このまま順調に行けば、 2016-08-02にリリースされる予定の*1Firefox48でstable releaseになります。 また上記ブログ記事でも触れられていますが、 addons.mozilla.org (AMO) にアップロードして署名をすることが出来るように
Heroku上でNodeJS+OpenCV環境を構築するためのDocker Image作った - Pastalablog in はてな
表題通りのものを作ったので報告します。 Docker Hub: https://hub.docker.com/r/pastak/docker-heroku-nodejs-opencv/ repository: https://github.com/pastak/docker-heroku-nodejs-opencv 経緯としては週末にOpenCVとimagemagickで顔合成するツール作ったので、それをWebアプリケーション化したいと思って作った。 すぎゃーんさんのブログに書かれている情報を参考にしたらそれっぽく動くようになってめでたい感じ。 すぎゃーんさんの作られたDockerfileをベースにheroku/docker-nodejsとdocker-pythonを参考にして構築した。 構成としてはdocker-pythonの上でNodeJSとOpenCVをそれぞれインストールするという
WebExtension現状確認してみた - Pastalablog in はてな
このブログ記事は KMCアドベントカレンダー2015 の5日目の記事です。 ちなみに昨日の記事は id:hnagamin の 好きなSCP-JPの紹介 - hnagamin でした。 サークルの人たち最近ずっとSCPの話してて、scpって色々あるんだなぁと思っていたのが、実はそういう話とは違ったということが発覚して良かったです。 今までのブラウザ拡張について ブラウザ拡張といえば皆さんも一度くらいは書いたことあるのではないでしょうか。 今まではブラウザでそれぞれ実装方法に違いがあってざっとまとめると大体こんな感じです。 Google Chrome や Opera HTML+JS+CSSで比較的カンタンに書ける。 Chrome: http://developer.chrome.com/extensions/ Opera: https://dev.opera.com/extensions/ A
iTunesStoreとAmazon Musicを同時に検索できるウェブアプリ書いた - Pastalablog in はてな
iTunesStore(Apple Music)とAmazon Prime Musicをまとめて検索できるやつ書いた https://t.co/lSD1yF6N6V— 辛子明太子@イカID: pastak (@pastak) 2015, 11月 24 最近バイト先の社長がNodeJSでウェブアプリを書いているらしくて、NodeJSのそういう話をしていたら久しぶりに趣味でウェブアプリでも書くかという気持ちになったので作った。 これは何？ ちょうどAmazon Prime Musicがリリースされた日に始めたのでタイトルのような雰囲気のウェブアプリになった。 その曲聞けるの見つける君 - iTunes Store・Amazon Music まとめて検索 使い方は簡単で適当にキーワードを入力するとそのキーワードでの検索結果を出してくれる。 AppleMusicは再生可能な場合はチェックが入ってる
GyazoをSpotlight風のUIで検索できるElectronアプリを公開しました。ブラウザ拡張もあるよ。 - Pastalablog in はてな
過去にSpotlightにプラグインを組み込むFlashlight向けにIvySearchを検索する のを書いたことがあった*1のだけど、Yosemiteになってから動かなくなってどうやら今後もFlashlightは開発をしなさそうな雰囲気なので、先日行われたバイト先のハッカソンを利用してElectronを使ってSpotlight風に扱えるアプリケーションとして書き直したので紹介します。 NinjaユーザーじゃないとIvySearch有効にならないので利用できないのですが、偶然今日からIvySearchが全ユーザーに解禁されているので皆さん利用できると思います。 これは何 MacOSXのSpotlightのようなUIでIvySearchを検索して結果をクリップボードに保存できるアプリケーションです。 クリップボードにはURLとHTMLと画像Blobが同時に入ります。 使い方 https:/
ツールバーから直近のGyazoった画像にシュッとアクセス出来るアプリをElectronで書いた - Pastalablog in はてな
追記 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をすることになってたのだけ
最近の悩み ( JavaScriptでブラウザの拡大率を取得したい ) - Pastalablog in はてな
最近の主な悩みはブラウザの拡大率を取得する際のテクニックについてです。 Google Chromeの場合、ブラウザの拡大率を取得したければ Math.round((window.outerWidth / window.innerWidth)*100) / 100 とすると取得できるということになっているようです*1。 MacのGoogle Chromeだとウィンドウに枠がないので、拡大率が1の場合にwindow.outerWidthの値とwindow.innerWidthの値が一致して、それらしく感じます。また、Windowsでウィンドウを最大化している場合も同様です。 ですが、この方法実は問題があって、Windowsで最大化していない場合はウィンドウに枠が付く（しかもサイズはWindowsの設定で任意に変更可能）ので、window.outerWidthの値がウィンドウの枠の太さ分wind
Vivaldi (Tech Preview) のPage ActionにCSSやJSを追加する (Mac OSX) - Pastalablog in はてな
今日起きたら Vivaldi なるブラウザが話題になってた。 諸々は下の記事とかを読むと良さそう。 We use JavaScript and React to create the user interface — with the help of Node.js, Browserify and a long list of NPM modules.— 辛子明太子 (@pastak) 2015, 1月 28 ウィンドウ下部にPage Actionというのがあってデフォルトで色んなフィルタとかが入ってる。 vivaldi、便利機能着いてて最高 http://t.co/RmqRDA4Vaq pic.twitter.com/EEsjOXJ5TQ— 辛子明太子 (@pastak) 2015, 1月 28 まだUser.JSとかUser.CSSとかは未実装っぽいけどこのPage Actionに任意
Gyazoした画像にヌマクローを書き加えるuser.js書いたので共有します - Pastalablog in はてな
ポケモンでは１２年前と同じくミズゴロウを選んだので、ヌマクローの目の死に具合は気になったのですが、まさかここまで流行るとは・・・ というわけで最近流行ってるヌマクローコラ画像が簡単に作れるuser.jsを書いた。 こんな具合でGyazoにアップロードした画像にヌマクローを忍び込ませることが出来る。 before after サンプルでは正面のヌマクローしか合成してないけど、後ろ向きのヌマクローも選べる。 画像はそれぞれ以下から取ってきてDataURL形式に変換して直書きしてあるので、user.jsのファイルが大きくなってしまった。 ヌマクロー 正面 pic.twitter.com/L2EnqG2CoL— ポケモン公式ツイッター (@Pokemon_cojp) 2014, 12月 4 ヌマクロー 後ろ姿 pic.twitter.com/LGn80mO1gu— ポケモン公式ツイッター (@Po
Go言語でWebアプリを書いてみた話とそのフォローアップ【KMCアドベントカレンダー１日目】 - Pastalablog in はてな
この記事はKMCアドベントカレンダー2014の１日目の記事です。 KMCアドベントカレンダー１日目ということで先日GDG京都の勉強会とKMC学習発表会で話した「Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto」の補足などを書いてみたいと思います。 Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto from Shoot Morii 各種packageについて 今回の資料では https://github.com/zenazn/goji https://github.com/mattn/gom https://github.com/coopernurse/gorp https://github.com/yosssi/ace https://bitbucket.org/liamstask/goose を使
学生無料チケットをうっかり確保できたので #yapcasia に初参加してきた話 - Pastalablog in はてな
YAPC::Asia Tokyo 2014 ずっと、はてブとかTwitterとかで面白そうだけどPerlわからないしなぁと思って敬遠してた YAPC::Asia だったけど、 @941 さんの以下のpostを見て安心したのと、学生無料チケットを申し込むのに成功したので夜行バスで参加してきた。 YAPCでPerlの話が聞けると思ってるの、逆に情弱感あってよい— くしい (@941) 2014, 6月 11 1日目 HUBじゃん！！！！ pic.twitter.com/znTNA0RqGG— 麺飯 (@pastak) 2014, 8月 28 やぷしぃーだ (@ 慶應義塾大学 日吉キャンパス (Keio University Hiyoshi Campus) in 横浜市, 神奈川県) http://t.co/wjLfqkviWl pic.twitter.com/bfq0j3x9nF— 麺飯 (@
画像のURLを保存してMarkdownとかHTMLとかにしてクリップボードに投げてくれるChrome拡張を書いた - Pastalablog in はてな
タイトル通りのことが出来るChrome拡張を書いた。 この前、私立プログラミングキャンプっていうハッカソンがあって、その場で書き始めたやつがそれなりに動くようになったので公開することにしました。 オープンソースです。 https://github.com/pastak/Image-Basket Chrome Web Storeにも載せた Image Basket - Chrome Web Store zoiとかLGTMとかいちいちサイトに行ったりしてコピペしてくるの面倒だったから、画像のURLを覚えててくれるやつを作ったという感じ。 使い方 URLを保存しておきたい画像の上でコンテキストメニューを開くと「Save To Basket」というメニューがあるのでそれをクリックすると、タイトル入力用のpromptが開くので適当に入力すると保存されるという仕組みです。 chrome.storage
サークルの例会講座でWebAPIについてざざっと紹介しました - Pastalablog in はてな
資料をmarkdownで書いたので、gistに貼って共有したのですが、JS埋め込みなどが効かなかったのでブログに貼ることにしました。 自己紹介などは省略しております。あしからず。 （下記資料内の対応ブラウザの欄のFirefoxのあとの(M)はFirefox Mobileを表現しています） 今日のはなし Web APIと呼ばれているJSのAPI群から一部のAPIについての紹介をします 「そういうことがJSで出来るようになってるのかぁ」って程度の知見の共有です Web API とは(1) WebAPI はデバイスの互換性一式と、Web アプリやコンテンツがデバイスに保存されているデータ (カレンダーや連絡先など) に加えてデバイスハードウェア (バッテリーの状態やデバイスのバイブレーションハードウェアなど) へアクセスできるようにする API を指す用語です。これらの API を追加することに
京大マイコンクラブでGitHubのプライベートレポジトリを無料で50個有効化した話 - Pastalablog in はてな
追記2016/05/12 1:18 (JST) 全てのプランにおいてプライベートリポジトリ数の上限が撤廃されたので、それに関する情報をKMCブログに書きました。 この前、GitHubの人々が来日されて京都でもイベントが開催されて、そこでアメリカとかでは大学の授業やゼミなどにGitHubが活用されているという話を聞いて、ブログに書いたりしました。 #GITHUBJP でGitの話を聞いてきた。−大学の授業とGithubについて聞いてきた - Pastalablog in はてな そのイベントの時に通訳をしてらした @dice さんと村岡さんとやり取りをしていた中でKMCでもGitHubを使ってみませんかという話になったので、手順を教えてもらって実際に利用を開始したので、簡単に方法をまとめておきます。（今回はサークルのOrganizationで利用を開始したのでその例を紹介しますが、同様の方法
Google Chrome version33で chrome-inrernal://newtab が無効になった件 - Pastalablog in はてな
表題の通りの変更がGoogle Chrome version 33から加えられています。 結構反応している人が多くて、公式ブログのアップデート報告記事でもNew Tab機能を復活させてくれの声がいくつも投稿されているようでした。 Chrome Releases: Stable Channel Update 僕は すぐに宮崎あおいを見れるGoogle Chromeの拡張作った。 - @soh335 memo の拡張を愛用しているのですが、デフォルトの新規タブにある機能、例えば他のデバイスで開いているページを見るとかが使いたいことがあるので"chrome-internal://newtab/を開くリンクを追加して使ってた*1から割とダメージを受けた。 正確にはChrome Ver29でデフォルトでは使えなくなってflagで有効に出来る状態になっていたのが、Chrome Ver33で完全に削除さ
ブラウザーと画像のEXIFのお話 - Pastalablog in はてな
追記 (2020/02/17) 各ブラウザが足並みを揃える形でCSSのimage-orientation属性の初期値が from-imageになりそうです。以下各ブラウザの対応状況です。 Chrome: 158753 - chromium - An open-source project to help move the web forward. - Monorail 3月にリリース予定のChromeのバージョン81以降で有効になる予定です Webkit: 89052 – Implement css3-images image-orientation r254187で入って、Safari Technology Preview 99に含まれています Firefox: 1607667 - [css-images] Consider changing initial value of 'imag
tmux + zsh 環境下での PATH の話 - Pastalablog in はてな
全然ZSHの仕組みを知らなかったとかそういう話です。 情弱なので自分のzshがどこからPATHを読んでるのか分かってない— Pasta-K/ShutoMorii (@pastak) 2014, 2月 20 zshがPATHを複数回読んでいる気がする— Pasta-K/ShutoMorii (@pastak) 2014, 2月 20 echo $PATHすると内容が重複してる— Pasta-K/ShutoMorii (@pastak) 2014, 2月 20 @FromAtom 確認しましたが１つでした。— Pasta-K/ShutoMorii (@pastak) 2014, 2月 20 そもそもずっと、phpenvが上手く使えなくておかしいと思ってた。 いつも、デフォルトのphpが起動するので、毎回$ ~/.phpenv/shims/php hoge.phpとかってしてた。これ絶対おかしく
Schemeを実行するChrome拡張「chroscheme」を作った - Pastalablog in はてな
jsScheme - Scheme interpreter in JavaScriptというサイトがある。 このページではSchemeをブラウザ上で実行できる。 どういうことかというと、つまりはScheme処理系がJavaScriptで実装されてる。 GPLライセンスで自由に使って良いとのことだったので、一部だけ手を加えて、Chrome拡張に移植した。 授業でちょうど今、『計算機プログラムの構造と解釈』（Structure and Interpretation of Computer Programs）を読んでて、英語版はリンク先で全部公開されてるから、これを読んでるとSICPにサンプルコードを見つけると、自分の場合はそれをコピーしてVimに貼り付けて実行するとか、大体の人なら授業指定の処理系Jakldに貼り付けたりして実行している。 学習的には丁寧に写経したりするんだろうけど、どう動くか
そういや、Google ChromeのDeveloper ToolsってCSS当てられる気がする - Pastalablog in はてな
と思ったからググったらあった。 SouffleCode.net: The Leading Souffle Code Site on the Net ！！！Chrome v33からCustom.cssを変更しても効かないようになったので注意！！！！（エントリーの最後に代替策について記述しています） Chrome Developer Toolsを開いて、別窓にしてもう1回ショートカットキーを押すとDeveloper ToolsのウィンドウをDeveloper Toolsで解析できる。便利。 でも、なんかウィンドウいっぱい開かないといけないから面倒だって人は、Chromeでchrome-devtools://devtools/bundled/devtools.htmlを開けば直接HTMLファイルを開けるので、この状態で普段HTMLを見る時みたいに見れる。便利。 これを開いてると、Custom.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
