no_picture

広島フロントエンド勉強会で、カスタムエレメントの話をして、divタグの代わりにはつかえるんじゃないか?というLTをした

広島フロントエンド勉強会 Vol.7でライトニングトークをした。案の定早すぎると言われた。いつものことである。(結構削ったんだけどな) 「すごい広島」でA-FRAME触ってる人がいて、A-FRAMEをみていたらカスタムエレメントをつかってるみたいだったので、調べたついでに思ったことを述べた。 「カスタムエレメントは独自のタグが使える」ぐらいの理解で充分かなっとおもってます。 Angular2にしても、Reactにしても、Riotにしても、Vueにしても独自タグのようなものがでてくるので、独自タグを定義できるという感覚は慣れておいて損はないと思い話を考えました。 本題ですが、カスタムエレメントは要素が定義するまでは未解決の要素となり、正当なエレメントになるらしい。 要素は定義の通りにアップグレードされるまでの間、 未解決の要素 と呼ばれます。これらの HTML 要素は正当な Custom Element 名を持ちますが、まだ登録されていないものです。 https://www.html5rocks.com/ja/tutorials/webcomponents/customelements/ ということは、エレメントを登録しなくてもつかえそうだし、特に中身を実装しなくても、使うことで可読性の高いマークアップができるような気がしました。 というわけで、特に何も実装してないカスタムエレメントでマークアップをすることは、カスタムエレメントの入門としてありなのではないかと思ったわけです。 div だらけでモダンと言えるでしょうか?そして現状では、これが我々のウェブアプリの作り方なのです。悲しいですね。 我々はウェブプラットフォームからの恩恵をもっと受けるべきだとは思いませんか? https://www.html5rocks.com/ja/tutorials/webcomponents/customelements/ カスタムエレメントの誕生の意義からも全く外れていません。 独自タグの要素にCSSも問題なく使えます。定義しておかなくてもバッチリスタイルもあたります。 カスタムエレメントのAPIはv0とv1があるようです。 v1のほうが対応ブラウザが多いですが、v0はPolyFillもありますし、class構文が必要ないので、v0 APIのほうが実質対応ブラウザが多い気がします。class構文無しでもv1 APIは使えるみたいですが、結局未対応ブラウザはAPIが足りなくてつかえなさそうでした。(調べたメモがどっかいったのでソースは省略) あとカスタムエレメントに対して知っておきたいことは、 独自タグの名前にはハイフンを含む必要がある カスタムエレメントを定義する前に利用しても良い まだAPIが変わる可能性がある かなとおもいました。 「独自タグの名前にはハイフンを含む必要がある」というルールをみてA-FRAMEはいい名前をとってるなと感じました。a-で始まるタグはA-FRAMEのタグになるので、完全に一等地ですね。 Z-FRAMEはどんなライブラリがとるのかとても見ものです。 カスタムエレメントをマスターしたら次のステップはShadow DOMなんですかなー。 ためしにかいたコード <my-app> <my-contact> <my-header>連絡帳</my-header> <my-user>hoge@example.com</my-user> </my-contact> <my-inbox> <my-header>受信箱</my-header> <my-mail>2016-01-02 hogehoge</my-mail> <my-mail>2016-01-03 hogehoge</my-mail> </my-inbox> </my-app> body { display: flex; justify-content: center; align-items: center; } my-app { display: block; background-color: #eee; width: 300px; } my-contact {

no_picture

オープンセミナー2017@広島の申し込みが少ないので、興味を持つ人が増えるように内容について個人の見解を述べる

2017年2月25日(土)にオープンセミナー2017@広島があります。 いまいち申し込みが少ないので、テコ入れにすらなるかどうかわからないですが、スタッフの個人の意見を述べることで、オープンセミナー2017@広島がどんなイベントが理解してもらい、参加者を増やすのが目的です。 この記事にかいてあること 広島のITエンジニアが集まって交流するイベントが一つはほしい 今回のオープンセミナー広島の内容の個人的な推測 テーマはいままで参加してくれていない人たちへのアプローチするのが主な目的 懇親会の申込みは20日(月)まで 懇親会LTはありません 広島のITエンジニアが集まって交流するイベントが一つは欲しい 私は、地域ごとに毎年ジャンル問わない大きなITエンジニア向けのイベントがあると良いと思ってます。 その地域にいく機会が欲しいからです。 自分が追っている特定の技術を扱うイベントは県外でもいくことはありますが、地方ではなかなか難しいです。 自分の住む地域より人の少ないところへ行くことは少なく、より人の多い 都会へ出かけていく事が多いと思います。(例外はある) そんな、県外に住むエンジニアが「広島に行ってみよう」と考えたときにちょうどいいイベントがあると嬉しいかなと思うわけです。 こちらも誘いやすいです。 私も山陰や四国に行く機会があれば行きたいとおもいますが、どうせ行くならその地方にいる優秀なエンジニアが集まっているイベントが良いかなっておもいます。 個人的にも、お誘いはそこそこお待ちしています。 正直な話、広島に行くのにちょうどいいイベントがオープンセミナー広島である必要もないわけです。 比較的そういう位置に育てやすいのがオープンセミナー広島という感じです。 ぶっちゃけ、OSC広島は昨年は学生もたくさんいて、むしろOSCのほうがいい線をいってるかもしれません。 私はオープンセミナーのお手伝いを2013年ぐらいからしています。 特定の企業が運営しておらず現場で働くITエンジニアがボランティアで運営するイベントの中では広島で一番大きいと思います。 しかも、突然運営に参加した人がこれまで培ってきた下地を掌握しやすいです。 特に、広島で起業するエンジニアがうまく活用して欲しいと思っています。 今回のテーマについて テーマは「エンジニアがより良い社会を作れる!!」です。 テーマはキャッチーですが、個人的にはセッション内容がピンとこない印象です。 エンジニアが参加して何が得られるのでしょうか? 背景としては、今回の実行委員長である石崎さんがCode for Japanが行っている鯖江市でのコーポレートフェローシップの経験を活かした構成になっています。 「SIとして働いてきたエンジニアがすこし違う世界にいってみたら、目の前に困っている人を助けられる経験ができて日々が楽しく変化したいから共有したい」と、推測しています。(推測です) 参考 鯖江市でのコーポレートフェローシップが始まりました #codeforjapan そこで、実行委員長の石崎さんが鯖江で出会った「利用者に最も近いソフトウェアを提供し、より豊かな社会を実現する」ために活動する福野さんが講師として登場することになったわけです。 福野さんの最近の活躍で私が知ってるものは3月に結果が発表されるRESASのプログラミングコンテストの審査員を務められていますね。(応募締め切りは今週末2月19日なのでまだ間に合いますね) まとめると、石崎さんが出会った、外の世界、身近な世界にあった驚きや、発見を得られるのではないかと思います。(推測です) その他の講師について myThings使ったIoTによる地域課題解決 山本 学 今回どんな話をしてくれるのか僕もよくしりません。 昨年も広島にこられていて、myThings X HMCN#3で講師を務められています。 蛇足ですが、HMCNとうまく連携しようという私の目論見もありましたが、まったく交渉していません。 SIerは企業のシステムを構築することで社会に貢献してきたとおもいます。 近年登場してきた IoTというキーワードは、企業をアシストするのではなくて、エンジニアが直接社会に貢献できるチカラともいえると思っています。 そんなIoTをどのように活用しているのかを聞けるのではないかと思います。 Engineer is Hero !! マイクロサービスの開発手法や IoT を採用し感情や表情を解析しより良い社会を作ろう 寺田 佳央 もはや語るまでもない #てらだよしおがんばれ の寺田さんです。 福山市出身らしいです。蛇足ですが、福山市出身のそーだいさんはエンジニア界でもホットですね。ちなみに、そーだいさんは先週末中国地方を旅されてたので、今回は来られないのではないかと思います。(ってかいておいたら来てくれるかもしれない) 昨年末開催された広島Javaユーザグループのイベントで寺田さんが登壇されましたが、参加者が少なかったので、もっとたくさんの人に効いてもらいたいのと今回のテーマと相性がよさそうということでお招きすることになりました。 技術的な話もしっかり聞けると思います。 子どもプログラミングとドリームマップ 花谷 美香 身近な社会を変化させるという点においては教育はとても重要です。 未来の社会を担うのは子どもたちです。 子どもたちが、プログラミングの価値を理解する機会が増えています。 プログラミングが得意な人たちは、プログラミングに無限の可能性を感じるはどんな人たちに映るでしょうか?

no_picture

Firebase Hostingの紹介をした - WEB TOUCH MEETING #96

WEB TOUCH MEETING #96でFirebaseの紹介をしました。対象者としては、「レンタルサーバを借りたことがあって、独自ドメインの設定をしたことがある」ぐらいに設定してお話をしました。 Firebaseを試した時に感じたのは、「Googleが用意したWebアプリケーションを作る手軽な場所」でした。 今まではその役割をGoogle App Engineが持っていたようにおもいます。 しかし、次世代のGoogle App Engineとなる Flexible Environmentは無料では始められないようになっています。 この部分にFirebaseが登場したから役目を終えたのではないかと感じました。 次に、気になったのはが独自ドメインのTLS/SSLが無料だったことです。 独自ドメインでなければHTTPSがつかえるサービスは確実に増えていて、困ること減っているとおもいます。 また、VPSなどあれば無料で証明書は発行して、HTTPSに対応できるようになってきましたが、ブログサービスなどの活用をしようとした場合、なかなか無料で独自ドメイン使えるものはありませんでした。 そうしているうちに状況は変化してきて、 2017年1月からGoogle ChormeがHTTPのサイトは警告を出すようになるそうです。 HTTPSでないサイトではiOSの一部の機能が使えないそうです。 先日Jimdoが独自ドメインのHTTPSの対応を発表したりなどありました。 HTTPS everywhereを現実に迎える直前で、良いタイミングだと思ってFirebase Hostingを紹介しました。 アプリケーションに満たないちょっとしたWebサイトを公開する際の一つ 他の話はおまけ程度のつもりで以下の話もしました。 FTPは使えなくてコマンドを使う必要があるよ でも簡単に前の状態に戻せるよ Firebase Hostingにドメインを割り当てると、サブドメインを別のFirebaseプロジェクトに割当ができないよ Firebaseの他の機能を使うとこんなことができるよ FTPでファイルを手動でアップロードしてる人たちの考え方が変わると良いなと少し思いました。 デモサイトの話 https://eiel.info/をリニューアルついでにデモとして使いました。 サインインをすると挨拶ができるという機能が実装されています。 リアルタイムに反映されるのをみていただきました。 ソースコードは以下に公開しています。 eiel/eiel.info Tag wtm96 React.js + material-ui を利用もしていますが、その話は一切しませんでした。 最近はウェブサイト作る必要がある際にmaterial-uiを試しています。 Firebaseに関するコードだけ抜粋します。 JavaScriptですがBabelを利用して、ES2017が使える状態にしてあります。 firebaseの利用準備 import firebase from 'firebase/app' import {} from 'firebase/auth' import {} from 'firebase/database' const config = { apiKey: "xxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxx", databaseURL:

no_picture

広島から岡山への距離 - 大都会岡山 Advent Calendar 2016

大都会岡山 Advent Calendar 2016の4日目の記事です。 書くことがないのに枠が余ってたので滑り込みました。 昨日は、razonさんの大都会が誇る「ゴールデンハンマー」というエナジードリンクについて - SHI-Zoneでした。ゴールデンハンマーとやら味わってみたいものです。 さて、書くことがないのに筆をとることにしました。 もしかすると中国地方に来たことがない方がいるかもしれないので、広島と岡山の距離感の話でもすればいい気がしてきました。 私は岡山に年に2,3回行くことがあります。 岡山に行く目的はだいたい交流目的です。 ITエンジニアとして人生を生きているため、他県のエンジニアと仲良くなることは、自分にない視点からの考えを得ることができとても参考になります。 地方だと都会にくらべて、いろんな考え方が入って来にくいと思います。 のんびりできて良いことでもあります。 岡山へ行こう 僕が広島から岡山へ行く手段は3つあります。 電車 - 片道 170分 3020円 新幹線 - 片道 40分 5500円 高速バス - 片道 150分 2900円 大体の場合が新幹線で節約したいときは高速バスで、倉敷に行くときは各駅電車なことが多いです。 ただし、高速バスは予約が必要だったり、本数もすくないので、最近は各駅の電車を選ぶこともあります。 正直、電話してまで予約したいレベルで電話が嫌いです。 新幹線を使うと3倍上早くつくのに、値段は2倍未満なのでとてもお買い得です。 旅客鉄道株式会社旅客運賃減額「第1種」が使えるとその優位性は少しおちてしまいます。 電車 - 片道 170分 1510円 新幹線 - 片道 40分 3990円 高速バス - 片道 150分 1450円 それでもやはり新幹線がお買い得でしょう。 広島と岡山の距離 広島と岡山の距離はJRで160kmあるそうです。 ちなみに、大阪から京都は40km、横浜から東京は39km程度です。 広島から大阪の間が340km程度なので、半分よりは近いため、広島に遊びにいくぐらいなら大阪方面にいくほうがよさそうな気がしてしまいます。 見方をかえれば、広島の人が関西の人と交流するのであればとてもちょうどいい場所にあります。 そういえば、広島と岡山の人が交流する目的で広島・岡山Ruby交流会01などが開催されました。 四国との位置関係も相まって、交流という観点では、人が集まりやすい地域です。 岡山で会おう 結局、何が言いたいかというと、せっかく岡山にいく予定があるので、関西や四国、山陰の人はぜひ岡山で会いたいなって思ってます。 県外ゲスト枠でセッション申し込んでしまったけど、まだ未定です。 あ、広島の人も岡山であってみたいですね。 まとめ 広島は良いところですが、広島まで来いとはいいません。 岡山もいいところです。 他県の人にも来るようにアピールしたので、広島の人も岡山にいってみてはどうでしょうか。 あんまりまとまらなかった。 明日はarisonjpさんです。もう、ギガフロート玉野しか書けないらしいです。

no_picture

とある広島のスタンプラリー - たまに広島Advent Calendar 2016

たまに広島 Advent Calendar 2016の1日目の記事です。 このAdovent Calendarは広島のことを書くようですが、「たまに」書いてあればいいらしいです。 他の人の記事のいずれかに広島のことが書いてあればいいんでしょうか。 広島の人は赤いものが好きなようで、最近よく赤いものを見かける事が増えました。 唐辛子をつかったつけ汁でいただくつけ麺。 唐辛子と山椒をつかったタレでいただく汁なし担々麺。 調子にのって辛くしすぎてお腹を痛めることもあります。 お腹を壊してしまうことを考慮すると、広島の食べ物を本格的に極めるためには、広島に住んでおく必要があるでしょう。 だって、旅先でお腹の調子が悪くなるのは嫌ですからね。 我馬のスタンプラリーを制覇しました 広島には我馬というラーメン屋があります。 広島にしかないラーメン屋の一つです。 食べられるのは「博多ラーメン」です。 広島ラーメンではありません。 傍目からみて、広島に観光に来た際に立ち寄るようなところではないように見えます。 そんな我馬ですが、昨日までスタンプラリーが行われていました。 我馬は9店舗あり、2ヶ月間ですべての店舗をまわるとホノルル往復航空券が当たるというイベントです。 1週間に一つの店舗を回らなければならないので、達成するにはなかなかハードルの高いイベントですね。 そんな、「博多ラーメン」のお店を毎週のようにわざわざ違う店舗に出向く価値があるのでしょうか? 限定麺のスタンプラリー 実は、スタンプラリーの期間中、各店舗でそれぞれ別のラーメンを食べることができます。 限定ラーメンです。 限定ラーメンは過去に提供されてきたものです。 我馬では四季のラーメンと称して、年に4回程度、限定ラーメンが提供されてきました。 限定ラーメンでは四季のラーメン以外にもあるので注意してください。 過去の限定ラーメンの一覧をみてみると38種類もあるようです。 - 歴代 限定絵ラーメン 我馬 私は第10弾の博多ごぼ天 バイ煎つけ麺あたりから存じております。 第11弾 「新派 とろ馬」は衝撃的で、ラーメンという領域を超えていたと思います。 となりにパンがあることから想像できるでしょうか? これらの限定麺はとても完成度が高いです。 そもそも手札としてある「博多ラーメン」という看板ラーメンで行列を作れているラーメン屋が、既存のアレンジで攻めてくるわけではないというのがポイントが高いです。 本来はポイントが下がりかねないですが、おかげで値段がお高くなっています。 そう、このスタンプラリーは過去の限定麺が2ヶ月だけ復活するお祭りなのです。 スタンプラリーの思い出 得にないです。 おいしかったです。 せっかくなので限定麺ふりかえる 個人的には冬の限定麺に好きなものが多い気がします。 冬は味噌ベースのラーメンが多いです。 第20弾 ベジミソ麺や第25弾 みそ菜麺はかなりハマりました。 事前に復活するラーメンのアンケートがありましたが、優勝したのは第31弾 香るウマ辛 芳辛 みそラーメンでした。 今年の冬が楽しみです。 夏はつけ麺が登場することが多いです。 カリーつけ麺は私のまわりでは傑作だと評判です。 太めの麺も毎回試行錯誤されているのではないかと思われます。 そういえば、春系のラーメンはありますが、秋っぽいラーメンってあまりないですね。 いつか松茸ラーメンとかでてくるのでしょうか? 難しそうです。 まとめてきなもの 広島には赤い名物が多いです。 我馬は「赤うま」というのが定番ラーメンです。 やっぱり赤かったです。 ぜひ一度お越しください。 たまに広島