ServiceWorker ハッカソンに行ってきました。
どうもk2wankoです。
気がつけば大学生活も半分終わってました。
春一番にGoogle主催のServiceWrokerハッカソンに参加してきたのでメモを残しておこうと思います。
ServiceWorkerとは
イベント駆動によるJavaScriptの実行環境です。
ページからのリクエストにHookして色々操作することもができ、リクエストというのはXHRだけではなくとかのリクエストも書き換えることができるようです。
最近話題になったPushNotificationなども
ServiceWorkerから利用できます。
なのでWebでPushとか使いたいならServiceWorkerを制しておきましょう。
ServiceWorkerのデバッグ
ここのスライドを参考にやります。
ChromeCanaryをインストールし
chrome://flagsにアクセスします。
デベロッパー ツールのテストを有効にするを有効にしたら再起動します。
ちなみにServiceWorkerはどこでも利用できるわけではなくlocalhostかhttpsのみになります。
リクエストを置き換えられるのでセキュリティ的にhttpsじゃなきゃダメということですね。
とりあえずHTML等とローカルサーバーを用意してデベロッパーコンソールを開き
右にある歯車アイコンをクリックしてSettingを開きます。
左の項目にExperimentsを選択しShiftを６回クリックし非表示の項目を表示させます。
Service workers in Resources panelにチェックを入れるとResourceにServiceWorkersという項目が追加されて デバッグができるようになります。
Push通知の実装は以下のスライドにあります
まとめ
前々から気になっていたPush通知を試せて良かったです。
今日のハッカソンでPush通知に少しハマったのがServiceWorkerを登録し直すとSubscriptionIdが変わるということに気づかなかったところです。
それとPush通知の利用シーンとしてはアプリを入れるまでもないしユーザー登録をするまでもないようなサービスに最適なんだなーと言うことを学べたので
何かサービスを作れるように頑張って見ようと思います。
参考リンク
最近やっていること
日々のルーチンワークで 今時分が何をしたいのかを忘れることがあります。
日記を書くといいと聞きますがブログにすると痛々しくなってしまうので
クローズドでMarkdownで書けるサービスかCMSないかなぁと思っています。(勉強に自分で作りたいなともぼんやり思ってたり)
アルバイト
アルバイトのことは書くとボロが出ると思うのでサラッと書く感じ。
Androidアプリを作ったりしてます。
どこで何を作ってるかってのは勉強会だと話のネタにするけどブログに書いても面白く無いかな。
個人プロジェクト
たぶんコレが一番メモしときたいこと
僕がだいたい一人でコツコツとやっていることです。
Minecraftサーバーのレンタルサービス
Minecraftという永遠に遊んでられるゲームがあります。
箱庭ゲームというものでレゴブロックのように自由にブロックを設置したり
クラフティングでアイテムを作ったり色々できるゲームです。
サバイバルもできるしJavaプログラミングができればその可能性は無限大です。
そのMinecraftのマルチプレイ用のサーバーを貸し出すサービスをやりたいなーってことで色々調べたりしてます。
海外だともういくつも既にそういうサービスがあるので差別化が難しそうです。
Railsで作ろうとしてますがRailsはあまり馴染めず苦労してます
ニコニコ生放送のコメントビューアー
大学に入る少し前Minecraftのニコ生してて
そこからニコ生に嵌まりました。
生主やってて気づいたことを元に既存のツールでは満足できない
基本設計から満足できなかったものがコメントビューアーです。
既に色々ありますが基本WindowsはWindows、MacはMacという形で作られたものばかりなので
どのパソコンからも同じデータを手軽にアクセスして使いたいということから開発してます。
プラットフォームはChromeをターゲットにしてますのでChromeが動く環境ならどこでも動くことを目指して作ってます。
Chrome Appsについては今はまだまだ市場が小さいですがChromeBookが日本でも発売されましたのでこれから増えていくだろうと思います。
コメントビューアーを作るにあたってChromeAppsのテストのしにくさを解消するために色々考えた結果僕が最近作っているのは
Node.jsでも動くニコニコ動画のAPIクライアントです。
Node.jsとChrome Apps両方で動かせるライブラリを作ってます。
遠回りなことしてるなーと感じつつも書いたコードは無駄ではないと信じて
一人でIssueを作ってPullRequestを投げて承認して作業してます。
まとめ
とりあえず今年から就活に向けて動き出さないといけないので
夏前にはこの２つのどっちか作っておきたいなと
プラス、スマホ向けアプリも作らないとなってかんじです。
友達や後輩に教えたい技術書とかツールとか
たいしたことないのに つい先輩風を吹かしてしまいました。っべーよ(みさわ省略
さてそれはいいとして 翔泳社が開催している
「ITエンジニアに読んでほしい！技術書・ビジネス書 大賞 」
というものがあってその大賞になった本の一つが僕の愛読書だったので 何日かぶりにブログを更新しようと思い立ちました。
その愛読書が「GitHub実践入門」という本です。
GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)
- 作者: 大塚弘記
- 出版社/メーカー: 技術評論社
- 発売日: 2014/03/20
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (18件) を見る
この本の良さというか凄さというのは コレ一冊でGitとGtihubを仕事で使えるレベルになるということです。
たぶんGitを楽しく使うにはGithubと一緒に使うことが一番楽しいと思います。
そのGithubを使うための基本的なところをギュギュっとわかりやすく解説してる本だと思います。
またGithub以外にもレポジトリのホスティングサービスがいくつかありますが
その中でもGithubを使うことの良さとして僕が推したい理由の一つとしてツールやサービスが揃っているってのがあります。
そのツールやサービスについても触れられていたりもします。
特にhubコマンドはGithubを使う上でないとPRも送れないくらいになってしまいました。
hubはGithubをターミナルで操作するためのツールです。
前はRubyで書かれてたんですがv2.0以降からGoで書かれています。
つまりバイナリ一個で動きます。
僕の作業環境はMacなので以下のコマンドでemacsでPRの内容を書いたらすぐにブラウザで確認することができたりします。
$ open $(hub pull-request)
おまけとしてGithubの文化というものにLGTM(Locks good to me.)というものがあり
自分がコードをレビューする立場になったら是非面白いLGTMを決めて欲しいという思いからChromeExtensionsをおすすめしときます。
LGTMでめでたさを伝えるChrome拡張をつくった - Thinking-megane
続いてオススメしたい本は「テストから見えてくる グーグルのソフトウェア開発」という本で
これは大学の先生から教えてもらった本です。
- 作者: ジェームズ・ウィテカー,ジェーソン・アーボン,ジェフ・キャローロ,長尾高弘
- 出版社/メーカー: 日経BP社
- 発売日: 2013/05/23
- メディア: 単行本
- この商品を含むブログ (8件) を見る
内容はGoogleがやっているソフトウェアのテストの仕方についてインタビュー形式で書かれたものです。
この本は初めて読んだ時ちんぷんかんぷんでしたが
少しずつTDD(テスト駆動開発)について勉強していく中で読み返すと徐々に内容がわかってくるので
自分自身の技術レベルの物差しとして活用してはどうかなという思いでおすすめです。
最後の一つはライトノベルです。
「なれる！SE」というIT界隈で有名な本です。
- 作者: 夏海公司,Ixy
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2010/06/10
- メディア: 文庫
- 購入: 49人 クリック: 883回
- この商品を含むブログ (155件) を見る
でもたまに知らない人もいるので 布教
IT業界に入るかどうかはこれを読んでから決めるといいと言われています。
まだ学生なのでこの本のリアリティは語れませんが一つわかることは
IT業界に室見さんはいないということです...。
Dockerでio.jsの開発環境を作ってみる
いつものようにDocker Hubを眺めていたら
io.jsの公式Imageがあったのでこれはやるしかない！ということでやっていきます。
https://registry.hub.docker.com/_/iojs/
環境
Mac OS 10.10.1 Docker 1.4.1
figのインストール
figはDockerのコンテナをいい感じにしてくれるツールで
設定ファイルを元に短いコマンドでコンテナを起動してくれたりします。
$ sudo pip install -U fig
package.jsonの作成
scriptsにstartとdependenciesにkoaを追加しています。
Dockerのイメージを作成する際にないとエラーになるので先に作っておきます。
{
"name": "docker-iojs-project-example",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"author": "",
"license": "MIT",
"dependencies": {
"koa": "^0.16.0"
}
}
Dockerfileの作成
Dockerfileを作成します。
onbuildは短くかけるし便利なのでドンドン使いたいです。
EXPOSEでポートを開けておきましょう
FROM iojs:onbuild ENV PORT 3000 EXPOSE 3000
fig.ymlの作成
ここでどのようにコンテナを作成するか書きます。
volumesの項目ではカレントディレクトリをコンテナにマウントします。
これで毎回Docker buildせずに起動すればコードが反映されます。
web:
build: .
volumes:
- .:/usr/src/app
ports:
- "3000:3000"
fig.ymlを作成したら以下のコマンドでbuildしましょう
$ fig build
koaのHello World
koaはES6のGeneratorsを使って作られたWeb Frameworkです。
Middlewareが書きやすくなります！(今度詳しく調べます)
app.jsという名前で以下のファイルを作成します
var koa = require('koa');
var app = koa();
app.use(function *(next){
var start = new Date;
yield next;
var ms = new Date - start;
console.log('%s %s - %s', this.method, this.url, ms);
});
app.use(function *(){
this.body = "Hello World";
});
app.listen(process.env.PORT || 3000);
そしたら以下のコマンドでコンテナを作成して起動しましょう
$ fig up
http://docker-host:3000/にアクセスしてHello Worldが確認できると思います。
まとめ
今年はNode.jsとio.jsはいったいどうなるのか注目です。
Node.jsのFrameworkの定番もexpress.jsからkoaになるかもしれないのでそろそろ調べていこうかと思いました。
それと今度のNode学園ではio.jsについてトークがあるので 申し込みを忘れないようにしておきたいです。
Cocos2d-x v3.3から入門する
就活までになにかプログラマっぽいポートフォリオを作りたいしReleaseもしたい！
ということでCocos2d-xを入門してみようと思います。
まぁ今年就活ではないんですがね。
まだデベロッパー登録してないのでiOS端末には入れられないので
Androidの実機でTestCppを動かすまでを目標にしたいと思います。
Cocos2dx(v3.3)のインストール
開発環境はMac OS X 10.10.1です。
AndroidSDKとAndroidNDK(r9d)はインストールされているもので
Xcodeも入ってる状態です。
Download Cocos2d-x Cocos2d-html5 Cocos Studio | Cocos2d-x
公式のダウンロードページからCocos2d-xのv3.3をダウンロードしてきて適当な場所に解凍します。
僕は見つけやすいという理由でHOMEディレクトリの直下においています。
$ unzip cocos2d-x-3.3.zip && mv cocos2d-x-3.3 ~
そしたら以下をbashrcかzshrc的なシェルの初期化処理をする場所に記述しておきます。
export ANDROID_SDK_ROOT=$ANDROID_HOME export ANDROID_NDK_ROOT=$ANDROID_NDK_HOME # Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x export COCOS_CONSOLE_ROOT=$HOME/cocos2d-x-3.3/tools/cocos2d-console/bin # Add environment variable ANT_ROOT for cocos2d-x export ANT_ROOT=/usr/local/bin export PATH=$PATH:$COCOS_CONSOLE_ROOT
cocosコマンドが使えればOKです。
TestCppを動かす
カレントディレクトリをcocos2d-x-3.3/tests/cpp-tests/に移動し
以下のコマンドでコンパイルから端末にインストールまでやってくれます。
$ cocos run -p android
ハマリポイント
TestCppを動かそうと思った時Android NDK r10ではリンカーでエラーが出るのでr9を使わないといけないようです。
Android NDK r10が非推奨を知らずに時間をだいぶ無駄にしたorz
Qiita API v2 Hackathonに参加してきました。
できるなら週１でブログを書きたいと思いつつも 何ヶ月ぶりになる僕です。
最近は「書くからめんどくさいんだ！」という結論に至り 自動投稿に憧れて自然言語処理とか機械学習とかのアルゴリズムを真面目にやりたいと思ってます。
後は技術よりのノウハウはもっぱらQiitaに投稿してるから ブログに書くネタなかったりしてるってのもブログ書かない理由だったりしてます。
そんな、ふと書いてしまうQiitaのイベントということでwkwkしながら行ってまいりました、が
って、わけでもないんですが まぁ自分の開発力のなさを痛感できました。
作ったもの(作ろうしたもの)
QiitaSummaryというQiita記事をまとめるツールを作ろうとしました。
テーマがQiitaAPI v2を使った「毎日が楽しくなるもの」だったので
そもそも書くってめんどくさい、自動で記事を生成できればいいんじゃない？
という適当な発想で記事を自動生成する物を作ってたんですが さすがに０から生み出すのは厳しいので
Qiitaの投稿を色んなパターンでまとめられて 要約機能がつけて 記事を生成すればいいんじゃない？
それをチーム内で公開してそこの記事から
気になったのに触発されて記事が書ければIN/OUTのいいスパイラルになるんじゃないかなと思ったんですが
流石にやっつけ仕事ではほとんど実装できませんでした。
自然言語処理は流行りだし楽勝なライブラリもあるだろーと楽観視してたら かなり自分で実装するはめに...
まぁおかげで 要約機能の作り方をなんとなくわかったので
今度、npmにした後 まとめてQiitaに投稿しようと思います。
ちなみにこんな感じのを出力できたりします。
(自分のストックをまとめたやつ)
このテーブルにさらにdigestができる予定だったんですが 組み込むところには間に合いませんでした。 でも適当な要約機能はできてるので上から３つ分くらい貼っておきます。
nginx.conf で環境変数を読み込む
すでにlua_nginx_module.html#env-`env`ディレクティブ__と __ngx_http_perl_set$server_name_from_env```##環境変数名と環境変数をnginx変数に設定したい場合は、sedとかERBを使ってnginx.org/en/docs/ngx_core_moduleに含まれていません。 ```nginxenvENV_NAME=hoge.example.comhoge/nginx`みたいに参照できたら良いのですが、nginxは起動時に入れてやる必要があると思います。今回は環境変数を引き継ぎません。
Chrome 40 で今すぐ ServiceWorker を試す
例えばGithubPagesはHTTPSのセットアップをする必要があります。 </p><pid="log"></p>ServiceWorkerをサポートして動作するWebサイトを作ってみてください。一方、ServiceWorkerからページのデータはWebフォントを使ってページをキャッシュする。
俺のJSライブラリの世界観(2014末版)
ただしtypescriptはHEAD使ってることが一度もないのでmocha-phantomjs:ブラウザテスト-sinon可能な限りヘッドレス(node)でテストする派。 gulp-concatなんだかんだでコマンド実行するのとconcat必要になるケースが多いので、プラグイン=低品質とほぼ同義であると言っても良い。UI層の開発イテレーションはトライアンドエラーを繰り返したい。
...まぁ ランダムにやってるし コードとか記号とか文章に関係ないのも合わさってるのでカオスです。(わけわからない要約が なんか楽しくなるんじゃないかなとも思ってたりしましたが...あんまりおもしろくなかった)
まとめ
次回も楽しみです。
AndroidWearを開発する 準備編
念願のMoto360を手に入れることができたので やっとWearアプリの開発ができます。
Android Wearでできること
Android Wearは腕時計型の端末です。 そしてAndroid Wear単体ではネット接続もできません (最近、腕時計型のAndroidが予約開始されてるけど これはWearじゃないので)
なので基本的には繋いだスマートフォン端末の通知をWearで受け取ったりできます。
でもただ受け取るだけじゃまだ腕時計です。
受け取ったメールに返信したりGmailであればアーカイブ、InboxならDoneなど操作ができます。
Wearで文字を入力するには音声入力のみなので 返信は短い文章に限られそうですね。(そのうちテンプレート返信くらいはできそうですが)
他にもスマートフォンのカメラのシャッタを押したり 心拍センサーがついてる端末などもあります。
まだ 対応アプリが少ない中なので一般向けではありませんが 今後AppleWatchが発売されれば腕時計型のウェアラブル端末の敷居が低くなれば一般にも広がるでしょうし AppleWatchはAndroidと連携する可能性よりAndroidWearがiOSと連携する可能性のが高いので投資するならWear(かな〜？)といえるかもしれません。
余談ですがMoto360を見た時スパイキッズ２に出てくるスパイウォッチだ！と思いました。 機能的には時間の確認できるMoto360のが優秀ですね(笑)
開発環境の用意
入門エントリーなんですが開発環境構築くらいは とっくにたくさんの人が書いているわけでDRYに則ってリンクだけ貼るスタイルで行きます。
15分ではじめるAndroid Wear開発 - 実機を使った開発環境の作り方 - Qiita
ちなみにMoto360の人はBluetoothデバッグがメインになると思います。
AndroidStudio使い Bluetooth経由でアプリのインストールができました。
