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

技術 - HTMLの記事一覧

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

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

もっと見る

List

  • 2012/12/12

既存のHTMLをMarkdownに変換「reMarked.js」

reMarked.jsはHTMLコンテンツをMarkdown記法に変換するJavaScriptライブラリです。ライトなマークアップ言語として広く使われるようになっているのがMarkdownです。とは言え新規ドキュメントはよくとも既存のドキュメントの変換は面倒で、利用を控えてしまっているかも知れません。そこで使ってみたい...

List

  • 2012/10/28

あのサイトのレスポンシブWebデザイン対応具合をチェック「Responsivator」

Responsivatorは任意のWebサイトにおけるレスポンシブWebデザインをチェックできるソフトウェアです。レスポンシブWebデザインは何もスマートフォン/タブレット/デスクトップの3種類に対応していれば良いという訳ではありません。そこで使ってみて欲しいのがResponsivatorです。各種ウィンドウサイズに対...

43773?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f10%2fscreenshot-2012-10-15-12.07.46_thumb

  • 2012/10/26

テキストベースのシンプルなプロジェクト管理「Projector」

Projectorはテキストファイルベース、HTMLファイルの存在有無でタスクのステータスを管理するプロジェクト管理です。プロジェクト管理の肝はタスク管理にあります。タスクのステータスさえ適切に管理できれば問題はないとさえ言えます。プライオリティの優先度によって3つのタブに分かれて表示されています。クリックで指定された...

42903?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f09%2fscreenshot-2012-09-18-10.26.17_thumb

  • 2012/09/26

これがHTML?と言いたくなるようなPDF変換ソフトウェア「pdf2htmlEX」

pdf2htmlEXはレイアウトの再現性を極めたPDFからHTMLへの変換ソフトウェアです。PDFはそのままでは容易に編集できないフォーマットです。そこが利点でもあり欠点でもあります。PDFを別フォーマットに変換するソフトウェアは幾つかありますが、今回は驚いてしまうくらい品質高いHTML変換を行うpdf2htmlEXを...

List

  • 2012/09/06

ランディングページに使おう。Bootstrapベースのテンプレート集「Bootstrap Landing Page Templates」

Bootstrap Landing Page TemplatesはBootstrapを使ったランディングページ用テンプレート集です。Twitterの開発するBootstrapの人気が高まっています。個人はもちろん、企業においても手早くUIをまとめるのに使っている所が増えています。そこでさらに利用を広めるべくランディング...

41063?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-23-11.39.16_thumb

  • 2012/07/31

Google Doodlesから生まれたチューチングマシン「Googleチューリングマシン」

GoogleチューリングマシンはGoogle Doodlesの中で提供されたチューリングマシン風ゲームです。Googleロゴは日々の記念日に合わせて色々と変わっています。昔は画像でしたが、最近ではより凝るようになってゲームが興じれるようになっていたりします。今回紹介するGoogleチューリングマシンもそうで、コンピュー...

41049?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-19-13.41.48_thumb

  • 2012/07/31

Google I/O 2012用Webスライドテンプレート「I/O 2012 Slides」

I/O 2012 SlidesはGoogle I/O 2012にあわせて作られたスライドテンプレートです。Androidの新バージョンやNexus 7、Googleグラス、Google Compute Engineなど今年も様々な発表があったGoogle I/O 2012ですが、その中で使われたスライドのテンプレートが...

List

  • 2012/06/28

HTMLメールを簡単に作成する「Premailer」

PremailerはWebサイトのURLからHTMLメールを生成するソフトウェアです。日本では普及はまだ今ひとつですが、海外ではHTMLメールが当たり前になっています。ビジュアル的にも映えるのでレスポンス率も高いようです。そんなHTMLメールを手軽に作成できるのがPremailerです。作成画面です。取り込むWebサイ...

39203?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot-2012-05-28-14.12.48_thumb

  • 2012/06/07

1行のコードで既存のテーブルにソート機能を追加「Table Sorting」

Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。デ...

38532?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot-2012-05-07-16.46.17_thumb

  • 2012/05/17

テストやモックアップに。ダミーのHTMLソースを生成する「Fixie」

Fixieは自動的にWebコンテンツを生成するモックアップアプリ用ライブラリです。Webデザインをしていたり、デザインやライブラリのデモサイトを作る際に必要になるのがダミーのコンテンツです。適当な文字でも良いですが、より本物らしいコンテンツを使ってみたいならばFixieを利用してみましょう。それっぽいコンテンツが表示さ...

List

  • 2012/05/15

Adobe製。Webデザイナー向けのコードエディター「Brackets」

BracketsはHTML/JavaScript/CSSで作られたHTML/JavaScript/CSSエディターです。Webベースのエディターソフトウェアは幾つか登場していますが、Adobe社が開発したのがBracketsです。BracketsはHTML/JavaScript/CSSを使っていますが、ネイティブのアプ...

List

  • 2012/01/27

HTML/JavaScriptだけで再現されたRadiooooクローン「nise-radioooo」

nise-radiooooは音楽をTwitterでリクエストしてYouTube動画を再生する、Radiooooクローンのソフトウェアです。あなたがDJ、みんながリスナー。そんなコンセプトが魅力だったサービスがRadiooooです。現在は開発されていないようですが、類似のサービスを実現するソフトウェアとしてnise-ra...

34553?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f01%2fscreenshot-2012-01-16-10.53.19_thumb

  • 2012/01/24

みんなではむへいを育てよう。Grow!を使った例としても見たい「みんなのはむへい牧場」

みんなのはむへい牧場はHTML+CSS3で作られたリアルと繋がったソーシャルゲームです。ソーシャルチッププラットフォームであるGrow!を使ってはむへいを育てる、それがみんなのはむへい牧場です。はむへいです。Grow!の力で成長するペットです。こんな感じでGrow経由でポイントを送れます。はむへいは動いていますが、Ja...

33404?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f12%2fscreenshot2011-12-15-15.21.54_thumb

  • 2011/12/27

エンタープライズ向けGitのWebフロントエンド「KoshiNuke」

KoshiNukeはGitを企業内で用いる際に使えるアプリケーションライフサイクルマネジメントシステムのモックアップです。Gitが徐々に企業でも利用されるようになっている中、Gitをベースにしたアプリケーションライフサイクルマネジメントが求められるようになっています。そこでモックアップとして紹介したいのがKoshiNu...

31883?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-13-9.28.30_thumb

  • 2011/11/21

日々のアクセス解析に。Mac OSXウィジェットのGoogle Analyticsフロントエンド「GAget」

GAgethaはMac OSXウィジェットのGoogle Analyticsフロントエンドです。Webサイトのアクセス解析にGoogle Analyticsを入れているサイトは多いと思いますが、そのデータを日々チェックするのは面倒です。そこで手軽にチェックできるようにするGAgetを使ってみましょう。Mac OSXウィ...

31453?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-01-10.15.20_thumb

  • 2011/11/10

Smartyの記法が使えるJavaScriptのテンプレートエンジン「jSmart」

jSmartはSmartyの記法を取り込んだJavaScriptのHTMLレンダリングエンジンです。Webアプリケーションが増えていくにつれてニーズが上がっているのがJavaScriptのHTMLレンダリングエンジンです。今回紹介するjSmartはSmartyにインスパイアされた、有力なテンプレートエンジンになります。...

31255?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fscreenshot2011-10-28-9.50.08_thumb

  • 2011/11/06

CoffeeScriptがWebの世界を制する?HTML/CSS/JavaScript生成「coffee-world」

coffee-worldはディレクトリを監視してCoffeeScriptからHTML/CSS/JavaScriptを生成するソフトウェアです。最近、JavaScriptを素のままで書くことが減ってきています。CoffeeScriptから変換した方がコーディング量も少なく、かつ可読性の高いコードが書けるようになってきまし...

30899?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f10%2fscreenshot2011-10-19-16.28.55_thumb

  • 2011/10/30

GitHubに載せるHTMLファイルをコードから生成「Paige」

PaigeはコードやREADMEからGitHub向けの静的なHTMLファイルを生成するソフトウェアです。インストールは簡単で「npm install paige」のみです。実行は「paige path/to/config」になります。実際にPaigeを使って作られたインデックスページです。元になっているのはREADME...

29004?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-22-10.00.35_thumb

  • 2011/09/01

これがあればWebアプリケーションのデザインがすいすいできる「Bootstrap」

Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす...

28791?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f08%2fscreenshot2011-08-08-9.53.06_thumb

  • 2011/08/24

開発ドキュメントや利用規約の多言語版管理に「春雨」

春雨は複数言語を一つのHTMLドキュメント内に記述し、コマンドで各言語HTMLに展開するソフトウェア。春雨はPerl製のオープンソース・ソフトウェア。Webサイトを多言語展開する際には、国際化処理を行うのが基本だ。GetTextのようなライブラリを用いて行われるが、その際には実際の画面とローカライズされる文言とか別で管...