Technote

by sizuhiko

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

Tuesday, January 30, 2018 10:46:00 AM

今年最初の Polymer.co-edo ミートアップ を開催しました。

今回の議題は

今月のテーマは、どうやって Web Components を作りはじめたら良いか？です。 自分たちが作ってみたい Web Components はあるものの、どうやって作り始めて良いかわからないといった悩みを解消できる会になれば良いと思っています。

ということで、まずは最近のPolymer/Web Componentsを取り巻く動向から解説しました。

  • Custom Elements が HTML5.3に入る見込み
  • Polymer で Custom Elements を作るとき、どのスタイル（バージョン）で記述するか

最近のPolymer/Web Components を取り巻く状況

まずHTML5.3に入るかどうかについては suikawiki - HTML 5.3 からリンクされている2つのissueに注目してみることができます。

Web Components を支える技術（仕様）のうち HTML Import でなく Script Module になる Polymer 3.0 からは、3つ以上のブラウザーが実装を持っている状況になるので標準仕様の後押しになっていると考えられます。

Polymer での記述スタイルについては、先日Polymer公式ブログに掲載された The future of elements / What we’re doing with Polymer elements, what we aren’t doing, and why. が参考になります。

現時点で Polymer が提供しているコアエレメントのソースコードを見てみてください。ほとんどは Polymer 1 の形式（ES6クラスを利用しない）です。これは Polymer 2 でも利用可能なハイブリッド形式と呼ばれるものです。一方 Polymer 3 用には 3.0 preview のようなブランチが用意されていて、現時点 Polymer 3 preview 版はこちらを参照するようになっています。

例えば paper-input エレメントでは

  • https://github.com/PolymerElements/paper-input はハイブリッド形式
  • https://github.com/PolymerElements/paper-input/tree/3.0-preview は3.0形式

になっています。

上記ブログにも書かれているとおり、なぜ ES6 形式を提供しないのか？という問いに関しては

Polymerのユーザーに、Polymer 1.0からPolymer 2.0と3.0へのスムーズなアップグレードパスを提供する必要がありました。

と書かれています。これは互換性や移行可用性について、フレームワーク開発者がとても配慮してくれていることがわかります。

2.0のエレメントは、Polymer 1.0と2.0をブリッジする最小限の変更となるように設計されており、ユーザーがアプリケーションを簡単に2.0へアップグレードできるようにしました。 同じ理由から、3.0のエレメントは、既存エレメントを自動変換したES6モジュールで提供されます。 引き続き 2.xと3.xのエレメントはサポートされ、次世代のエレメントを計画しています。

3系の自動変換については、次のセクションでも詳しく書かれています。

エレメントのメンテナンスは、チームにとって重要な作業です。現行のエレメントはハイブリッド形式とし、Polymer modulizerを使用して3.x形式に自動変換することで、 単一のコードベースからPolymerの3つのバージョン(1.x, 2.x, 3.x)をサポートできます。これによりチームの時間を新しいエレメントの開発に割り当てることができます。

つまり私たちが Custom Elements を作るときも同様に、ハイブリッド形式で開発し、3.0へは modulizer を使って変換したコードを用意することでコードベースを1つに保つことができます。

私たちは何を作るのか？

Custom Elements の作成は旧来でいうと jQuery のプラグインや UI ウィジェットを作る作業に似ていると思います。 そこで今回参加したメンバーからは以下のようなアイデアが出ました

  • 郵便番号から住所を検索する入力ボックス
    • これについては gold-zip-input というエレメントがありますが、 An input element that only allows US zip codes なのでそれの日本版になります
  • 天気予報ウィジェット
    • これについても paper-weather というエレメントがありますが、マテリアルデザインでない Yahoo天気予報 みたいな見た目の天気予報が日本っぽいという意見がありました
  • DatePicker
    • あるあるなんですが、なぜかどのプロジェクトでも作ってしまうエレメントがこれですね
  • フォーマット表示
    • 日付／金額など日本でよく使う表示形式に対応したエレメントがあったら良いよね、という意見がありました。これも既存のエレメントにもありますが、より日本の開発者が使い易いスタイルだと良いよねという意見がありました

また Custom Elements は、エレメント名にプレフィックスが必要となります。これについては

  • jp-
  • coedo-
  • edo-

みたいなアイデアが出ているので、実際のエレメントを作る段階で決めたいなと思っています。

How To

ちょっと時間がなくなってしまったので、簡単におさらいしました。

  • GitHubにリポジトリを作る
  • エレメントを作る
  • webcomponents.org に登録する

次回は

2/26(月) の予定です。Doorkeeperのコミュニティページに今年の予定も書いてあるので参考にしてください。

今後は、実際に今回アイデア出ししたエレメントを作っていきたいと思います。 また Custom Elements を作るのに大事な

  • 単体テスト
  • デモページ

の作り方もワークショップ形式で進めていきたいと思うので、ぜひ参加ください。 新しいエレメントのアイデアも募集しています。

さいごに

写真撮り忘れたので、次回からは最初に撮ろう…

あと、コミュニティとイベントの拡散用に connpassのインベントページも作ったのですが、これがconnpassのイベントカレンダーや検索結果に出ないので、解決方法知っている人がいたら教えてください…

MACが熱暴走したときの原因と対応策

Tuesday, January 23, 2018 10:15:00 AM

2017年は、ほとんどアウトプットできなかったので、2018年はBlog書くぞーと思っていたのに、もう23日です。どうも…

さて、皆さんは虹が好きですか？

  • 雨が降っていたけど、晴れて虹が出ていた。キレイだねー
  • ダブルレインボー珍しい
  • ラルクの虹…

とか、まぁ良いイメージあるじゃないですか。 でも マッキントッシュ/Macintosh （通称 Mac）では 虹 は最悪なイメージです。 Windows をお使いの方だと 砂時計 なわけですが、それよりも 虹 になるときは邪悪で、ほぼフリーズに近いです。

またあいつがやってきた

当方は MacBook Pro(13-inch,2017)、機種IDでいうと MacBookPro14,1 を使っています。本記事執筆時点の最新版は MacBookPro14,2 です。

半年ぐらい前か、頻繁にMacがフリーズすることがあって、そのときは Docker for Mac が「応答なし」状況になっていたので、よく「Docker不安定だわー」とつぶやいていました。

そうしたら親切なフォロワーさんが「それ Docker for Mac Edge でしょ。安定板は大丈夫ですよ」と教えてくれたので、ここ最近はフリーズとはおさらばしていたのです。

しかし年が明けて、頻繁にフリーズするようになりました。 仕事にならん…

どうやって死んでいくか

何か操作（特に重いわけでもない）をやっていると、ファンがものすごい勢いで回り始めて、Macは熱くなり、なぜかネットワークインターフェースを使用するプログラム（ブラウザ、Twitterクライアント、Slack、Dockerなど）から「応答なし」になっていきます。次第にマウスポインターはレインボーになり、何も反応しなくなります….

このころ、1日に3回ぐらい、4日間連続ぐらいでフリーズしていたので、イライラMAXになっていました。

オマエか！？

アクティビティモニターを起動したかったのですが、WiFiタブがあるためなのか開けなくて、その状況でどのプロセスが悪さをしているのかわかりませんでした。 そこでずっとアクティビティモニターを起動しっぱなしにして、検証してみることにしました。

何回かのフリーズでは、うまく確認することができなくて「これMacの不良？」と思っていたのですが、ついに原因と思われる挙動を発見しました。

mdworker がCPUを独占している・・・・

そうそしてすぐググりましたよ（残念ながらMacはフリーズしていたので、Androidで）。 「Mac mdworker」みたいなキーワードで検索したところ Macが熱暴走するときの原因と対処法 というサイトが見つかりました。

原因は Spotlight ？

そういえば、よく熱暴走する前に npm install とか git clone/pull 、 composer install 、 docker build とか実行していたなぁと。新しいファイルが見つかると Spotlight がサーチを始めて悪さをするのでしょうか？

とりあえず Spotlight でドライブをサーチしないように Macintosh HD (SSDなのにHDとはコレいかに？みたいなツッコミどころですが…) を対象外に追加します。 私は Spotlight まったく使っていないので気になりません。

と、ここで Finder のサイドバーに Macintosh HD が表示されなかったので Macintosh HD(ハードディスク)をデスクトップ・Finderに表示する方法 macOS Sierra というサイトを参考に追加しました。

どうなったか

それから約1週間、ファンが回りまくることもなくなり、虹も見なくなりました。 作業自体は何も変わっていないので、効果があることは間違いないでしょう。

まぁ今までなんでならなくて、突然新しいMacでなるのかなぁ？ そして、なぜ WiFi に関するプロセスから「応答なし」になっていくのかは不明ですが、CPUとWiFiのチップが近くて熱暴走が伝搬する？とか思い、分解記事を読んでみました。

新型「MacBook Pro 13インチモデル」の分解・修理は極めて難しいことがiFixitの分解レポートで判明 で見ると、WiFiチップの位置は数字の3か4のキーの裏あたりでしょうか？USB-Cに近い位置です。 赤枠になっているCPUにすごい近いわけではないのですが（まぁ遠いわけでもないけど）。

ともかく 虹 が出なくなって、快適に開発を続けております。

最後に、今年はBlog書くよー

PHPカンファレンス関西2017に参加してRoboについて発表してきました

Monday, July 17, 2017 08:10:00 PM

2017/7/15 に行われたPHPカンファレンス関西2017に参加してきました。

昨年に続いて参加

今年は場所がGRAND FRONT OSAKAという、梅田にできたすげービルのカンファレンス会場になっています。これは豪華！ しかもなんか最近どこもホテルが空いてなくて、仕方なく高いホテルへ、こちらもそれなりに豪華….（なんとかならんのか）

今年も上半期はとにかく忙しく、スライドやデモが直前の完成となってしまったため、新幹線の中とホテルでリハーサル。時間はだいぶヤバそう（なんといっても本当は1時間の内容なのだ）だが、どこの説明に時間がかかるかはわかったので、当日の雰囲気からスキップできそうだったら…という気持ちに。今年から使っているプレゼンポインターも不安の1つだ…

夜はスピーカーとスタッフの前夜祭から、コミュニティ前夜祭と合流しての2次会へと流れ、日付が変わった頃ホテルに戻りました。その後、3次会、4次会があったとかないとか…（これ去年のコピペのままですwww）

PHPカンファレンス関西2017

昨年同様3トラック+スポンサーブースで、会場はどこも広かったものの、人気コンテンツに集中するのは仕方がないですね…。それと朝一番の基調講演に参加者が多かったのもびっくりしました（割と東京のカンファレンスとか午後から来る人も多い）。 参加できたセッションは

  • [基調講演] PHPの現場から
  • PHPにおけるDSL
  • Robo を使ったモダンなタスク管理（自分のセッションです）
  • 現代におけるプロダクト開発とPHPを選定するワケ
  • LT

昨年よりPHP成分多めな気がしました（私が見たところだけかもしれないですが…）

印象的だったことを振り返っておきます。

  • 会場がすごい（かっこいい＆おしゃれ）
  • いつもより初心者多め？（最初に質問なかったけど、雰囲気で）
  • 若手が多い（昨年もおもったが）
  • @shin1x1 の基調講演と、 @Potato4d のPHPを選定するワケが、現在のPHPを取り巻く環境についてズバリと攻めていて、すごいと思った

イベントの後は懇親会、二次会、三次会の順に巡りホテルに戻りました（去年のコピペで今年も同じw）。

Roboについて発表しました

なんかPHPの話したの久しぶりな気がします。

最近タイトルで釣らないことに決めているのと、裏のセッションが確実に人気セッションと予測できたのですが、やっぱりその通りとなりました…（気持ち的には残念）。

スライド見ても、お題しか書いてないので、見ても伝わらないと思いますので、トーク用のカンペから抜粋して解説します。

まずタスクランナーとは「タスクを定義し実行することをコンピューターに任せる」ということから自動化と強く関係しているので、最初に自動化やDevOpsの話をしました。 「参加者の中で何か1つでも自動化している人？」という問いに3割ぐらいしかいなかったのは、比較的想定の範囲です。なぜかというと、春先に開催した明日の開発カンファレンスのパネルで同じ質問をして、そのぐらいだったので…

今回は何から自動化するといいよ、という話はしませんでした（時間の余裕がない）が、とにかく静的解析だけでもやるといいですよ。Robo使うと楽になると思います。

で、Jenkinsは2.0からパイプラインでフローを書けるようになったので、実際にJenkinsfileでタスクは自動化できます。ただJenkinsfileは1つのタスクしか流せないし、うまくいかないときローカルで再実行してみようと思っても、そうはいきません。そこでCI環境でもローカルでも動かせるタスクランナーの出番があると思っています。

で、これまではどうしてきたか、というと Phing （セッション中ではファイングと言ってしまいましたが、フィングの方が正しいと思うので修正します）ですね。 でもXMLの定義は学習コストが高いし、仕組みも古いのでカスタムタスク作るのもつらいです。OSSで公開されているタスクとか、標準で用意されているタスクの多さは魅力の一つだとは思いますが。

で、現場ではPHP以外の言語で書かれたツールを使っているケースもあるんじゃないかと思います。特にNode.js系のツールは使われていることが多いかと。 もちろんPHPがバックエンドのAPIだけ（HTMLレンダリングしない）で、フロントエンド全部Node.jsみたいなケースはリポジトリも分かれているし、必要ないかもしれないです（後述のComposer Scriptだけで良い）。ただまだまだサーバサイドレンダリングのWebシステムはたくさんあります。そこで、そういったツールも同じ言語でやれたら良いよね、ということで、ComposerやRoboの出番だと思っています。

Composerは、もうデファクトと言ってもいいPHPのツールで、依存関係を管理するツールです。以下の代表的な特徴があります。

  • コンポーネントをインストールする
  • コンポーネントをソースコードから利用する：オートロード
  • コンポーネントのバイナリーを実行する：スクリプト

Composerのスクリプトは、もちろんカスタムスクリプトをPHPクラスで定義できるのですが、本来は after install などのフックように考えられているので、タスクランナーとしてはちょっと足りません。

そこで、Roboと組み合わせてみましょうということです。

ここからはデモになります。リポジトリの README に詳しい説明が書いてあるので、そちらを見ながらコードを動かしてみてください。

PHPカンファレンス関西2017デモプログラム

裏話

セッションがちょうど30分かかって、質疑応答の時間作れなかったので、もくもくスペースに居るので、質問ある人は聞きに来てください、という Ask for Speaker にしてみたのですが、誰も来ませんでした（実は寂しかった）。 たまたまそのときLT（当日募集）と懇親会LTの内容が書き出されていて、懇親会LTが1枠空いている状況になってました（本編キャンセルで懇親会から1枠移動したため）。

で、それとは関係なく昨年の思い出と、以下の進捗を @tanakahisateru さんに報告していたら、懇親会LTやったら？みたいな話になり、やりました!

スライドは勢いで5分ぐらいで作ったものなので、まぁ良いとして、実際に作ったものが以下になります。

https://github.com/polyester-cms/polyester

これはまだプロトタイプ版で、できも良くないのですが、今後ちゃんとした仕組みでやっていきたいと思っています。

大阪を堪能

最終日は恒例の ねぎ焼き やまもと へ。 今年も東京のPHPerを3人引き連れ、梅田エスト店にやってきました。 そのあと @hamaco とビール飲みに行って、聖地タイガースショップで買い物をして帰京しました。

さいごに

今年もPHPカンファレンス関西楽しかったし、たくさんの刺激をもらいました。ありがとうございました。

CHIRIMEN & IEEE Tokyo Young Professionals hackthon

Monday, July 17, 2017 07:45:00 PM

7/8と7/9に開催された IEEE Tokyo Young Professionals hackthon で CHIRIMEN コミュニティとして協力してきました。

CHIRIMEN コミュニティでは、このような活動に興味のある方の参加をお待ちしております！ チューターの方が事前講習会でやった内容を十分に把握していてくれたので、私たちはほとんど座っているだけでした。

2日間のtwitterまとめ

アイデアソンのやり方や、今の学生がどんなことを考えているかなど知れて、とても楽しかったです（日本酒も美味しかったなーw）

CakeFest2017に参加してきた

Sunday, June 18, 2017 05:10:00 PM

昨年は国内のPHPカンファレンスをすべて廻ることにしたので、2年ぶり。 なんと2年前と同じN.Yで、同じペース大学です。

CakeFest2017最初の驚きは出発直前

ということで、ランサーズがスポンサーになっていました。すごい！ ちょうどCakeFestと同じ日に行われたPHPカンファレンス福岡で、CakePHP3へのアップデート発表していましたね。 最近はCakePHP3のコードリーディング勉強会も開催していて、CakePHPコミュニティの活発さが増しているように思います。

2年ぶり2回目のN.Y

さて、前回は後半に1日休みを取っていたのですが、ちょうど休みの日と、東京に戻る日が雨だったのですが、今年は到着した日こそ寒かったものの、2日目から帰るまで真夏の暑さでした…

N.Yに浮かれたので、ヤンキーススタジアムで野球を見てきました。

カンファレンス初日

初日で印象に残ったこと。

世界情勢を反映したCakeFest

カンファレンス最初のKeyNoteはORMの主開発者でもある José Rodríguez だったのですが、世界情勢を反映しオンラインでの講演となりました。 世界情勢とは入出国に関連することであるそうなのです。昨今の世界情勢を考えるとなるほど、難しいですね。 直接会えないのは残念でしたが、内容はビデオで公開されているので、閲覧可能です。

CakePHPの開発を通じで得たOSSとの関わり方が話されているのですが、チーム開発にも役立つTipsがたくさん含まれていましたので、まだの方はぜひ。 今後のCakeのコードをこういう風に変えていこうかな、みたいな話も含まれています（メソッドチェインにする理由など）。

流行りのキーワード多め

Dockerや、CI/CD、PWAからコンテナ管理まで、技術的には国やコミュニティは関係なく、よく聞く話題が多いです。 初日にLTもあって、どうしようか悩んでエントリーまでしたのですが、先着順のため後2人で時間切れ…（ちなみにPHPカンファンレス関西でも話す予定だったRoboを紹介してみる予定でした）

動画は公開されていないのですが、Mark StoryのLTがすごく興味深くて、どうやってOSS活動に時間をとっているか、という内容で、生き方がカッコイイと思いました（公開されないと思うけど、公開されたらみて欲しい）。

Mixer

MixerはLTで発表されたのですが、Ovenに続く新しいCakeDCの取り組みのようです。OvenはCLI(composer)をほとんど使わずCakePHPアプリの初期状態を構築するのに役立つわけですが、そこにプラグインを追加するためのUIです。 将来はマーケットプレイスの要素も見据えているそうですが、まだ具体的な計画はないようです。 CakeDCとしては何かビジネスの種になれば良いということなのかなーと。

その他で興味深かった話

RealWorld というTodoMVCのCakePHPバックエンドサンプルで、いろいろなフロントエンドとバックエンドのサンプルプログラムが提供されているので、比較評価および他の言語やF/Wでどう書くの？的な学習に適していそうです。リンクをたどると他のバックエンドのコードやフロントエンドもあります。

IDE Helper plugin for CakePHP。PHPStormおよびIntelliJで動くプラグインということで（私は使っていないので試していないのですが、デモを見た感じではかなり良さそうでした）。

初日の最後はソーシャルパーティ

カンファレンス初日の夜は恒例のソーシャルパーティ。2年前と同じBarで行われました。 いつものカンファレンス参加者やコア開発者と話したりする貴重な時間です。 そういえば何も写真撮らなかった！！（2年前は撮っていた）。 いろいろな話をして、その後ピザ食べに行ってホテルに戻りました…（日本のカンファレンスとあまり変わりません）

カンファレンス2日目の様子

2日目で印象に残ったこと。

カンファレンスが始まらない

こう書くと、CakeFestって毎年そんな話してない？と言われるかもしれないですが、参加者は少なくても割と時間通りには始まっていますw。 なぜ始まらないかというと、ペース大学のAV担当者が来ていなくて、プロジェクターの出し方がわからない！ということ。

さて、日本との時差13時間で、ライブ配信を見ていた方は気になってしょうがなかったでしょうね。この時点での遅れはSNSなどで通知もされていなかったし。 運良く、私は @kunit さんのつぶやきを見つけ返信しておきました。 その後、発表順番を変更したり、休憩時間を変更したりと慌ただしくもなんとか始まりました。最終的にはCakeFestのSlackチャンネルで修正されたスケジュールが発表されました。

いよいよ真打登場

さていよいよ Mark Story のセッションです。CakePHP4への展望が語られます。 と、その中でCakePHPのLTSが発表され、これも大きいニュースと思います。 動画が公開されているので、ぜひご覧ください。

その他で興味深かった話

今回 N.Y ということで、様々なオーガナイズをしてくれた地元の @savant のセッション。 CakePHPに関連するインフラがどのようになっているのか。お金がないのでOSSで頑張っているよ、という内容で、みんなが開発する上でも有用な情報が満載です。ぜひ！

恒例の

Real Cake が出ました！！

集合写真

最後にみんなで集合写真を撮りました。 初日にTシャツをもらうのですが、そのときに2日目に集合写真撮るから来てきてね、と受付で伝えられます（ので、みんなちゃんとTシャツを着ている…はずw）

今年は @PhpNut が特に楽しそうで、自撮り写真を公開しましたw

さいごに

CakeFestはライブ配信もだいぶ良くなって、日本で見ていてもそれほどストレスはないようです。動画も公開されるので、後追いは可能です（クオリティもいいです）。 ではなぜ現地に行くのか！ それはコアデベロッパーと直接話して、CakePHPがどのような思いで作られていたり、どんなコアデベロッパーが作っているのかを体感することで、より深く知れたり、CakePHPへの想いが増す、ということに尽きます。 もちろん休憩時間などに、直接 Mark や(今回来てなかったけど) Jose に質問することができるのも CakeFest だけです。 また日本での利用シーンやコミュニティの活動を知ってもらうというのも重要です。

実際に到着した日には、コアデベロッパーの Brian が「近所のビアバーで飲んでいるから」というので参加しましたし、カンファレンス初日はパーティ、2日目の夜もJoseやMarkに誘ってもらい飲みに行きました（飲んでばっかりですね！w）。実は2日目夜は体調を少し崩していて、あんまりビール飲めなかったのですが、楽しい夜でした（私の開発した Toilet Evolutionが大ウケだったので自慢しておきます）。 コアデベロッパーと知り合いになると、CakePHPのコードを修正してPRを出すときも、なんかお互い親近感が湧くじゃないですか！（個人的主観です）

今年は以下の写真(+1名ワークショップだけ出られていた方がいました)のように4名(+1)ということで、最近毎年このぐらい日本からの参加者もいて楽しいです。

そうそう、いつも来年の場所を言ったりするのに、今年なかったねーなんて話をしていたのですが、 Nashville だそうですよ（Larryがスライドに入れるのを忘れてたそうだ）。

みんなで行けると良いですね！

« Prev 18 19 20 21 22 23 24 25 26 Next »

Recent Articles

By Year

Twitter