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

技術 - HTMLの記事一覧

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

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

もっと見る

List

  • 2013/12/04

Life - Markdownで定義できるシンプルな年表

時間はどんどん流れていってしまうもので、止めることは誰にもできません。しかし流れていった時を振り返って形にすることはできます。その一つが年表です。自分のこれまでの歩み、歴史的事件、文明など様々な事柄を年表に表してみましょう。データをプロットするのが大変なイメージがありますが、Lifeを使えば簡単です。なぜならデータフォ...

List

  • 2013/12/02

Social Builder – 自分のサイトにマッチしたソーシャルボタンを作ろう

シェアボタンはサービス拡大の要です、気を抜かないようにしましょう。ブログ、メディア、個人サイトを問わずいいねボタンやツイートボタンを設置するのはごく当たり前になっています。そんな中にあっては予め用意されているものを単に貼付けるだけでは目立たなくなっています。多少なりとも工夫をしてみることをお勧めします。今回はサービスの...

List

  • 2013/12/02

Hyro - node製のデスクトップHTML5エディタ

最近はHTMLをオーサリングツールではなくタグを手入力して構築することのが多くなっています。デザインフレームワークも数多く登場し、そういったフレームワークを使う上でも手でタグを打ってしまった方が早いケースもあるでしょう。そこで今回は新参のタグエディター、Hyroを紹介します。2ペイン構成で左側にタグ、右側がリアルタイム...

List

  • 2013/11/21

Instaboard – Mac OSXウィジェットで楽しむInstagram

Mac OSXの一機能ウィジェット。OSXが登場したての頃は色々と出てきましたが、最近はあまり聞かないなと思っていました。電卓やカレンダーは便利で良くチェックするのですが、一般的なアプリケーションに比べるとちょっと弱い…そう思ってしまいます。しかし弱いなりにちょっとした機能を提供するなら素早くアクセスできるウィジェット...

List

  • 2013/11/19

xchema - 素のHTMLタグを活かしたシンプルなデザインフレームワーク

これはこれで使い道がありそう。BootstrapでWebサイトを組む機会が増えているのですが、バージョン3になってから徐々に作法が増えてきたように感じます。機能が増えるということはそれだけ覚えるべきことが増えるということです。そうなるとシンプルに作れるという利点からはちょっと外れてくるかも知れません。そこでほぼ素のタグ...

List

  • 2013/10/21

これからのスマホアプリデザインで重要な指標「DPI love」

DPI loveはHTML/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。iPhoneのRetinaディスプレイ登場以後、PPIやDPIといった単語が随所で行き交うようになり、どういった単位でデザインを行うべきかが分かりづらくなっています。そこで任意のスクリ...

List

  • 2013/10/11

どこでも読める。Web/ePub両方を生成「EPUB3 Sliderizer」

EPUB3 SliderizerはBashスクリプト製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。電子書籍はePubファイルとして生成されますが、その中身はXHTMLで記述した後Zip圧縮されています。なので解凍すればWebブラウザでも読める形式なのです。そこでWebブラウザと...

List

  • 2013/10/07

一つの場面を二つの視点で「Same Times」

Same TimesはRuby/HTML製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。一つの場面において、その視点が異なれば別な世界が見えてくる。そんな感じを味合わせてくれるのがSame Timesです。このような表示です。1つの場面において2つの写真を並べて表示します。これは...

List

  • 2013/08/30

必要な情報に素早くアクセスできるスライドメニュー「Multi-Level Push Menu」

Multi-Level Push MenuはJavaScript製のソフトウェア(ライセンスは独自。利用は自由)です。Webサイトのメニュー表示はいかに深い階層であって素早くアクセスできるかが大事です。そこで今回はMulti-Level Push Menuを紹介します。スマートフォンに似たスムーズなメニュー表示が特徴で...

List

  • 2013/08/13

JSONデータを使ってテーブルを表示「Tabler」

TablerはJavaScript製のオープンソース・ソフトウェア(MIT License)です。HTMLテーブルは様々な場面で使われます。そのため、より使い勝手よくカスタマイズしたり表示をダイナミックに変更したいと言ったニーズが出てきます。そこで今回はJSONからテーブルを表示するTablerを紹介します。基本的な使...

List

  • 2013/08/12

時計をモチーフにした近未来的スクリーンセーバ「clockSaver」

clockSaverはObjective-C/HTML製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。日々の生活の中で時計を目にする機会はとても多いです。それもあってかスクリーンセーバに時刻が表示されるのを使っている方は大勢います。そんな方はclockSaverを試してみましょう...

List

  • 2013/07/05

Webブラウザ上で動作するLinux風WebOS「Notanos」

NotanosはPython/HTML/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。Chrome OSの登場によってにわかに注目が集まっているのがWebOSです。Webブラウザ上で動作するOSは、いつでもどこでも同じ環境を実現できるようになります。普及はま...

List

  • 2013/06/26

はてなブックマークのコメントをリアルタイムウォッチ「ブコメwatcher」

ブコメwatcherはJavaScript/HTML製のオープンソース・ソフトウェア(MIT License)です。リニューアルの度に何らか文句は言われつつも、それでもなお日本最大のソーシャルブックマークサービスであり続けるのがはてなブックマークです。そこで交わされるコメントをリアルタイムにウォッチし、チェックできるの...

List

  • 2013/06/24

データの追記読み込みに対応するテーブル「StreamTable.js」

StreamTable.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくS...

List

  • 2013/06/13

フォームの入力をもっと快適にする「jq-idealforms」

jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームが...

List

  • 2013/06/10

多様な記法からHTML/JavaScript/CSSを生成「Prepros」

PreprosはWindows用のオープンソース・ソフトウェア(MIT License)です。今はHTMLやJavaScript、スタイルシートを素のまま書くのではなく、別な記法を使ってそれぞれファイルを生成するタイプが人気です。しかし更新するたびに生成し直すのは非常に手間です。そこで使ってみたいのがPreprosです...

List

  • 2013/05/28

プログラミングコードをHTML内に埋め込む形に変換「HTMLify」

HTMLifyはJavaScript製のオープンソース・ソフトウェア(MIT License)です。ブログやソフトウェアのプロジェクトページにプログラミングコードを貼付ける際、素のままでは改行やHTMLタグのエスケープ処理が行われずに変な表示になってしまいます。そこで使ってみたいのがHTMLifyです。トップページです...

List

  • 2013/05/25

Web開発者に贈る各種エディタに対応したコーディング入力補完「Emmet」

Emmetは各種テキストエディタ向けにHTMLコーディングを効率化してくれるプラグインを提供します。CSSセレクタを駆使すると隣接や子要素、最初だけなどこだわった要素選択ができます。それに似た文法を使ってHTMLを一気に記述できるツールキットがEmmetです。例えばこんな感じに入力します。TextMate版で試していま...

List

  • 2013/04/17

いつぞやのつぶやきをiPadを使っていつでも閲覧「Twitter Archive Viewer」

Twitter Archive ViewerはTwitterアーカイブを取り込んでiOSアプリとして表示するソフトウェアです。Twitterの自分の過去のツイートを全てダウンロードする機能が日本でも提供されています。HTMLで提供されていますが、それをiPad/iPhoneで見られるようにしたのがTwitter Arc...

List

  • 2013/04/16

美しいWebサイトはDOM構造も奇麗なはず!「DomTree」

DomTreeはWebサイトのDOM構造をツリー化してくれるビジュアル化ソフトウェアです。奇麗なHTMLはソースを見てもやはり奇麗に記述されているものです。さらにDOMの構成において奇麗にできているかどうか可視化してくれるソフトウェアがDomTreeです。Googleです。73エレメントで作られています。MOONGIF...