日経電子版の最近の取り組みをマイクロフロントエンドとPWAに絡めて紹介します。（Developers Summit 2019でお話した内容です）

Why I made https://nedi.app

問題 iOS端末でPWA（プログレッシブウェブアプリ）のスプラッシュ画面が真っ白になり、アイコン、アプリ名などが表示されない。 バージョン iOS 11.3 詳細 manifest.jsonでName、background_color、iconを設定した場合、 Androidの場合は上記を組み合わせたスプラッシュ画面が表示される iOSの場合は真っ白な画面が表示される manifest.json { "name": "Weather PWA", "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144

https://blog.lai.so/entry/2018/09/18/iOS%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E7%9F%A5%E3%82%8B%E3%81%B9%E3%81%8DProgressive_Web_Apps%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B9_%23iOSDC_2018 PWA - Progressive Web Apps はウェブサイトのショートカットをホーム画面に追加するだけの仕組みではありません。 技術・市場の側面からPWAムーブメントの全容を理解し、適切な活用法を知るとともに。 最新ブラウザAPIを使ったプレゼンテーションパターンやJavaScriptとフロントエンドエコシステムをフ

パシフィコ横浜にて8月22日～24日にわたって開催の「CEDEC 2018」。ここでは、8月24日に行われたセッション「モバイルブラウザ上で実現させた『アイドルマスター シャイニーカラーズ』の作り方」の内容をお届けする。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

iOSDC Japan 2018 「iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス」と題しまして、PWAムーブメント以降のWebアプリ開発のお話しをさせていただきます。 10年ビジネスとしてiPhoneアプリ開発を、個人の楽しみとしてウェブ開発とクロスプラットフォームのフレームワーク研究を嗜んできた私が現在関心を持っているのがこの最新のWebアプリ開発手法についてです。 おそらく以下のような内容になるかと存じます 「PWAとは?」でウェブ検索してキャッチできないような技術者的観点からレビューしたPWA論 マーケット、ビジネス的、組織的観点のPWA評はおそらく期待できません。ウェブに情報が溢れているので自身で見てもらった方が良いと思います。 クロスプラットフォームツールとして見たWeb開発 近年最も高速に進化しているGUI開発環境であるWebアプリのフロン

※2018年7月現在の記事です PWA使えばフロントエンドの技術だけでスマホアプリが作れるみたいなので、「これでカメラアプリ作ってみよ！」と思って挑戦したけど結局iOS11.4.1の時点ではそれは無理だったみたいという話です。Safari自体は対応しているみたいだけど、調べるとSeviceWorkerがまだ対応していないとかいうことらしい。失敗しましたって話だけだと寂しいので、作成までの記録をここに記します。 準備 今回はVueを使って作成しました。PWAアプリを作るのがめちゃくちゃ簡単だったからです。パッケージマネージャーはyarnを使いました。 <template> <div id="app"> <video ref="video" id="video" autoplay playsinline ></video> </div> </template> <script> export

ディープリンクとは、アプリの特定の画面に遷移させることのできるリンクのことです。 以前はwebサイト内のページに直接遷移するリンクのことを指していましたが、スマートフォンの普及に伴い近年ではその意味が再定義され、単純にurlからアプリを起動するだけでなく、アプリ内の特定の画面に直接遷移するリンクのことも指すようになりました。 本記事ではディープリンクの利点や各プラットフォームの対応状況をまとめています。 ディープリンクの重要性 モバイルアプリは単機能化が進んでおり、ユーザーは目的に沿ってアプリを切り替えて利用するスタイルをとります。ディープリンクを実装することで、あるアプリから別のアプリへの遷移やwebサイトからアプリへの遷移がよりスムーズになり、アプリ利用者のユーザー体験、アプリ外からのコンバージョン、アプリの再訪率などを高めることができるのです。 プラットフォームのディープリンク対応状

昨日 Twitter でこんな記事を発見しました。 PWA が来るって言っているエンジニアは今すぐ辞めろ 「instagram の PWA が最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、オワコンであった。」 もしかしてこれのことかな？ Instagram PWA is sooooooo impressive. I probably won't be able to distinguish it with its native app. InstagramのPWAが、デキが良すぎて感動してる。ネイティブアプリと見分けられる自信ない。 pic.twitter.com/DS8TfceBZ6 — Eiji Kitamura / えーじ (@agektmr) 2018年1月26日 確かに、この言い方は若干煽り気味のと

Intro 以前、本ブログでも紹介した Foreign Fetch が、仕様から削除される方向で進んでいる。 Foreign Fetch による Micro Service Workers | blog.jxck.io これは、 Safari などが進めている Cookie の double keying が影響しているらしいので、現状についてまとめる。 Foreign Fetch Foreign Fetch は、簡単に言えば 3rd Party Origin の Service Worker が、その Origin に向けた Fetch をハンドルできるようにするという仕様である。 これによって、 Origin 単位での Service Worker の責務が分離できるため、以下のような設計が期待できた。 サブドメインごとに SW の責務を分離でき、更新などのライフライクルを変えられる

🔥 2022年にサイトの作りを変えまして、もう現状はこの記事の限りではありません。もしこちらの記事の実装を参照されるのであれば こちらのブランチ を参照ください。 これで何度目の挑戦でしょうか。記憶する限り、２年ぶり１０度目くらいのブログでございます。会社のパイセンの@ymotongpooさんは１２年もご自身のブログを継続されており、日々コンテンツとその作業に耐えうるだけの筋肉を増やし続けられているのを横目に、私はといえば過去に１年以上続いた書きものは日記も含めて一切なく、ブログはというと思い返してみれば2004年ごろのライブドアブログから始まり、辞めては乗り換え辞めては乗り換えを繰り返してきた挙句、最終的にはJekyllいじったあたりでさっぱり音信不通になったのが２年前。並びに、筋肉事情に関して申し上げると、最後にジムに行ったのも気づけば１年半が経っており、会員権が腐り始めている小太り

マイクロソフト、Progressive Web Apps（PWA）をWindows 10のデスクトップで実行可能に。Windows 10はWindows、Linux、PWA対応のプラットフォームへ マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps（PWA）を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ環境でも実行可能にすることを明らかにした。 Windows 10は当然のことながらWindowsアプリケーションを実行可能なOSですが、Windows Subsystem for Linuxが新たに搭載されてLinuxアプリケーションのサポートも進められています。 そしてマイクロソフトはさらにWindows 10の守備範囲を広げようとしています。次はWeb技術を用いたアプリケーション、「Progre

IMPORTANT: iOS 11.3 final version is now published. Check my updated article on the topic: Progressive Web Apps on iOS are hereAfter the surprise yesterday from a tweet from Ricky Mondello and then the Safari 11.1 beta Release Notes stating that Web App Manifest and Service Workers are implemented which means multi-platform PWAs are now possible, it’s now time to come back to the real world and se

2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod

2017年を振り返る！2017年にあったSEOニュースをフロントエンジニア視点でまとめた、年表です。 2017年になり、SEOとJSの密接性は非常に高まりました。 SEOを実現する為に、フロントエンドで必要となる対応は非常に増えてきました。 2017年SEO情報をを振り返りながら、フロントエンドの関連性を体感しましょう。 まとめている内容としては、Web Rendering Service�, Mobile First index、Progressive Web Apps、Accelerated Mobile Pages、構造化データーの2017年SEOニュース。 そして、2018年の予想です。

[レベル: 上級] 先週投稿したプログレッシブ ウェブ アプリ（以下、PWA）の記事で、「AMPよりもPWAに注目したい」と個人的な思いに触れました。 ところが、PWAとAMPの対立軸を作ったように思わせてしまったかもしれません。 しかし、PWAとAMPは排他的な技術では決してありません。 それどころか、両者を組み合わせることによってさらに優れたモバイルユーザー体験を提供できます。 そこでこの記事では、PWAとAMPを組み合わせる、通称”PWAMP”について解説します。 AMPとPWAを連携する3つのパターン GoogleのAMPチームに所属している Paul Bakaus（ポール・バカウス）氏は、AMPとPWAを組み合わせるパターンとして、次の3つの形態をSmashing Magazineの記事で紹介しています。 AMP as PWA AMP to PWA AMP in PWA それぞれ