はてなブックマーク

PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Service Workerについて紹介します。 利用できるWebブラウザについて Can I useによると、モダンなブラウザの中でService Workerが使えないのはIEとOpera miniだけになっています。スマートフォンであれば安心して利用できるようになっています。 使うための基本形 Service WorkerはフロントエンドのJavaScriptとは別プロセスで実行されます。まずWebブラウザ側のJavaScriptにてService Workerを登録します（今回は sw.js としています）。 This file cont

Webブラウザ上でデータを保存しておくための仕組みは幾つか用意されています。 Cookies localStorage/sessionStorage IndexedDB Web SQL 昔から使われているのはCookiesですが、長い文字列を保存するのには向いていません。一般的に4096バイトくらいまでとなっています。localStorageはそれよりも大きいですが、10MBくらいまでになります（localStorageは恒久、sessionStorageはセッション中のみ保存されます）。Web SQLはSQLが使える高度なデータベース機能ですが、実装がSQLiteを前提としていることで、中立性に欠けるという声もあり、開発は停止しています（via HTML5 – Web SQLデータベース）。現在は IndexedDBの利用が推奨されています。 今回は IndexedDB の使い方について

Web authentication API（WebAuthnとも呼ばれます）がついにFirefox 60で対応し、本格的な普及に向けて進み始めました。Google ChromeやEdgeでも次期バージョンから対応が予定されています。残るはSafariですが、こちらは未定となっています。ただ、MacBook Proには指紋認証も付いており、iPhoneでも指紋や顔認証が付いていることを考えると将来的にはWeb authentication API互換で使えるようになることでしょう。 今回はWeb authentication APIの仕組みについて紹介します。 肝は登録と認証 パスワードレス認証を可能にするためには、二つのイベントに対応する必要があります。一つはデバイスの登録で、これはすでにログインした状態で行われる処理です。もう一つは認証で、これはデバイスがユーザに変わって入力を行います

アプリでは当たり前になっているプッシュ通知ですが、Webブラウザ向けにはNotifications APIが用意されています。スマートフォンではまだ実装されていませんが、デスクトップ向けであれば十分使える状態になっています（Notifications APIはPush APIとは別です）。 今回はNotifications APIの実装方法を紹介します。 Notifications APIとPush APIの違い Push APIはサーバからブラウザに対してプッシュ通知を送る仕組みで、Service Workerを利用します。Notifications APIはサーバサイドが不要で使えますが、Webブラウザがそのサイトを表示している時にしか使えません。 許可状態を知る まず大事なのがユーザが通知を受け取ると許可しているかどうかです。それを調べるには Notification.permiss

SVGはドロー系描画機能として今後、ますます高画素化の進むディスプレイに対するリソースの肥大化問題の解決策として注目が集まっていくでしょう。PNGやJPEG画像ではキャンバスサイズが大きくなるにつれてファイルサイズが肥大化しますが、SVGはベクターデータなのでファイルサイズは変わりません。 しかしSVGの魅力は静的な表示を行うだけに限りません。JavaScriptで内容を変えたり、動かしたりできます。今回はそうしたSVGアニメーションを助ける各種ライブラリを紹介します。 flubber 特定の形から別な形へ自然にモーフィングできるライブラリです。一つから一つの場合、一つから複数（またはその逆）とアニメーションが可能です。 veltman/flubber: Tools for smoother shape animations. Shape Shifter 二つのSVGファイルを指定して、ア

Web APIを用いた開発が増えていく中でJSONフォーマットがとても良く用いられるようになっています。XMLほど冗長的ではありませんが、テキストでしかないので構造の確認がしづらいのが難点です。 そうした時に使えるのがJSONビューワーおよびエディタです。今回はデスクトップ、Web、CLIなど各種環境で使えるJSONビューワー/エディタを紹介します。 JSON-Splora JSONファイルを指定して起動します。フィルタリングしたり、折りたたみもできます。Electronで作られているので、マルチプラットフォームで動作するのが利点です。 wellsjo/JSON-Splora: GUI for editing, visualizing, and manipulating JSON jsonsmash CLIツールですが、JSONをファイルシステムに見立てたかのように内容の閲覧できます。ca

外部のWebサイトのスクリーンショットが必要になるケースはよくありますが、その中でもWebサイト全体が撮れるものを紹介します。サムネイルであったり、サイズ指定ができるものは多いですが、高さが不定であるWebサイトをきちんと撮れるものはそう多くないようです。 screenshotlayer API 独自のCSSを追加したり、viewportの設定、撮影したスクリーンショットをFTPやAmaozon S3へアップロードすることも自由に指定できます。画像フォーマットはPNG、JPEGそしてGIFとなっています。 screenshotlayer API | Free, Powerful Screenshot API ApiLeap Google Chromeを使っているという点がユニークなポイントとして挙げています。Chromeであれば、新しい技術にも追従できるのは利点でしょう。Viewportの

ESLintはCLIツールですが、プログラミングエディタと組み合わせることでリアルタイムに問題箇所を指摘してくれるようになります。後でまとめて指摘されるよりも適宜チェックしてくれる方がスムーズに開発できるはずです。 そこで今回は人気のプログラミングエディタ、Visual Studio CodeとESLintを組み合わせた使い方について紹介します。 プラグインについて Visual Studio Codeでは多数のプラグインを提供しています。その中でもESLintで使うのはESLint – Visual Studio Marketplaceになります。これをVisual Studio Codeのプラグインインストーラーからインストールします。 ESLintについて このプラグインはESLintは含まれていません。そのため npm を使ってインストールする必要があります。グローバルにインストー

Webアプリケーションにおいて、ファイルを操作したいというニーズが発生するのは少なくありません。ローカルで扱うようにWebサーバ上にあるファイルを扱えると便利です。 今回はそんな時に使えるライブラリを紹介します。ユーザ体験を向上させるのに使えるでしょう。 File Manager ファイル検索機能、ファイルの新規作成/コピー/移動/削除、GitやSubversionなどのコマンドを実行できます。依存性がなく、単体で動作します。ユーザ管理機能を備えていますので、ユーザ毎のフォルダを作成することもできます。 File Manager jQuery File Browser demo jQueryプラグインとして作られています。フォルダやファイルによってアイコンが違うようになっています。ファイルが実際に存在しなくとも、Web上で仮想的にフォルダ/ファイル表示を行うのに使えます。 jQuery F

Seleniumがこれだけ使われているのはSelenium IDEの存在がとても大きかったと言えます。普通にブラウザを操作するだけでコードが生成でき、それを編集することで様々に値を変更したテストが実現できます。 そんなSelenium IDEは最新版のFirefoxではAPIの互換性がなく、動かなくなっています。そんな中、幾つかのソフトウェアが代替を目指して開発されています。 SideeX (An Extended Version of Selenium IDE) 最も有力と思われる代替ソフトウェアです。Firefoxの他、Google Chromeでも動作します。複数のテストを一つのウィンドウの中でまとめて管理できるようになっています。現在はテストコードの出力機能がないなど、まだ足りない機能も多いですが、開発が活発に行われています。 SideeX (An Extended Version

カンバンと言うとトヨタで実践されてきたワークフローですが、IT業界ではタスク管理を可視化したボードの意味で使われます。特にアジャイルやスクラム開発と組み合わせて使われることが多いようです。 そんなカンバンをWebブラウザ上で再現できるソフトウェアを紹介します。そのまま使うのはもちろん、自社システムへの組み込みも考えられるでしょう。 anydown/kanbandown Markdownで書かれたリストをカンバンに変換して表示します。カンバンの各タスクはドラッグ&ドロップで移動できます。そうするとMarkdown側の内容が変更される仕組みです。つまり相互に関連し合っています。 anydown/kanbandown mikiakira/php-simple-kanban: A web app that was inspired by Trello and cloned only the “Ka

大画面モニタやRatinaディスプレイの普及により、拡大しても画像が劣化しないベクターグラフィックス（SVG）の利用が増えています。そんなSVGをJavaScriptで簡単に利用できるライブラリをまとめて紹介します。 Snap.svg Snap.svg Snap.svgはベクターグラフィックに特化し、アニメーション機能も備え、より高度にグラフィックスを操作できるライブラリです。Snap.svgは最新のブラウザ用に設計されていますのでマスキング、クリッピング、パターン、フルグラデーション、グループ機能など最新のSVGの機能をサポートしています。Snap.svgを導入することで、より自在にSVGを扱えるようになるのではないでしょうか。 Snap.svg jQueryライクな操作 svg.js svg.js svg.jsはjQueryライクに操作できるSVGライブラリです。圧縮時は約53kb程度

HTML5で表現力が豊かになり、APIが多数追加されたとあってもそれを活かすコードを書かなければ従来のWebと何ら変わりません。特にフォーム周りは多数の機能が追加されています。これらを使うこなすことでユーザビリティの高いフォーム機能が実現します。 今回はファイルアップロードに注目して役立つライブラリを紹介します。 JeremyFagis/dropify: Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify ファイルをローカルコンピュータからドラッグ&ドロップしてアップロードできます。画像の場合、サムネイルを表示します。マウスオーバーするとアニメーションがかかったりするのでユーザがファイルをドロップする場所を迷わないで済みます。 JeremyFagis/dropify:

データの一覧表示はWebシステムの基本と言えます。そうした機能を作ると、どんどん要望が上がってくるのが常です。データを並べ替えたい、件数を絞りたい、チェックボックスをつけて一括更新したいなどなどです。そうした要望にすべて応えるのはリソースがいくらあっても足りません。 そこで多機能なグリッドを実現できるライブラリをまとめて紹介します。 ceolter/ag-grid: Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components 高機能なグリッドライブラリです。セルの中に画像を表示したり、レーティング表示もできます。表示項目をチェックボックスを使って絞り込んだり、ソート、カラムの入れ替えもできます。インラインでの編集もサポートされています。カラーテーマをサポートしているので

PDFはビジネスの基本フォーマットになっています。閲覧するだけという方が多いかと思いますが、もっと活用できます。PDFから必要な情報を抜き出したり、システムから出力したりできれば、業務がもっと改善できるはずです。 そこで今回はPDFをWebブラウザ上で扱えるライブラリを紹介します。 paperai/pdfanno: Linguistic Annotation and Visualization Tool for PDF Documents PDFに注釈を入れられます。表示されている文字列を選択して注釈を入れられるようになっています。他にも四角で囲んだり、注釈同士をリンクさせることもできます。 paperai/pdfanno: Linguistic Annotation and Visualization Tool for PDF Documents instructure/pdf-anno

プッシュ通知といえば、スマホアプリ用のものというイメージが強いかもしれませんが、ChromeがWebサイトを閉じていてもプッシュ通知ができる機能をリリースしたりと、Webサイトにも広がってきています。今回は、プッシュ通知サービスを気軽に試して検討できるように、数多くあるプッシュ通知サービスの中から無料で始められるものをまとめました（トライアル期間制限や回数制限があるものも含みます）。 プッシュさん アプリがなくてもwebサイトからプッシュ通知が送れるサービス。Google Chromeの新しいプッシュ通知機能を利用したもので、Chromeのバージョン42以上が対応。Androidに対応しています。シンプルな操作画面でありながら、A/Bテストやセグメンテーション配信、配信予約など高機能なところも注目点です。 pushnate 日時指定や毎日・毎週など希望のタイミングで定期配信ができます。また

電子書籍コンテンツはここ数年で一気に増えています。Eコマースサイトで販売されるものだけでなく、スマートフォンアプリでも提供されています。さらにコンテンツさえ作れば業務システムのヘルプなどで提供するのも良いでしょう。 今回はそんな電子書籍風のUIを実現できるJavaScriptライブラリを紹介します。 Laker compendium 動画を埋め込んだり、タップアクションなどのイベントも使えるので、かなりインタラクティブな電子書籍が作成できます。単なる書籍の置き換えではなく、電子書籍ならではの価値が提供できそうです。 Laker compendium – Designing digital publications in HTML5 Turn.js ページをめくったり、拡大/縮小する機能が備わっています。ページの形もカスタマイズできるので、書籍風以外でも使えるようになっています。 blast

業務システムでは一覧表がよく使われます。多くはテーブルタグを使って実現しますが、使っている内により細かな機能が望まれるようになります。例えば表をソートしたり、インラインで編集するような機能です。 今回はそんなユーザニーズに応えられる高機能な表計算ライブラリを紹介します。 Handsontable Community Edition セルをマージしたり枠の色を変更する、選択行のハイライトなどとても多機能です。ヘッダーや左列の固定もサポートしています。コミュニティエディションはMIT Licenseですが、有償版も用意されています。 handsontable/handsontable: Handsontable Community Edition – a JavaScript/HTML5 Spreadsheet Library for Developers SlickGrid ヘッダーを固定し