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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2017/02/04

Pepyaka - 任意のテキストを派手な画像で表現

文字をそのまま普通のフォントで表示しても面白みがないですよね。そのために面白みが感じられるユニークなフォントが存在するのですが、それでも同じフォントだけを使っていては飽きが来ます。そこで使ってみたいのがPepyakaです。任意のテキストに対して面白いアニメーションGIFで表示してくれます。## Pepyakaの使い方普...

List

  • 2017/01/30

notella - Firebaseを使ったメモアプリ

ノートアプリの類は多数に存在しますが、それでもなお新しいものが登場するのは理由があります。自分の手に馴染むものは既存のものに存在しないからです。特に開発者であれば、自分で作ってしまえるので、既存のものに感じるちょっとした違和感が嫌なのかも知れません。今回紹介するオープンソース・ソフトウェアはnotella、Webベース...

List

  • 2017/01/25

ToonTalk - 子供向けビジュアルプログラミング学習環境

ここ数年、小学生など低年齢者向けのプログラミング言語学習というのが流行っています。Scratchであったり、Raspberry Piを使って簡単なプログラミングを行うところからがスタートで、将来的にプログラマーになっている可能性があります。そんなプログラミング初学者向けのソフトウェアがToonTalkです。ビジュアルプ...

List

  • 2017/01/24

ColorMe - Webブラウザ上で色の調整

色を生み出すというのは大変なことです。ぴたりと当てはまる色がすぐにできあがれば良いですが、そうそう簡単にできるものではありません。だいたいの色を決め、そこから徐々に絞り込んでいくのが良いのではないでしょうか。そんな色の作成作業をサポートしてくれるのがColorMeです。様々な要素を使ってベースになる色を変化させられます...

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...