技術 - HTML5の記事一覧
Gesture Helper - Webブラウザのスワイプ操作、ズームを検知
スマートフォンはこれまでにない操作を生み出しました。例えばスワイプ操作であったり、ズームやパンといった操作もインタラクティブに行われます。デスクトップとの整合性を取るのに苦労することもあるでしょう。そこで使ってみたいのがGesture Helperです。スマートフォンのみならず、デスクトップでもスワイプ操作などを可能に...
RTP.PinchZoom.js - 画像をピンチ操作で拡大
スマートフォンアプリでよく使われるのがピンチ操作です。複数指を使って操作することで、デスクトップではできなかったような操作が可能になります。より直感的で、誰でもすぐに使いこなせるのも利点です。そんなピンチ、ズームと言った操作をWeb上でも使えるようにするのがRTP.PinchZoom.jsです。## RTP.Pinch...
Bejeweled - ビジュエルドをWebで
宝石を3つ並べると消えるBejeweled（ビジュエルド）というゲームは昔から人気です。ルールがとても簡単で、誰でも覚えられるのが人気の秘密でしょう。様々なプラットフォームに対して提供されています。そんなBejeweledをWebブラウザ上で遊べるのがその名もBejeweledです。## Bejeweledの使い方ゲー...
next-editor - WebブラウザベースのGitエディタ
開発者にとって、Gitの存在は欠かせなくなっています。開発に限らず、操作の履歴をとっておきたいと思うことはよくあります。そうした時にGitを使うことで手軽にバックアップを取ったり、GitHubと連携させることもできるようになります。今回紹介するnext-editorはWebブラウザ上で動作するGitブラウザ/エディタで...
Quantum Game - 量子力学を学べるHTML5ゲーム
勉強だって楽しくできる方が良いに決まっています。苦しんでやるような勉強では覚えが悪いのは当然です。なので勉強とゲームは実は相性が良いのではないかと思っています。ゲームで楽しく学べるならば、それが一番のはずです。今回は量子力学を学べるゲーム、Quantum Gameを紹介します。## Quantum Gameの使い方光源...
Annict Mimi - PWAなAnnictコメントビューワー
PWA（Progressive Web App）というキーワードが流行です。特定の技術を指すわけではなく、スマートフォンとWebのあり方のベストプラクティスという位置づけです。そのため若干分かりづらく、理解するためには自分で実際に手を動かすのが良いようです。今回はそんなPWAをAnnicと連携させたAnnict Mim...
woscope - WebGLベースのオシロスコープ
電気などの波形を見るのに使われるのがオシロスコープです。工学系の方であれば誰もが一度は使ったことがあるのではないでしょうか。ツマミを回して写し出される波形の変化を楽しんだことがあるはずです。そんなオシロスコープをWebGLで再現したのがwoscopeです。## woscopeの使い方もちろん電気は流せないので、音楽を使...
rawson.js - JavaScriptでRAWデータを読み込み
デジカメで撮影した写真は基本、JPEGで保存されます。しかし、よりカメラや写真にこだわりがある人は、JPEGの不可逆な変換を嫌い、撮影したデータをそのまま残したいと考えるものです。そのためにRAWデータが存在します。通常、RAWデータをレタッチソフトウェアなどでJPEGに変換しますが、rawson.jsを使えばRAWデ...
Snake - HTML5製のスネークゲーム
HTML5でゲームを提供する環境が増えています。Webブラウザ上で楽しめるゲームであればインストールする必要がないのですぐに遊べます。ダウンロードも軽量な、簡単なゲームが好まれる傾向があります。今回はそんなお手軽ゲームの一つ、Snakeを紹介します。いわゆるスネークゲームです。## Snakeの使い方スマホ向けになって...
DevTools Timeline Viewer - 開発者ツールのパフォーマンス結果を共有/閲覧
Webページを表示するまでには様々な処理が行われています。DOM構築、HTMLのレンダリング、JavaScriptなど様々な処理が行われた結果、一つの画面を表示します。さらにWebアプリケーションであれば、その画面のまま要素が変化します。そうした中でパフォーマンスを測定する機能がGoogle Chromeにありますが、...
jeelizFaceFilter - Webカメラで使える顔認識&トラッキング
Webカメラやスマートフォンのカメラはリアルとデジタルの入り口です。そのため、写し出された映像を加工したり、そこにある情報を解析する類のソフトウェアはとても人気があります。スマートフォンアプリにある、動画チャットしながらリアルタイムに情報を付与する、それと同じことがWeb上でできるのがjeelizFaceFilterで...
PIB - PHPをWebAssembly化してWebブラウザ上で実行
WebAssemblyはCやC++、Rustなどの言語で開発できます（他にもLLVMを生成する言語であれば何でも良いのですが）。つまり元々Cで開発されたソフトウェアはWebAssembly化できる可能性（あくまでも可能性）がある訳です。そんな無謀とも言える可能性を感じさせるのがPIBです。なんとPHPをWebブラウザ上...
Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...
KnzkApp - ハイブリッドアプリのMastodonクライアント
一時期燃えるように注目が集まり、さっと引いてしまったように見えるMastodon。一時的なブームはさておき、ゆっくりと着実な成長をしていけば何の問題もないでしょう。個人的にもまだ使っています。そんなMastodonクライアントとしてKnzkAppを紹介します。Monacaを使ったハイブリッドアプリになります。## Kn...
Maji - ハイブリッドアプリ開発のベストプラクティスを提供
ハイブリッドアプリと言うのはHTML5でUI、ロジックを作成したスマートフォンアプリです。ネイティブとの繋ぎ込みはCordovaなどの技術を使います。かつては遅いと言った問題がありましたが、今はほぼ分からないくらいの速度で実行できます。そんなハイブリッドアプリは画面遷移やUIなどを自分で用意する必要があります。ここが敷...
scrumblr - 自然な移動が可能なカンバン
スクラム開発ではカンバンがよく使われます。イテレーションごとに作業項目をリストアップし、そのステータスを可視化します。そして作業しきれなかったものはバックログに登録され、次のイテレーションに回されます。多くはTrelloのような整然と並んだカンバンですが、今回紹介するscrumblrはよりリアルなものになっています。#...
layerJS - レイヤーを使ったUIコンポーネントフレームワーク
Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパラ...
MediumEditor - Medium風に文字装飾を行う
Markdownを開発者が使うのは問題ないでしょう。今やほぼすべての開発者に対して普及した記法と言えます。しかし、開発者以外の方が使いこなすには、まだ若干問題がある状態です。そこで使ってみたいのがMediumEditorです。Mediumのエディタを模したツールバーです。## MediumEditorの使い方ツールバー...
pico.js - わずか200行の顔認識プログラム
画像の中から抽出される情報として、最も多いのは人の顔ではないでしょうか。セルフィはもちろん、集合写真であったり、友達や家族と撮影した写真には必ず顔が存在します。顔を見つけることで、様々な情報と結びつけられるでしょう。今回紹介するpico.jsは、Webカメラから取り込んで人の顔を認識するコードをわずか200行で実現して...
Text2MindMap - テキストで記述するマインドマップ
マインドマップは思考整理ツールとしてよく使われますが、ビジュアルにこだわりはじめると考えを整理するよりも並びであったり、ノードの見た目にこだわったりしてしまいます。これは思考の邪魔になるでしょう。そこで使ってみたいのがText2MindMapです。テキストで記述してビジュアルで確認できるマインドマップソフトウェアです。...