サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
blog.htmlhifive.com
WebAssemblyはWebアプリケーションを高速に処理できる技術ですが、幾つかの欠点もありました。その一つがDOMを処理できないこと、さらにFetch APIやWebAudioなどのAPIが使えない点です。 しかし先日Announcing the web-sys crate! | Rust and WebAssemblyがアナウンスされ、WebAssemblyでもDOMや各種APIの利用が可能となっています。 実際にはラッピング? 今回発表されたのはweb-sysというクレート(パッケージ)です。すでにWebAssemblyに対応しているWebブラウザであれば利用可能となっていることから、WebAssemblyエンジン自体のバージョンアップは不要なようです。そのため、DOMやAPI操作はメインスレッド側のJavaScriptで行っているかと思われます。ただし、Fetch APIで使った
Webアプリにおいて、Web APIを使わないことはほぼ皆無でしょう。PWAにおいてももちろん同じようにWeb APIを使って実装されるでしょう。しかし、幾つかのハマりどころがあるので注意が必要です。 キャッシュ時にはヘッダー情報などが使われない キャッシュは以下のようなフォーマットで実装されます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Service WorkerはWebブラウザ側で実行されるJavaScript(メインスレッド)とは別で実行されます。バックグラウンド処理に使うこともできますし、メインスレッドで行うと画面が固まってしまうような重たい処理を実行させることもできます。 そんなService Workerを活用していく中で、処理が肥大化していくならば別ファイルとして切り出していきましょう。その際に使えるのがimportScriptsです。 importScriptsの使い方 例えばメインスレッド側のJavaScriptでは次のように処理を書きます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, ope
PWAは幾つかの技術要素で構成されますが、その基本とも言えるのがService Workerです。Service Workerがなければオフライン対応もアプリとしてのインストール、プッシュ通知もできません。なお、Serv […]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
PWAで一番厄介な問題と言えばキャッシュではないでしょうか。開発中などで、キャッシュを更新したい時にできなかったり、キャッシュを読み込んでしまって修正が反映されずにバグ解決に時間を取られるかも知れません。 そこでちょっとしたTipsを紹介します。 Service Worker登録時の工夫 それは registration.onupdatefound を仕込んでおくということです。このメソッドはService Workerが更新されているかどうかを検知してくれます。もし更新されている場合は、updateメソッドを使って更新できます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, o
PWAは幾つかの技術要素で構成されますが、その基本とも言えるのがService Workerです。Service Workerがなければオフライン対応もアプリとしてのインストール、プッシュ通知もできません。なお、Service WorkerはWebブラウザとは別なプロセスのJavaScriptとして実行されます。 今回はそんなService Workerとフロントエンド側とでメッセージを送受信する方法を紹介します。 WebブラウザからService Workerを呼び出し Service WorkerはWebサイトにアクセス時にインストールされます。次に訪問した際に更新されているかチェックするのですが、1日程度はキャッシュされるようです。そのためキャッシュする内容を逐次変えたいと言った時にハードコーディングされていると不便です。 そこでWebブラウザからメッセージを送る方法を覚えておきまし
Webブラウザにプッシュ通知を送れるPush APIは魅力的な機能ですが、各ブラウザによって実装が異なっていたり、Firebaseでプロジェクトを登録したりするのが手間でした。それを共通化し、さらにプロジェクト登録不要で使えるようにする仕組みがVAPIDになります。 今回はこのVAPIDを使ったPush APIの使い方です。 必要なもの 今回はVAPIDに対応したライブラリ、web-pushを使います。今回はNode.jsのライブラリです。zaru/webpushというRuby向けのライブラリもあります。 初期設定 まずサーバ側で秘密鍵と公開鍵を用意します。これは以下のコードで可能です。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than wha
PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。 今回はそんなPWAの基礎になる、Web App Manifestを作る時に便利なテクニックを紹介します。 Web App Manifestとは? Web App ManifestはWebアプリをスマートフォンアプリのようにインストールできる技術です。アプリストアを経由せずに配布できるのが魅力です。 インストール数を知る どれくらいのPWAアプリが使われているか、それは皆さんが知りたいことだと思います。この時使えるのはGoogleアナリティクスです。例えば、manifest.jsonのstart_urlを次のように指定します。 This file contains bidirec
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
HTML5 APIで追加されつつも、あまり使われている雰囲気がないのがWeb Workerではないでしょうか。使い方はそれほど難しい訳ではないですが、別途JavaScriptファイルを用意したりするのが面倒に感じられるのかも知れません。JavaScriptではできない、並列処理を行うためには必須のAPIです。 そこで手軽に使えるようにインラインのちょっとしたコードをWeb Worker化してみたいと思います。 サンプルのコード 例えば次のようなコードをWeb Worker化します。 e はメインスレッドから渡されるイベントで、 e.data でメッセージを受け取れます。メインスレッドからは onmessage が呼ばれますので、処理を行った上で postMessage で返せばOKです。 This file contains bidirectional Unicode text that
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 を使ってインストールする必要があります。グローバルにインストー
業務システムにおいても絵文字が使われるようになっています。報告書などはとても無理ですが、従業員同士のコミュニケーションにおいて絵文字を使うことで感情を上手に表現できるようになります。 自社システムに絵文字機能を組み込む際には次のようなライブラリを使うと良いでしょう。 EmojiPanel スマートフォンやデスクトップで使える絵文字入力によく似た絵文字ピッカーです。絵文字自体は派手すぎないデザインになっているので、多くの場面で利用できそうです。絵文字自体はアイコンで、肌の色などには対応していないようです。 EmojiPanel mervick/emojionearea: WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery テキストエリア、テキストボックスで使える絵文字ピッカーです。jQueryプラグインで、多くのオプションを提
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 ヘッダーを固定し
次のページ
このページを最初にブックマークしてみませんか?
『hifive開発者ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く