2016-07-12

プログレッシブウェブアプリってなんだ？

明日Google for Mobileというイベントが横浜で開催されます。
Google for Mobile 2016 | PROGRAM
私の勉強不足ですがそのセッション内容を見ていて"プログレッシブウェブアプリ"という単語が気になり調べてみました。

グーグルのデベロッパーサイトに記事があるんですね。
プログレッシブウェブアプリの定義としては"ウェブとアプリの両方の利点を兼ね備えたアプリ"とのこと。
はじめてのプログレッシブウェブアプリ | Web Fundamentals - Google Developers

アプリの利点としては以下ができることなのかなと思います。

ホーム画面にアイコンを表示
全画面表示
プッシュ通知

また、

オフラインでも動作可能( Service Workerを使ってキャッシュしておく)
サクサクした操作感( App Shell モデルを使って実装)

こんなことでアプリの良い点は失わないままにウェブの更新性の良さや、手軽さを持っているものが作れますよということらしい。

アプリにしなくてもプッシュ通知が送れるのは大きいですね。

App Shell モデルに関してはGitHubにデモのソースがあるようですのでこちらを動かしてみるのが理解するの早そう。
GitHub - GoogleChrome/application-shell: Service Worker Application Shell Architecture

以前のGoogle for Mobileでも同様のセッションがあったんですね。
【Develop】スマートフォン体験を一歩先へ - プログレッシブウェブアプリの作り方 - YouTube

ちなみにセッションで話されている内容で「へー」と思ったのが、
スマホユーザが1日にスマホを使う時間は２時間もなく、そのほとんどの時間を上位８０％のアプリが占めていると。
なので他のアプリはインストールはされていてもほとんど使われていない状況だとのこと。

Progressive Web App Summit 2016なんていうのもあったようです(英語)
Progressive Web App Summit 2016 - YouTube

このQiiteの記事もわかりやすい。
Google Developers Summit Tokyo 2016 | Progressive Web Apps | 参加まとめ - Qiita

こういった実装を作りやすいフレームワークなどが出てきたらまたアプリからWebに回帰するかもしれないですね。
プッシュ通知が使いたいがためにアプリにしてWebViewで表示させているサービスサイトって結構ありそうだし。

明日はFirebase関連を中心に回ろうと思っているのでプログレッシブウェブアプリのセッションを聞くかわかりませんが(汗
個人的に期待度高い方向性だなと思いました！

2016-06-29

VMWare Fusion8上のWindows7をWindows10にアップグレードしてみる

開発 windows

さてWindows10の無料アップグレード期間が2016年7月29日に終了を迎えます。
特にWindows7で問題はありませんでしたが、この機会にアップグレードしてみることにしました。

公式ページにも記載がありましたが普通にやろうとしてもVMware SVGA 3Dに対応していないと言われてアップグレードプログラムが進みません。

https://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&externalId=2126929

そこで今回わたしはisoファイルを利用する方法でやってみました。
ホストOSであるMacの方でisoファイルをダウンロードします。
Windows 10 ISO

ダウンロードが完了したらVMWare fusionの仮想マシンの設定>CD/DVDのところでダウンロードしたisoを選択します。
するとWindowsの方でメディアを検出して反応するのでsetup.exeを実行します。
途中でVMWare SVGA 3Dの確認ボタンを押せばインストールできました。

http://www.softantenna.com/wp/tips/vmware-svga-3d/

2016-06-16

CentOS7上でNodeをDockerで動かす ~ コンテナbuild時に名前解決ができない時にしたこと

開発 Docker nodejs

docker composerを使ってnode.jsのコンテナをビルドしようとしたら結構はまったのでメモ。

環境としては、
ホスト: CentOS Linux release 7.2.1511 (Core)

$ docker version
Client:
 Version:      1.11.1
 API version:  1.23
 Go version:   go1.5.4
 Git commit:   5604cbe
 Built:        Wed Apr 27 00:34:42 2016
 OS/Arch:      linux/amd64

Server:
 Version:      1.11.1
 API version:  1.23
 Go version:   go1.5.4
 Git commit:   5604cbe
 Built:        Wed Apr 27 00:34:42 2016
 OS/Arch:      linux/amd64

$ docker-compose --version
docker-compose version 1.7.1, build 0a9ab35

こんな感じです。

コンテナのイメージはDocker Hubにあるものを利用します。
https://hub.docker.com/_/node/
onbuildというイメージをベースに使うとnpm installしてnpm startしてくれるみたいなのでこれを使ってみることにしました。

Dockerfileには１行だけ記述してpackage.jsonと同じディレクトリに置きます。

FROM node:6-onbuild

docker composerも使うので、docker-composer.ymlを以下のように記述。
nodeappの下にDockerfileとpackage.jsonがあります。

version: '2'
services:
  node-app:
    build: ./nodeapp
    image: node-app:20160616

ファイルの構成としてはこんな感じ。

├── docker-compose.yml
└── nodeapp
    ├── Dockerfile
    ├── README.md
    ├── app.js
    └── package.json

これでdocker-compose up すればうまくいくはず！だったんですがnpm installでリポジトリが見つからずbuildのところで失敗。
DNSが引けてないんだろうというところまではすぐあたりがつきましたがその解決方法をググってやってみてもなかなかうまくいかず、はまりポイント。

自分の環境では、/etc/sysconfig/docker とか /etc/default/docker といったファイルがなく、
それぞれファイルを作って

DOCKER_OPTS="--dns 8.8.8.8"

OPTIONS="--dns 8.8.8.8"

なんて書いてdockerのサービスを再起動してみても状況が変わらず。

自分の環境でうまくいったのは、/usr/lib/systemd/system/docker.service を以下のように変更

ExecStart=/usr/bin/docker daemon -H fd:// 
↓
ExecStart=/usr/bin/docker daemon -H fd:// -dns=8.8.8.8

その後以下のようにデーモンの再読み込みとDockerのサービスを再起動をして解決！

$ sudo systemctl daemon-reload
$ sudo systemctl restart docker

とりあえずうまくいってよかった。

2016-06-14

Slack APIで画像ファイルをアップロードする

開発

Botkitを使ってボットを作っていました。
ボットでチャンネルに常駐してBuild successというメッセージがきたら

ダウンロードリンクを取得
QRコードの画像ファイルを作成
作成した画像ファイルをSlackに投稿

だいたいこんなことをやりたいボットです。

QRコードを作るのは簡単で以下のモジュールを使ってすぐに実装できました。
GitHub - soldair/node-qrcode: node js server side qr code generator utilizing node-canvas

使い方はこんな感じ。

        var QRCode = require('qrcode');
        QRCode.save('./qr.png' , 'http://google.com', function(err){
            if(err){
                console.log(err);
            }
        });

さて作成した画像をslackに投稿したいのですが、ここでハマりました。。
少しググったら以下の記事を見つけたので同様に試してみたのですが、どうも画像ファイルがtext/plainとして認識されてしまい文字化けしたような意味不明のファイルが投稿されてしまいます。

qiita.com

それで以下のAPIドキュメントを参考にしつつnodeのrequestモジュールを使って色々試行錯誤の沼に。。
files.upload method | Slack

だいぶ色々試して時間かかったのですが、
結論、以下の方法でできました。

slack apiで画像ファイルをアップロードする