技術 - HTMLの記事一覧
sheet2gmap - GoogleシートとGoogleマップを簡単に連携
Googleマップではユーザがカスタマイズしてピンを立てたり、情報を付与する機能があります。便利なのですが、使うためにはJavaScript SDKを使いこなさなければなりません。また、データをどこかに保存しておく必要もあります。そのため利用を控えてしまっていないでしょうか。今回紹介するsheet2gmapは世界一簡単...
Perfect Edition - HTMLとePub対応の電子書籍テンプレート
電子書籍といえば標準のフォーマットがePubですが、もっと手軽に読みたい場合にはWebブラウザが使えます。コンテンツさえあれば、その見せ方は様々な形にすることができます。もちろん、読みやすい形式のためにはデザインなども考える必要があるでしょう。そこで使えるのがテンプレートです。今回はWebとePubに最適化されたPer...
HTML DOM - 素のJavaScriptでどうDOMを操作するのか学ぼう
jQueryやVue、Reactなどを触っていると、実際のDOM操作をどう行うのか忘れてしまったりします。DOMを作ったり、追加する、変更するといった操作は意外と面倒ですが、直接行う分、高速であるはずです。HTML DOMはそんなDOM操作を素のJavaScriptで行う方法を学べるWebサイトになります。## HTM...
MVP.css - 素のHTMLでもいい感じの表示に
いきなり大掛かりなサービスを作るのではなく、ミニマムなコンセプトが分かる小さなモデルを作ってみる、それがMVP（Minimum Viable Product）と呼ばれる考え方です。MVPで仮説検証を行い、確信してからサービス開発に入ると失敗が少なくなります。今回紹介するMVP.cssは、WebでMVPを作る時に使えるス...
Universal Résumé Template - 多彩なデバイスに対応したレジュメテンプレート
日本であれば履歴書のフォーマットが一つの形に決まっていますが、多くの国ではそういったものはありません。特定の紙のフォーマットではなく、見やすく自分の経歴や経験を記述するのが肝要になります。今回紹介するUniversal Résumé Templateはとある開発者の履歴書（レジュメ）であり、テンプレートとして再利用でき...
md2html - MarkdownからHTMLファイルを作成するコマンド
MarkdownはHTMLに変換するのが主な機能として作られたドキュメントフォーマットです。多くのMarkdownエディタでHTML変換機能がサポートされていますが、使い慣れたエディタを使いたいという人も多いでしょう。そんな方にお勧めなのがmd2htmlです。CLIで使えるHTML変換ツールです。## md2htmlの...
Simple HTML Invoice Template - シンプルな請求書のテンプレート
Webが苦手なものとしては、帳票があります。定型で体裁の整った帳票を生成するのは難しく、ついPDFなどに頼ってしまいます。かといって日本語で綺麗なPDFを出すのも難しかったりします。今回紹介するSimple HTML Invoice Templateはまさにその名の通り、シンプルな請求書のテンプレートとなっています。#...
Automatic App Landing Page - アプリ用Webサイトテンプレート
個人または企業でアプリを作っている人は多いですが、それらのランディングページはちゃんと作っているでしょうか。アプリを作るのに必死で、Webサイトは適当になってしまっているケースは多いようです。それではダウンロードにも結びつきづらいでしょう。今回紹介するAutomatic App Landing Pageはアプリ用のWe...
unmht - macOSやLinuxで使えるMHTMLビューワー
IEでよく使われていたファイルフォーマットにMHTMLがあります。MIME Encapsulation of Aggregate HTMLの略で、HTMLの中に画像や動画などを一つのファイルとしてまとめてしまう技術です。オフラインで見たり、画像などのアセットが一つのファイルにまとまるのでヘルプファイルなどでよく使われて...
tetris - 遊びすぎに注意。Webブラウザベースのテトリス
Webブラウザ上で動くゲームは危険です。ダウンロードしたり、インストールする手間もなく、すぐに遊べてしまいます。普段ずっと使っているWebブラウザなので、常に立ち上がっており、いつだって遊べてしまうでしょう。今回紹介するtetrisはWebブラウザ上で動くテトリスです。これはとても危険な存在と言えるでしょう。## te...
AreaMap - 日本/世界のカラム地図
情報の表示として、リストを使った一覧が最もよく使われますが、縦長になってしまうのが難点です。横幅がそれほど必要でない場合、タイル表示にするのも一案です。しかしタイル表示の場合、その並べ方に注意しないとどこにあるのか分かりづらくなります。今回紹介するAreaMapはその一案として面白そうなソフトウェアです。日本や世界の各...
Docsy - オープンソースな仕組みを取り入れたドキュメントサイトテンプレート
読みやすい開発者ドキュメントはDevRelにおいて大事な要件になります。コンテンツはもちろんですが、サイトとしても読みやすくできていなければなりません。文字サイズやインデックス、コードの可読性などが要素として考えられます。今回はGoogleがメンテナンスしているDocsyを紹介します。DocsyはHugo向けのテンプレ...
Aafu - 開発者ならポートフォリオを作ろう
転職などの際に個人のポートフォリオがあるかどうかは大きな意味を持ちます。少なくとも私が面接する立場であればGitHubアカウントとそのリポジトリを見るでしょう。対外的にアピールしていない開発者は雇用されづらくなるはずです。そこで自分が何者であるかアピールできるポートフォリオサイトを立ち上げましょう。Aafuはシンプルな...
Animating URLs with Javascript and Emojis - URLで絵文字を使ったアニメーション
絵文字は世界から認知されるコンテンツになっています。年々文字数も増えており、表現できる情報がどんどん増えています。テキストとしてだけでなくスライドで使ったり、アイコン代わりにしているケースもあります。今回紹介するAnimating URLs with Javascript and Emojisはその名前の通り、アニメー...
Fiddly - MarkdownのREADMEを綺麗なHTMLで表示
MarkdownファイルはHTML生成のために使われることが多いです。生成するタグはごく基本的なものになるので、デザインは利用するWebサイト側に任されています。多くはシンプルなデザインであったり、GitHub風になっています。今回紹介するFiddlyはMarkdownからより綺麗でデザインされたHTMLを生成するソフ...
Wedding Website - ウェディングサイトをオープンソースで
あらゆるものがシェアされ、公開されていく流れは防ぐことができません。コピーされ、流用されるのが怖ければ、いっそのこと自分たちで公開（オープンソース化）してしまう方が競争力にもつながるというものです。そんな時代に私たちは生きています。そんな中、見てみたいのがWedding Websiteです。なんと自分たちの結婚式のサイ...
HTML Notepad - 昔懐かしい雰囲気のHTMLエディタ
HTMLを書くとき、どう行っていたでしょうか。最初はメモ帳などでHTMLタグを手打ちして、しばらくするとタグ入力を補助してくれるソフトウェアが出てきました。さらにWYSIWYGでHTMLを書けるソフトウェアが登場し、最近ではまたタグ入力に戻っています。そんな懐かしいタグ入力補助ツール風のソフトウェアがHTML Note...
ai2html - IllustratorファイルをHTML化
Illustratorで作成したデータを他の人と共有したり、再利用する場合には画像やSVGで出力するのが一般的です。多くの場合、さらに加工すると言うことはなく、閲覧したりコンテンツとして埋め込むことでしょう。今回紹介するai2htmlはIllustratorのファイルをHTML化するソフトウェアです。## ai2htm...
PaginateMyTable - テーブルタグをページネーション可能に
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれ...
Sketch2Code - 手書きのスケッチからHTMLデザインを生成
アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。##...