メッセージングによるService Workerのコントロール
メッセージングによるService Workerのコントロール Service Workerでハンドルするリソースは、Service Workerのスクリプトに静的に記述しているケースが多い。Service Workerでやっているアレコレをメッセージングで動的にできないか試行錯誤したログ。 よくある?キャッシュパターン チュートリアル等でもよく見かける、Service Workerのインストール時に指定のリソースをキャッシュしているパターン。 const CACHE_KEY = 'cache-key'; const CACHE_LIST = [ 'index.html', 'app.js', 'app.css' ]; self.addEventListener('install', e => { // CACHE_KEYをキーにとるCacheオブジェクトを開いて // CACHE_LIS
技術書典5にサークル参加した
2018.10.08 技術書典5にサークル参加した 技術書典4に参加した時に触発されて、技術書典5は出店しようと決意していたが、宣言通り技術書典5にサークル参加してきた。サークル参加は共同参加と単独参加の2つで挑み、当日まで色々と苦労しながら、また当日も色々と大変だったが、無事に終えることができた。 馬クラッカー（う18） 馬クラッカーは共同参加のサークルで、開発に関するエモい話を集めた Fictions という本を仕上げた。主に @_kaelaela と @morishitter_ が本文を書いて、私は主に進行管理や校正などの編集を担当した。 こちらは開発に関する色んなポエムを集めた Fictions という本です。@_kaelaela と @morishitter_ と書きました（私は主に編集を担当）📖 https://t.co/ckCu9uXBEU — Shogo 🍵【技術書典5
gitbook で Markdown から PDF を生成する
gitbook で Markdown から PDF を生成する 技術書典５ への参加を目指して、執筆環境をセットアップしたのでそのメモ。今回は GitBook を使って Markdown から PDF を生成する。選択肢としては更に高機能な Re:VIEW もあるが、筆が進みやすいようにとりあえず使い慣れている Markdown を選んだ。足りない機能があったり余力があれば、Re:VIEW のセットアップもしてみるつもり。 プロジェクトの作成 プロジェクトのフォルダに移動したあと、gitbook の npm モジュールをプロジェクトローカルにインストールする。インストールすると gitbook コマンドが使えるようになるので、プロジェクトを初期化する。 $ npm init $ npm install --save-dev gitbook-cli $ ./node_modules/.bin
技術書典4の戦利品
技術書典4の戦利品 会社がスポンサーをしていたり、知り合いや同僚が出展していたりと、行く機運が高まったので技術書典4に初参戦してきた。現地に到着する前から入場制限に関するツイートを観測していて、混雑具合が心配な状態で向かったが、案の定凄い人の数だった。 入場を果たすも Web っぽいゾーンの混雑が凄まじかったので、一次退散して友人と鮨を食してお茶を濁した。Web ゾーン以外も知り合いがたくさんいて、スタッフとして参加していたり、サークル出展していたり、はたまた参加者として出くわしたり。イベントとしては、お祭り感も然ることながら、いる人が一同に技術で盛り上がっていることがとても良かった。 改めて Web ゾーンに突撃し、日経電子版のチームが無料で配布していた新聞と以下2冊を購入した。冊子で読む機会は減っているのだが、薄い本ということも手伝ってサクサク読めて、3冊合わせて1時間程度で読了。 #
ES Modulesを優先的にロードするmodulepreload
ES Modulesを優先的にロードするmodulepreload <link> 要素の rel 属性に、新しく modulepreload という値が ES Modules を先行してロードする仕様として追加され、Chrome 64 に実装された。リソースを先行してロードする手段としては既に <link rel="preload"> があり、スクリプトファイルには as="script" を指定すれば良いが、ES Modules をロードするためにはいくつか問題があり、新しく rel="modulepreload" が検討されている。 <link rel="preload" as="script"> ではダメなのか もとい <link rel="modulepreload"> にすべき理由が Preload and Modules に書かれている。 <link> 要素によるリクエストの
lit-html を調べたメモと考えたこと
lit-html を調べたメモと考えたこと PolymerLabs/lit-html という Polymer チームによる実験的プロジェクトがある。JavaScript のテンプレートリテラルを通して、<template> 要素を使いつつテンプレートの機能を実現するライブラリで、API ドキュメントを見たのでそのメモ。 Tagged template literals のおさらい ES2015 の Tagged template literals が前提になるので、機能を振り返っておく。 function tag(strings, ...values) { const str1 = strings[0]; const str2 = strings[1]; const val1 = values[0]; return str1 + val1 + str2; } const foo = '括弧
Web Components を本番投入する（2018年春）
2018.02.16Web Components を本番投入する（2018年春）とあるプロジェクトの技術監修をして、大まかに Web Components + Payment Request API な構成で進めてみたのでその話を思い出しながら書く。ちなみに FRESH! ではないです。 決済基盤をサービスで使うための SDKPayment Request API でお察しの通り、新たな決済基盤のプロジェクトで、それを使うための SDK を読み込んでボタンを配置すれば決済できる…みたいなものを作った。Payment Request API は、対応している環境ではそれで、対応していない環境では旧来の通り決済代行業者が用意しているフォーム付きページへ遷移させるという形でビジネスサイドへ提案した。 技術面に関しても、FRESH! で導入済みだったこともあり、いざとなればサポートできるという意味
Web Components 周辺の仕様とか 2017年秋
2017.09.12 Web Components 周辺の仕様とかブラウザ互換性 2017年秋 二週間後の素振り入ってます、連投ですが悪しからず。Web Components v0 から Web Components v1 へのアップデートに関しては、去年の DevFest Tokyo 2016 で発表した Web Components 2016 & Polymer v2 にまとめてあるが、それを改めて見直している。 HTML Templates HTML Templates は HTML ドキュメントに埋め込まれてもコピーして使うまで非活性であるような、本来的な雛形の機能を実現する <template> 要素の仕様である。 <script type="text/template">...</script> やら <div style="display: none">...</div> や
Gistを簡易スライドにするGistSlideを作った | 1000ch.net
2013/07/05 Gistを簡易スライドにするGistSlideを作った gistslideに影響されて、もうちょっとキレイに作れないかなと思い作成しました。 デザインは@hiloki氏に作って頂きました。ありがとうございます。 GistSlide gistslide / 1000ch 使い方 たぶん意識してないgistでもある程度見れますが、 一応スライドで発表した前提のほうがいいのかな。 GistSlideにいく リンクボタンをブックマークバーにドラッグ&ドロップする Gistを見る 先程ブックマークに登録したリンクをクリックする 左右キーでスライド送りができます 作り方とか スライドのマークアップ構造を相談の元決め、私はgistをあれこれするjsを書いて、 @hilokiさんにはデザインを含めたマークアップをしてもらいました。 あとはChrome Extensionに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
