Technote

by sizuhiko

Polymer.co-edo meetup 21を開催しました

Sunday, January 27, 2019 10:29:00 AM

2019年1回目となる Polymer.co-edo ミートアップ を開催しました。

今回、私は以下の作業を実施しました。

はじめての LitElement エレメントの作り方はなるべく多くの人が体験できるようにかなっていますので、ぜひお試しいただき、何かあれば気軽にフィードバックをいただければと思います。

LitLoaderは、Polymer1や2のときのようにHTMLファイルでの記述が可能で、拡張子を .lit という形式にしています。 WebpackをとおすとLitElementのjsファイルに変換する仕組みになっています。 私は HTML in js よりも、こちらの書き方が気に入っているので、これからも何かあれば貢献していきたいです。

なぜかと言うと、HTML Modulesの議論が活発に行われていますが、ブラウザの実装になるまでは時間がかかると思うので、いったんWebpackで変換するなどpolyfillにも頼らない形での記述形式は重要かな、と思っています。

LitLoaderは、コードも簡単でスッキリしているので現時点では不満もありません。

次回

2019年の開催予定を公開しています。次回は2/18の予定です。皆様の参加をお待ちしております。

Doorkeeperのコミュニティページ

GCPにBitnamiでmemcachedサーバーを作る

Monday, January 07, 2019 11:26:00 AM

2019年最初の記事はmemcachedのサーバーを作ることからです。

なんで今さらサーバーを？

私は現在Toilet Evolutionというサービスを作っていて、まぁ特に流行ってもいないのですが、トイレ監視のIoTプラットフォームをやっています。 これはGAE(Google App Engine)で動いていて、PHP5.5で作られています。

GAEにはgVisorというコンテナ技術をベースにした第二世代( 2nd Gen と呼ばれている )があるのですが、PHP7.2が使えるようになります。 しかしこれに伴い、これまで使えていたmemcachedサーバーが使えなくなります。 通常のGCPアプリと一緒となり、Cloud Memorystoreを使えということですね。 ただ、これには無料枠がなくて、（なんとか低額でやっていきたい層だけが）ぬーんとなるので、今回 GCP の無料インスタンス f1-micro にmemcachedサーバー(SASL付き)を構築してみようという試みです（f1-micro が無料で使えるのは米国リージョンだけです）。

Bitnami

Bitnamiとは、アプリケーションをインストールするのを支援するサービスで、クラウドにも対応しています。 memcachedサーバーをGCP上に構築するのも、GUIからポチポチと実行できます。 もちろん自力でやっても問題はないので、SASL memcached now available!みたいな記事を読んでやってもOKです。

Bitnamiの画面遷移とかざっくりした説明は書きません。 GCPにRedmine環境を作ってみたというBlogが、Bitnamiを使ってGCPにRedmine環境を作るという内容で、スクショもたくさんあってわかりやすいです。 まぁ使ってみてそんなにハマりどころはないので、読まなくてもだいたい大丈夫です（ただし英語アレルギーとかない人）。

プロジェクトを作る

GCPでプロジェクトを作って（もしくは既存のプロジェクトで）以下のAPIを有効化しておくと、Bitnamiからのデプロイが簡単に進みます。

あとは課金の設定。

memcachedサーバーを作る

米国リージョンを選択するのですが、App Engine と同じリージョンに配置したいので、 gcloud app regions list で利用できるリージョンを確認しておきましょう（GAEからはインターネット越しになるので、それほど意味があるかはわかりませんが、気分的な問題ですw）。

memcachedを選択して、プロジェクトを選んでいくと us-xxxx のリージョンで f1-micro を選択したのに、料金が表示（$4.28ぐらい）されるかもしれませんが、 f1-micro インスタンス使用量は、最初の 744 時間分が無料 なので、744時間 == 31日 ということで実質月額無料です。

Application Info にユーザー名 user とパスワードがあるので、PHPから接続する情報として記録しておきます。 Server Info にアクセスするときのIPアドレスがあるので記録しておきます。また、SSHするときのキーがあるので、何かのときのためにダウンロードしておきます。

Cloud ConsoleのVMインスタンスに、memcachedサーバーができているのを確認しておきます。

App Engine からアクセスできるようにする

このままでは App Engine からアクセスできない（App Engine はインターネット経由でGCPのVMにアクセスするため）ので、ファイヤーウォールの設定を行います。 BitnamiのドキュメントConnect To Memcached From A Different Machineによると、ポート 11211 を解放するよう書いてあります。 BitnamiからインストールされるmemcachedはデフォルトでSASL認証がonになっているので、PaaSのようにIP制限できない環境からクラウド越しに利用するときは安心ですね。

もし、GCPでのファイヤーウォール設定のやり方がわからない場合は、上記ページの the FAQ の遷移先 Open Or Close Server Portsが参考になります。

サンプルプログラム

GAE 2nd Gen で動くPHP7.2のサンプルプログラムを用意しました。

app.yaml ファイルの環境変数を3つ設定します。

  • MEMCACHEDSERVERADDR: memcached サーバーのIP
  • MEMCACHED_USERNAME: ユーザー名。これはデフォルトで user になっているので、変更不要
  • MEMCACHED_PASSWORD: Application Info で表示できるパスワード

以下のコマンドでプロジェクトにApp Engineを作ります。例えば us-west2 に memcached サーバーを構築したら以下のような感じです。

gcloud app create --region=us-west2

続いて、アプリケーションをデプロイします。

gcloud app deploy

実行してみる

GAEのエンドポイントに接続すると、以下のように表示され、memcached と接続し読み書きできていることがわかります。

Array
(
    [xxx.xxx.xxx.xxx:11211] => Array
        (
            [pid] => 1786
            [uptime] => 4689
            [time] => 1546843636
            [version] => 1.5.12
            [libevent] => 2.0.17-stable
            [pointer_size] => 64
            [rusage_user] => 0.46
            [rusage_system] => 0.188
            [max_connections] => 1024
            [curr_connections] => 2
            [total_connections] => 5
            [rejected_connections] => 0
            [connection_structures] => 3
            [reserved_fds] => 20
            [cmd_get] => 2
            [cmd_set] => 2
            [cmd_flush] => 0
            [cmd_touch] => 0
            [get_hits] => 2
            [get_misses] => 0
            [get_expired] => 0
            [get_flushed] => 0
            [delete_misses] => 0
            [delete_hits] => 0
            [incr_misses] => 0
            [incr_hits] => 0
            [decr_misses] => 0
            [decr_hits] => 0
            [cas_misses] => 0
            [cas_hits] => 0
            [cas_badval] => 0
            [touch_hits] => 0
            [touch_misses] => 0
            [auth_cmds] => 3
            [auth_errors] => 0
            [bytes_read] => 607
            [bytes_written] => 6855
            [limit_maxbytes] => 67108864
            [accepting_conns] => 1
            [listen_disabled_num] => 0
            [time_in_listen_disabled_us] => 0
            [threads] => 4
            [conn_yields] => 0
            [hash_power_level] => 16
            [hash_bytes] => 524288
            [hash_is_expanding] => 0
            [slab_reassign_rescues] => 0
            [slab_reassign_chunk_rescues] => 0
            [slab_reassign_evictions_nomem] => 0
            [slab_reassign_inline_reclaim] => 0
            [slab_reassign_busy_items] => 0
            [slab_reassign_busy_deletes] => 0
            [slab_reassign_running] => 0
            [slabs_moved] => 0
            [lru_crawler_running] => 0
            [lru_crawler_starts] => 3060
            [lru_maintainer_juggles] => 4979
            [malloc_fails] => 0
            [log_worker_dropped] => 0
            [log_worker_written] => 0
            [log_watcher_skipped] => 0
            [log_watcher_sent] => 0
            [bytes] => 69
            [curr_items] => 1
            [total_items] => 2
            [slab_global_page_pool] => 0
            [expired_unfetched] => 0
            [evicted_unfetched] => 0
            [evicted_active] => 0
            [evictions] => 0
            [reclaimed] => 0
            [crawler_reclaimed] => 0
            [crawler_items_checked] => 0
            [lrutail_reflocked] => 0
            [moves_to_cold] => 2
            [moves_to_warm] => 0
            [moves_within_lru] => 0
            [direct_reclaims] => 0
            [lru_bumps_dropped] => 0
        )

)
Hello World

数回アクセスしてみると、以下のようなスペックになります。

  • 99 パーセンタイル: 90.24ms
  • 95 パーセンタイル: 89.18ms
  • 50 パーセンタイル: 77.25ms

さいごに

私のサービスは Cloud Datastore のキャッシュとしてmemcacheを使っているので、キャッシュになければ、 永続化しているところから直接ロードするだけなので、堅牢さはそれほど必要ないです。 できれば Cloud Datastore へのI/O回数を減らして低額でやりたいなぁという程度なので、f1-micro に1つサーバーを起動する程度で良いという割り切りです。

あとはredislabsが30MBまでなら無料で使えるので、そういうのも選択肢としてあるかもしれないですね（実際にGAE Python3のドキュメントからはリンクされていたりする）。

もし同様にやってみたいなぁと思う方がいたら参考になれば幸いです。

2018年を締めくくる最後の投稿

Monday, December 31, 2018 02:36:00 PM

おわりのはじめ

今年は「発信」をテーマにした1年でした。ここ2年Blogの本数も1桁で、もっとやっていることを短くても良いから初心に返ってたくさん書こうと思ったのでした。 実際はもっと書けることもあったような気がしますが、この投稿も含め31投稿ということで今までで一番多い投稿ができた1年でした。 来年も継続していきたい。

イベント登壇と運営

2018年は、なんかずっとイベントに追われている気がしたので、まとめてみます。

運営/主催/発表/出展などは、その準備だったりミーティングがあったりして、これよりも私のGoogleカレンダーは濃密にイベントスケジュールで埋まっています。 ここ数年これほどなかったなという記憶と、やりきった感は強いのですが、来年はPHP関連のカンファレンスが毎月のようにあるじゃないですかw

おわりのおわり

来年も同じようなペースでやっていきたいです。 何をするにも健康第一なので、運動してお酒はほどほどに？みなさまと楽しい1年にできればと思います。 どこかでお会いしましたら、よろしくお願いします！

PHPカンファレンス2018に参加してWebComponentsに関する発表をしました

Monday, December 31, 2018 01:52:00 PM

PHPカンファレンス2018に参加しました。

今年は、珍しく朝イチから到着して他のセッションをみたりしながら、1日を過ごすことができました。 資料作成やリハが順調に進んでいたので、良かった。

午前中はメルカリさんのスポンサーセッション、とはいえあの @DQNEO さんによるPHPUnitアップグレードセッションなので、通常セッションとして楽しめました。大企業におけるツラミみたいなのが満載のセッッションで、他の会社でそこまでブランチ戦略などが複雑に絡み合うことは少ないかもしれないけど、同じような悩みを抱えている人には心強いメッセージになっていたと思います。

午後一番は自分のセッションでした。

私はJavaScriptやHTML5jなどフロントエンドエンジニアが集まるコミュニティに参加したり、お手伝いをしたり、今回発表するきっかけのコミュニティでもあるPolymer Japanを運営していたりするので（実際の仕事もほとんどフロントエンドだし）、本当にSPAや重厚なJSフレームワークが必要なケースがどれぐらいあるのか？というのを見てきたつもりです。

まだ多くのWebサイトはそこまでを必要としていないので、jQueryやBootstrapを利用すれば十分であったりするケースもあります。 そういったときに「Web Componentsができること」というメッセージを伝えらるセッションになっていたら良いな、と思います。

そのあとは、またスポンサーセッションですが「PHPを選ぶ理由 / CTO 松本 宏太 / 株式会社SCOUTER」を。これも技術/人材というスコープから考える戦略という意味で多くの気づきが得られる内容だったと思っています。

そのままの部屋で「PHP-FIGのHTTP処理標準の設計はなぜPSR-7/15/17になったのか / 田中 ひさてる」を。 PSRはちょうど発表の直前にPHP FIGあたりの揉め事があって、なんかPSRとは？みたいな気分になっている人もいたと思いますが、セッションの内容はとてもすばらしくて。PHPはいろんな言語の良いところを取ってきたというのは事実として、よりPHPが向いている指向になっていったという良い話が聞けました。

最後は「Webサービスを育てるための組織作りと文化作り / 曽根 壮大 / 株式会社 オミカレ」を。 @soudai さんDBではない貴重な？発表でした。すごい良い話だったので、ぜひブログ記事を見て欲しいな。

あとはLT見て、懇親会、二次会……. 5ぐらいまであったとかw

解散時の言葉は、やっぱり蒲田に宿取ろう….昨年も聞いた気はしますが… とにかく楽しいPHPコミュニティのお祭りでした！

Polymer.coedo ＃20を開催しました

Monday, December 31, 2018 01:34:00 PM

今年11回目となる Polymer.co-edo ミートアップ を開催しました。

前回に引き続き「Edoエレメントの制作とWeb Componentsもくもく」です。

ちょうど lit-html が1.0 rcになるというニュースを直前に見ていたので、今後Edoエレメントを LitElement で作る時の参考になるように、恒例のCodeLabsをLitElement版に書き換える作業をやりました。

はじめての LitElement エレメントの作り方 でLitElementをベースにしたWeb Componentsの入門が行えます。

ぜひ体験して、フィードバックをいただければと思います。

次回（==来年）

2019年の開催予定を公開しました。年明け1回目は1/21になります。皆様の参加をお待ちしております。

Doorkeeperのコミュニティページ

« Prev 6 7 8 9 10 11 12 13 14 Next »

Recent Articles

By Year

Twitter