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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2017/02/21

Citii - 各都市で生活するにはどれくらいお金がかかるのか、が分かるアプリケーション

海外で暮らしてみたいというのは島国の日本ならではの夢かも知れません。海外には海外の良さがありますが、もちろん悪いところもあります。まず現状と同等の生活を送れるのかをチェックしなければなりません。そこで使えるのがCitiiです。各国の生活コストがどれくらいなのか分かるソフトウェアです。## Citiiの使い方例えば東京で...

List

  • 2017/02/13

photo-screen-saver - Electronで作るWindows用スクリーンセーバー

今時スクリーンセーバーは不要という考えがあります。確かに液晶ディスプレイでは焼き付けはほぼ起こりません。しかしプラズマTVでは起こりえます(もちろん対処されているでしょうが)。また、なんとなくスクリーンセーバーは見ていて面白いものです。そんなスクリーンセーバーをHTML標準の技術で作れるのがphoto-screen-s...

List

  • 2017/02/11

mo · js - Web上でモーションアニメーションを実現

Webの表現力は上がったと言われていますが、そのためのテクニックは必要です。SVGやCanvasを使いこなすのは相当難しく、専用のライブラリを使う方が手軽にアニメーションなどが実現できます。今回紹介するmo · jsもその一つで、モーションアニメーションが実装できるライブラリです。## mo · jsの使い方実装例です...

List

  • 2017/02/06

formbase - 見栄えの良いフォームデザイン

Webの表現力はHTML5によって格段に上がりましたが、それもスタイルシートなどを駆使してデザインを行った場合に限ります。標準のままでは貧弱なデザインのままです。標準でももっと見栄えの良いデザインが欲しいのではないでしょうか。そこで使ってみたいのがformbaseです。ごくシンプルな指定で見栄えの良いフォームにデザイン...

List

  • 2017/02/05

Frappe Gantt - マウス操作が便利なガントチャート

個人的にはあまり好きではないのですが、プロジェクト管理において重宝されるのがガントチャートです。各タスクが時系列上に並ぶことで、タスクが重なる期間が分かりやすくなったり、タスクの関連度を可視化することでボトルネックを発見できます。そんなガントチャートを作成できるライブラリがFrappe Ganttです。## Frapp...

List

  • 2017/02/04

json.browse - 開発者ツールを使ったJSONブラウザ

JSONはRESTful APIをはじめとして、最近最も多く使われているフォーマットになっているのではないでしょうか。そのため、開発者はJSONデータを表示、確認するためのツールが必要になっています。今回紹介するjson.browseもその一つですが、特徴的なのはDevToolsも組み合わせて使う点です。## json...

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ベースで動くテトリスです。#...