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

技術 - HTMLの記事一覧

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

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

もっと見る

List

  • 2015/07/02

AWSKaruta - カルタで楽しくAWSを学ぼう

AWS(Amazon Web Services)のサービスはとても数が多く、かつそれらの機能も多いため、すべてを使いこなしている人は殆どいないのではないでしょうか。そもそも使っていないサービスも多いのではないでしょうか。そんなAWSをよく知るための材料として作られたのがAWSKaruta

List

  • 2015/05/27

Bind – GSS対応のUIデザインツール

Webサイトのデザインを行う際、最近では手でタグを書いてコーディングするケースが増えています。そんな時にはスタイルシートを書いて、ブラウザをリロードして…を繰り返すかと思います。そんな作業をされている方に使ってみて欲しいのがBindです。エディタとプレビューが一体化したWebデザインツールです。## Bindの使い方B...

List

  • 2015/05/20

ai2html – IllustratorのAIファイルをHTML化

Webサイトのデザインをする際にPhotoshopまたはIllustratorを使う人に分かれるかと思います(Fireworks派もいますが)。どちらのツールを使ったとしても、できあがったデザインに対してHTML化をするのは一苦労します。そこでベースをプログラマブルに生成してしまうのはいかがでしょう。そのためのツールが...

List

  • 2015/05/09

samurai-native – HTMLでiOSアプリの画面を作る

React NativeはTitaniumのようにJavaScriptでネイティブアプリのUIを作ります。Cordova/PhoneGapはHTML5/JavaScriptを使ってwebView上にUIを作ります。JavaScriptでスマートフォンアプリを作る技術は様々に存在します。samurai-native

List

  • 2015/03/04

CDK - Twitter製。AsciiDocをHTMLスライドに変換

最近はプレゼンテーションのスライドもHTMLで作ることが増えてきました。余計なエフェクトや装飾を気にせず内容だけに集中できますし、コンテンツを公開すればWebクローラーフレンドリーです。幾つかのツールがありますが、今回はTwitter社の開発したCDK(Courseware Development Kit)を紹介します...

List

  • 2015/01/07

Asciidoctor.js Live Preview - AsciiDocをHTML変換するGoogle Chrome機能拡張

最近はMarkdownに人気が集まっていますが、実際にはそれ以外にもたくさんのドキュメントマークアップが存在します。今回はその一つとしてAsciiDocを取り上げてみたいと思います。AsciiDocは昔から存在しますが、DocBook、

List

  • 2014/12/30

iFrame Resizer – iframeサイズを埋め込まれたコンテンツから変更

HTML5からはFlashのようにobjectタグではなく、iframeを使ってコンテンツを埋め込むのが基本になっています。しかしiframeではコンテンツが非同期かつセキュリティ上、そのコンテンツの大きさが分からないのが難点です。iframeコンテンツの大きさに合わせて自動的にサイズを変更するためには親フレームと子フ...

Missing

  • 2014/11/18

html-inline – HTML/JavaScript/スタイルシート/画像を一つのファイルにラッピング

最近はWebアプリケーション化の流れが活発なので、ちょっとした小さいツールであればHTML/JavaScriptで作ってしまえるでしょう。そういったツールを作るのは簡単ですが、配布が意外と面倒です。HTML/JavaScript/スタイルシート/画像などをZipで固めて配布…というのはあまりかっこうよくありません。そこ...

List

  • 2014/08/24

Open Source Email Templates – オープンソースなHTMLメールテンプレート集

HTMLメールの認知度は十分にあがってきていると思います。かつてのようにセキュリティリスクはなくなってきたのではないでしょうか。ただ、それでもなかなか使われないのは、作成が難しいということがあるかと思います。特にスマートフォンやタブレットを想定したレスポンシブなHTMLメールはまだまだ知見が少ないように思います。そこで...

List

  • 2014/07/27

243 Game - 3の倍数を使った2048クローン

ちょっと前に流行った2048。シンプルなルールだけに多くのクローンを生み出しましたが、未だに開発者にとっては面白いテーマになっているようです。今回はその一つ、243 Gameを紹介します。243は2の倍数ではありません。なんと3の倍数となっています。## 243 Gameの使い方!ゲーム開始です。2048と同じく1のパ...

List

  • 2014/07/23

The Markdown Resume – Markdownをベースにした履歴書

何でもMarkdownで文書を作っていると、他のフォーマットで記述しようと思うと途端に面倒くさくなりますよね。そういう問題は目的に合わせたMarkdownコンバータがあれば全て解決してしまいます。HTMLにするのはもちろんのこと、PDFにするのもMarkdownを使えば簡単です。The Markdown Resumeは...

List

  • 2014/06/13

JSON Lint Pro for Desktop – デスクトップでJSONチェック

JSONを使ってアプリやWebブラウザと通信するケースが増えています。そうなると欲しくなるのがJSONのチェックツールです。プログラムで作っている場合はほぼ問題ないですが、自作JSONの場合はフォーマットが間違っているケースもあります。そこで使ってみたいのがJSON Lint Pro for Desktopです。デスク...

List

  • 2014/05/21

Quill – APIが多彩なWYSIWYGエディタ

Webのテキストエリアの貧弱さには皆が辟易しています。だからこそツールバーを付けたり、中でHTMLが使えるようなWYSIWYGエディタに人気が集まります。しかしそうしたソフトウェアは柔軟性が高くなく、自分好みにならないケースもあるでしょう。そこで紹介したいのがQuillです。リッチなテキストエディタとAPIというのが売...

List

  • 2014/05/07

Markdown Slides - Markdownから多彩なフォーマットに出力できるスライド作成ツール

最近、スライドをMarkdownで書く人が増えています。Markdownにしておくことでスライド形式はもちろん、HTMLで出力して後で公開するのも簡単になります。さらにそれを一歩進めてくれるのがMarkdown Slidesです。Markdown SlidesはMarkdownで記述しますが、その後の変換先が多いのが特...

List

  • 2014/05/03

Nuwk! – node-webkitを使ってMac OSX用アプリをビルド

先日、GitHubの開発したプログラミングエディタAtomが話題になりましたが、あれはnode-webkitを使って作られたWebアプリケーションをラッピングしたソフトウェアになりますあれはChromiumをカスタムでラッピングしたソフトウェアになります。Webベースでもここまでちゃんとした速度で動くということに驚かさ...

List

  • 2014/04/10

Cimba - ユーザ向け画面はないセマンティックなマイクロブログ

ブログはソーシャルメディアにその座を奪われつつも未だに人気があります。色々なブログエンジンが生まれては消えていくのを繰り返しています。最近では小さなコンテンツをアップロードするいわゆるマイクロブログが人気です。そんな中変わり種として紹介したいのがCimbaです。閲覧画面はないブログエンジンになります。## Cimbaの...

List

  • 2014/03/19

2048 4D - 立体的思考が求められる2048クローン

やったね、昼休みだよ!Flappy Birdといい2048といい、最近どんなゲームが流行るのかさっぱり先が読めなくなっています。大事なのはコンセプトが明確で、とてもシンプルだと言うことです。先にあげたどちらのゲームも、2、3回チャレンジすればどうやって遊ぶのかすぐに理解できるでしょう。そしてシンプルということはクローン...

List

  • 2014/03/18

DOMPurify - XSSの防止に。HTMLをクリーンに変換

CGM(コンシューマジェネレートメディア)の大きな問題はユーザの投稿した文字がセキュリティ上問題があるかどうかチェックしなければならないことでしょう。特にHTMLを許容して投稿できる場合です。テキストだけにしてしまえば問題はありませんが、問題のないHTMLコードは扱いたい、そう考える方にお勧めなライブラリがDOMPur...

List

  • 2014/02/10

GugoDoc - 複数ファイルをサポートしたMarkdown to HTMLジェネレータ

最近ドキュメントはMarkdownフォーマットで統一するようにしています。しかしドキュメントが大きくなるとメンテナンスコストが増大してしまいます。そこで分割するのですが、Markdownの基本機能だけではドキュメントを分割した場合にうまく対応できません。そこで使ってみたいのがGugoDocです。複数のMarkdownフ...

List

  • 2014/02/07

Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート

これは知っておいて損はないでしょう!Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBoo...