ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - HTML5の記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/01/22

FromScratch - 自動保存機能付きのノートアプリ

メモを取る際に大事なのは、思いついたそのままをメモできることです。そのためにはメモを開いて書き込むまでの時間が短ければ短いほど良いです。さらにメモした後に保存したりする手間があってはいけません。今回紹介するFromScratchはそんなメモのためのソフトウェアです。保存は自動的に行われるので保存忘れと言った事態にはなり...

List

  • 2017/01/16

A-Painter - WebVRで空中にイラストを描く

VRは単純にゲーミングデバイスとしての枠を越えて、その中で友人とチャットをしたり、記念写真を撮ったり、さらに一緒にゲームをしたりとソーシャルVRという概念に注目が集まっています。今回はWebVRフレームワークであるA-Frameを使ってWebブラウザの中でお絵かきができるA-Painterを紹介します。## A-Pai...

List

  • 2017/01/15

paste.js - JavaScriptでクリップボードからペーストされたデータを読み取る

HTML5になってクリップボードの内容にもある程度JavaScriptからアクセスできるようになりました。ファイルをアップロードする際にもinput

List

  • 2017/01/12

jquery.diamonds.js - 菱形を並べたデザインをどうぞ

Webでの表現は基本的に四角が重なった形で表現されます。そのため、デザインする際の効率は良いのですが、そこから逸脱したデザインをしようと思うと途端に大変になります。例えば円形や菱形などです。今回紹介するjquery.diamonds.jsはそんなデザインが難しい菱形が連なったデザインを実現できるソフトウェアです。## ...

List

  • 2017/01/11

PPTX2HTML - PowerPointファイルをHTML化

Googleドライブにあるスライド機能はHTMLでありながらPowerPointレベルのスライドを作成できる便利なサービスです。HTMLであればインターネットとの相性もよく、検索もしやすくなります。今手元にPowerPointのファイルがあるならばPPTX2HTMLを使ってHTML5化してみてはいかがでしょう。## P...

List

  • 2017/01/11

Awesomplete - Webにもっと便利な入力補完を

HTML5の新しい機能の一つに入力補完があります。Safariなどは対応していませんが、大量にある候補の中から絞り込みつつ入力できるので便利です。とは言え、日本語では漢字があるので変換したりする手間を考えるとアルファベット向けの機能に感じます。そんな若干使い勝手の悪い入力補完をもっと便利にしてくれるのがAwesompl...

List

  • 2017/01/02

ndm - npmのGUI管理ツール

nodeで開発する際にはパッケージ管理としてnpmが欠かせません。npmはCLIツールなのでターミナルなりを使って操作します。殆どの開発者にとって、それで特に問題ないでしょう。しかしnodeが普及する中で開発者でない方たちもnpmを使うようになっています。そこで使ってみたいのがndmです。## ndmの使い方プロジェク...

List

  • 2016/12/30

swip - 体験必須!複数デバイスを簡単に連携

Googleが作成した、複数のウィンドウを連携させるChromeの実験的デモを見たことがあるでしょうか。複数のウィンドウ間でメッセージを飛ばすことでデータの位置やステータスを同期させていると思われます。そんなデモを複数のスマートフォン、タブレットでできてしまうのがswipです。## swipの使い方swipを使っている...

List

  • 2016/12/28

tdo - キーボード主体のハッカー向けTodo管理

マウス操作は何かと面倒です。一度掴むと離すのが面倒になって、ついついWebブラウジングの時間が長くなったりします。指は常にキーボードのホームポジションから離したくないという人は多いはずです。そんな方にお勧めのTodoリスト、tdoを紹介します。キーボードで操作できる、ハッカー向けTodoリストとのことです。## tdo...

List

  • 2016/12/21

Quick Tetris - Web製ですぐに遊べるテトリス

テトリスは永遠です。誰でもすぐに遊び方が覚えられる上、中毒性があります。遊び手としてもちろん面白いのですが、開発者として見るとどうでしょうか。実際処理としてはもの凄く難しい訳ではなさそうです。作ろうと思ったら作れそうな気がしませんか。そこで参考にしたいのがQuick Tetrisです。Webベースで動くテトリスです。#...

List

  • 2016/12/04

Open API designer - Open API/SwaggerドキュメントをWeb上で作成

Swaggerをベースに現在策定が進められているのがOpen APIです。策定されれば多くのソフトウェアがそのフォーマットに対応することでしょう。そうなればAPIエコノミーがさらに広がっていくはずです。今回紹介するOpen API designerはOpen APIのWebブラウザ上でデザインできるソフトウェアです。#...

None

  • 2016/12/01

Simple-HTML5-Drawing-App - 線種や太さが変えられるWebペイントアプリを作成しよう

HTML5では多くのAPIが追加されていますが、見た目のインパクトがあるものと言えばCanvasではないでしょうか。インパクトだけならWebGLもありますが、使いこなすのは難しいかもしれません。今回はそんなCanvasを使ってペイントアプリを作るチュートリアル&ソースコードを紹介します。## Simple-HTML5-...

List

  • 2016/11/26

Hotdraw.js - JavaのHotdrawをJavaScriptにポーティング

Javaはサーバサイドだけでなく、デスクトップ開発でも利用できます。速度面などに難があって利用は伸びませんが、かつては多くのデスクトップソフトウェアがJavaで作られていました。そんなJavaには多くの先進的試みがありました。JHotDrawというJavaによる2Dドロー技術もその一つで、今回紹介するHotdraw.j...

List

  • 2016/11/26

turbo.js - WebWorkerでGPUを使った計算処理を実現

ブラウザのJavaScriptは一昔前に比べたら大幅に高速化されていますが、それでもシングルスレッドで処理されるという点がネックになります。それを克服するためにはWebWorkerを使った並行処理、GPUを使った計算処理が必要です。それらの技術を使おうと思ったら非常に面倒なイメージがあります。そこで利用するのがturb...

List

  • 2016/11/17

Astray - WebGLを使った迷路ゲーム

Webの表現力が低いと言われたのはとうに昔で、HTML5によってぐっと向上しています。とは言え、簡単にできるかと言われるとそうでもないのですが、それでも多くのライブラリやフレームワークによって実現する方法も増えています。今回はWebGLを使った迷路ゲーム、Astrayを紹介します。単純な2Dに比べて高度な表現が特徴です...

List

  • 2016/11/15

PDFJSAnnotate - WebベースでPDFに注釈

FirefoxではPDFの表示にpdf.jsを採用しています。表示は問題なく、普通に表示できます。さらにJavaScriptベースなので、外部からの操作もこれまでに比べると大幅に楽です。Web標準の技術で実装すると大きな恩恵があります。そんなpdf.jsで表示されたPDFに対して注釈をつけられるのがPDFJSAnnot...

List

  • 2016/11/02

exerslide - React製のHTMLプレゼンテーション作成ツール

HTMLのスライドをよく見かけるようになってきました。派手なアニメーションはなくとも、作成のしやすさであったりデザインのカスタマイズが容易なのが利点です。オンラインでの公開も簡単です。今回はFacebookインキュベーターで生まれたHTMLスライド作成ツールexerslideを紹介します。## exerslideの使い...

List

  • 2016/10/28

Orb - Web上でピボットテーブルを実現

Web上でテーブル/グリッド表示をすると多くの機能が求められるようになります。ソートであったり、一括更新などの機能が有名ですが、業務担当者ではなくマーケティング担当者などが求めるものとしてピボットテーブルがあります。作るのはとても大変ですが、Orbを使えば容易に実現できそうです。## Orbの使い方メイン画面です。!

List

  • 2016/10/23

Textillate.js - CSS3を使って華麗なテキストアニメーションを実現

CSS3になって表現力が広がっています。これまでFlashやJavaScriptを駆使しないとできなかったことが、スタイルシートだけで実現できるようになっています。スタイルシートを使えばGPUを使うのでより滑らかに表現できます。今回はTextillate.js、CSS3を使ってテキストアニメーションソフトウェアを紹介し...

List

  • 2016/10/21

sereny - マテリアルデザインを使ったタイマー

タイマーは意外と多くの場面で役立ちます。それだけにアプリとしても多数存在するのですが、本当に使いやすいものは限られます。ダウンロードして使ってみて何か違うと感じることも少なくありません。今回はマテリアルデザインにインスパイアされたエレガントなカウントダウンタイマー、serenyを紹介します。## serenyの使い方タ...