2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。 進化する Web ～ Progressive Web Apps の実装と応用 ～ from Osamu Monoe この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。 Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事

日米通算1億ダウンロードで日本最大フリマアプリ「メルカリ」。今回はメルカリの小嶋仁司さん、坂本結衣さんにメルカリのフロントエンドエンジニアたちがどんな技術や体制で開発しているのか、HTML5 Experts.jp白石俊平編集長が直撃インタビューしてきました！ メルカリで重要な役割を果たしているWebView 白石：お二人は、メルカリでどんなお仕事をされているんですか？ 小嶋：私は2015年10月に入社して、アプリケーション内のWebViewページの開発を担当してきました。具体的には大規模なトラフィックがある取引画面や、配送サービス「メルカリ便」に新たな運送会社を追加したり、「大型らくらくメルカリ便」の配送機能を拡大したり、集荷サービスなどの開発も行いました。 白石：ビジネス的に重要な部分を作っていらしたんですね。 小嶋：技術としてはいわゆるHTML5、CSS3、JavaScriptを使った

連載： Webの未来を語ろう 2018 (1)HTML5 Experts.jp 副編集長兼エキスパートの吉川です。昨年好評だった「Webの未来を語ろう」企画を2018年もやります！ 今回はパネルディスカッション形式で、HTML5 Experts.jp 編集長の白石が、ブラウザベンダーのGoogleのデベロッパーアドボケイトのえーじさん、 Microsoftのエバンジェリスト物江さんをお迎えして、興味深いお話を多数お聞きしました。 会場も交えたトークは、今後のWeb業界の動向を追いかける上で、重要な内容となっているので、ぜひ読んでみてください！ 2017年のWebで印象に残ったことは？ 白石: まずは簡単な自己紹介と、2017年のWebで印象に残ったことを教えてください。 えーじ: えーじです。Googleでデベロッパーアドボケイトをしています。もともとは、Google Chromeのアドボ

連載： HTML5 Conference 2017特集 (16) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、Googleのえーじさんです。 えーじさんのセッションは「ウェブのための次世代決済法」でした。 スライド資料はこちらで公開されています。 Web Paymentsは（モバイル）Webの決済体験を変える 白石: 本日は、Web Paymentsについてお聞かせください。 Web Paymentsというのは、その名の通りWeb上での支払い体験を改善するものだと思いますが、そもそもなぜWe

連載： HTML5 Conference 2017特集 (15)こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、Googleの山口能迪（やまぐち・よしふみ）さんです。 山口さんのセッションは「AMPで加速するモバイルウェブアプリケーション」でした。 スライド資料はこちらで公開されています。 https://docs.google.com/presentation/d/1ZYyHFRMZnD6bfi6fl9yh9G_TIs3roSxvp-Goa1JZv_c/htmlpresent AMPとは何か？

HTML5 Experts.jp編集部の仲です。 HTML5 Experts.jpも開設から4年5カ月が経ちました。2017年もエキスパートやコントリビューターの皆様のご協力のお陰で、様々な技術トレンドをタイムリーに記事として取り上げることができました。皆様、お楽しみいいただけましたでしょうか？ 今年最後の記事は、恒例の「2017年の年間読まれた記事ランキングTOP20！」をお届けします。このランキングは、記事公開後１週間の閲覧数を元に作成しております。冬休みに気になる記事を読み返してみてはいかがでしょうか。 ＜1位＞ Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた ── 白石 俊平 ＜2位＞ デイリーポータルZの林雄司さんと、ヨッピーさんに聞いた「コンテンツを作る・伝える・稼ぐコツは何ですか？」 ── 馬場 美由紀 ＜3位＞

テレビも車もゲーム機も！組み込みブラウザ開発ってどんな世界か聞いてみた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社ACCESSの梅田雅士さんです。 梅田さんのセッション「TV・車・ゲームに搭載されているブラウザってどうなってるの？」に関するスライド資料は、こちらで公開されています。 組み込みブラウザって…なに？ 白石:では、まずは簡単に自己紹介をお願いできますか？ 梅田:株式会社ACCESS IoT事業本部課長の梅田 雅士です。 も

WebAssemblyの基礎から最新動向まで、@chikoskiに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、WebAssemblyコミュニティを率いてらっしゃる清水 智公さん（@chikoski）です。清水さんのセッションは「WebAssembly MVPまとめと、今の議論の内容からいくつか」でした。 ※スライド資料はこちらで公開されています。 WebAssemblyとは何か？ 白石: 今日はよろしくお願いします。まずは自

Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります

Web Componentsについて気になること、泉水さんに全部聞いてきました！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの泉水翔吾さんです。 ▲株式会社サイバーエージェント 泉水翔吾さん 泉水さんのセッションは「The State of Web Components」（ルームA 16:20-17:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベント

Electron、React Native、Cordova…Web技術でネイティブアプリ開発する方法を、アシアル田中さんに聞いた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、アシアル株式会社 代表取締役社長の田中正裕さんです。 田中さんのセッションは「Web技術でネイティブアプリを開発する話」（ホール 14:20-15:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあって

こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、合同会社 Starlight & Storm 代表社員の長谷川裕一さんです。 ▲合同会社 Starlight & Storm 代表社員 長谷川 裕一さん 長谷川さんのセッションは「Microservices入門」（ルームB 11:20-12:00）です。 （現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめずにキャンセル待ちすることをお勧めします！） マ

Mozilla JapanはなぜWebDINOに？瀧田佐登子さんに聞くMozilla・オープンソースコミュニティ、そしてWebの未来 白石 俊平（HTML5 Experts.jp編集長） 編集長の白石です。 Web技術者であれば一度はその名を耳にしたことがあるであろうMozilla Japanが「WebDINO」と名前を変えた（プレスリリースへのリンク）ことを受け、WebDINOの代表である瀧田 佐登子さんにいろいろと話を伺ってきました。 瀧田さんはWikipediaにも紹介ページがあるように、日本のWebシーンを裏で支え続けていた立役者。90年代の第一次ブラウザ戦争時代にはNetscapeの開発者として活躍し、その後Mozilla Japanを設立して、Mozillaコミュニティを日本に根付かせた方でもあります。 本記事では、WebDINOへの名称変更の裏側のみならず、Netscape時

【懐テク】増井雄一郎さん・古籏一浩さん・あんどうやすしさんと、1990年代・2000年代のWebテクを懐かしんでみた 馬場 美由紀（HTML5 Experts.jp編集部） こんにちは、HTML5 Experts.jp編集部の馬場美由紀です。今回は最新技術ではなく、1990年代と2000年代の懐かしいWebテクノロジーを語り合おうという座談会をやってみました。略して、懐テク。 ゲストの皆さんたちの思い出とともに振り返り、ただただ懐かしもうという企画です。 「懐かしさ」には個人差があるので、「その技術はまだ懐かしむ段階じゃない」という技術も含まれているかもしれません。そこはどうかご笑覧ください！ 豪華なゲストの皆さんはこちら！ “風呂芸人” 増井雄一郎さん 大学時代に起業し、Webサイト制作などを行う傍ら、PukiWikiなどのオープンソース開発にも積極的に参加。2008年に渡米し、iPho

えーじ OpenIDについては先ほど説明したので、次はやはりOAuthですね。 サービスをまたいで情報のやり取りを行いたいというニーズに答えるためには、外部サービスのAPI呼び出しを安全に行える必要があります。また、ユーザーが自分に関する情報をどのサービスに、どこまで公開するかと言ったアクセス権を設定したいというニーズも出てきます。 そこで登場したのがOAuthです。OAuthは、Twitterクライアントを作りたいという人たちの間で急速に普及しましたね。 OAuthはもう一般的なので、今はもうそんなことも意識せずに、みなさん利用していますね。「Facebookでログイン」「Twitterでログイン」と言った機能を持つサイトは、みんなOAuthを利用しています。 白石 そうですね。最初期の頃、TwitterのAPIってBasic認証だったので、みんながTwitterのパスワードを外部のサー

毎週新しい機能をリリースしている、はてな「Mackerel」の開発環境やツールを聞いてきた 馬場 美由紀（HTML5 Experts.jp編集部） はてな「Mackerel」の開発チームに、HTML5 Experts.jp白石俊平編集長が直撃インタビュー！ チーフエンジニア兼「Mackerel」ディレクターの松木雅幸さん、アートディレクターの村田智さん、アプリケーションエンジニアの濱田健さんに、どのような開発環境やツール・体制などを構築しているのか、お話を聞いてきました。 社内のエンジニア向けツールをSaaS事業化 白石：まずは、皆さんの自己紹介からお願いします。 松木：はてなはIDで呼び合う文化なんです。僕は本名の松木を中国語読みにしたSongmu（ソンムー）と呼ばれています。3年前にはてなに入社して、Mackerelのディレクターと東京オフィスのチーフエンジニアを任せてもらってます。

Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。 タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます 記事の内容が古くなってたので、2017年8月11日に更新しました Ionic 2の概要 Ionic2は、アメリカ

今、コミュニティの先駆者たちが考えていること: コミュニティデザイン、ビジネス、テクノロジー──Webの未来を語ろう 2017 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。HTML5 Experts.jp新春企画「Webの未来を語ろう 2017」の第一弾は、コミュニティ編です。 私事になりますが、私自身もhtml5jというWeb技術者コミュニティを2009年から5年に渡って運営していました。 その間、コミュニティ主催者という立場から様々な企業の方と関わらせていただく中で、経済誌やメディアではほとんど話題になることのない「コミュニティ」という存在が、不思議な影響力を人々に、そして経済にまで及ぼしているということを実感してきました。 そして、こちらもまだ大きく話題になることは少ないものの、コミュニティをマーケティングに活用する動きだったり、コミュニティ主

Webアプリケーションにおける機械学習活用の基礎──HTML5 Conference 2016セッションレポート 中井悦司（グーグル株式会社） みなさん、こんにちは。Google Cloud Solutions Architectの中井です。 HTML5 Conference 2016では、「Webアプリケーションにおける機械学習活用の基礎」と題して、機械学習の基礎となる仕組み、そして、機械学習を利用したクライアントアプリケーションの例を紹介させていただきました。今回は、この発表の内容を振り返りたいと思います。 機械学習とディープラーニング、そして、AIの関係 機械学習そのものは古くから利用されている技術であり、過去のデータを元にして、「（まだ見たことのない）未来のデータにもあてはまる一般的なルール」を発見することがその役割となります。つまり、はじめて見るデータに対して、何らかの予測を立て

及川卓也さん、河合良哉さんに聞いた「地方で日本で働く・海外で働くの話」（その１）──HTML5 Conference 2016☆番外編 加藤拓明 HTML5 Conference 2016の展示ブースでは、私DJ KATOによる特別ラジオをお届けしておりました。 すごく面白いので、Increments及川卓也さんとヤマハ河合良哉さんがゲストに来てくれた「地方で日本で働く・海外で働くの話」を完全版テキストで書き起こしてみました。ぜひ、カンファレンスレポートの番外編としてお楽しみください！ まずは、自己紹介をお願いします 「海外にも地方にも行っていないのに、なぜか呼ばれています。Increments株式会社の及川卓也です」 「ヤマハ株式会社の河合良哉です。よろしくお願いします」 「地方にも海外にも行っていないというお話がありましたが、環境が大きく変わったという面で共通点があると考え、広い意味で