WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
ブラウザ上で使えるJavaScript製テキストエディタAce入門 - Qiita
Aceとは ブラウザ上で使えるJavaScript製のテキストエディタです。貧弱なテキストエリアの代替として使うと便利です。特徴として、 100言語以上のシンタックスハイライト Sublime風、Chrome DevTools風など、自由に選べる多数のテーマ マルチカーソル リアルタイム構文チェック などなど、スタンドアロンのエディタと比べても決して引けをとらない高機能なエディタです。 公式サイト 詳しい使い方を知りたいならばAPI Referenceから。 サンプルサイト 各種パラメータの効果を見た目で確認することが出来ます。 インストール 今回のサンプルでは全てCDNを使用しますので何もインストールする必要はありません。 ダウンロードして使いたい場合は https://github.com/ajaxorg/ace-builds/ ←こちらから。 最小のサンプル <!DOCTYPE ht
JavaのHTMLパーサー色々 - ドナドナごとごと
Java HTML あるページの画像とリンクのURLをすべて取得するサンプルを書いてみる。 大体一緒だから他のサンプルも後で書くか… jsoup Java HTML Parser, with best of DOM, CSS, and jquery import java.io.IOException; import java.net.MalformedURLException; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; public class SampleJsoup { public static void main(String[] args) { String url = "ゆーあ
jericho HTML Parserを使う。 - Cults !!
jericho HTML Parser http://jericho.htmlparser.net/docs/index.html DownLoad http://sourceforge.net/projects/jerichohtml/files/ JavaDoc http://jericho.htmlparser.net/docs/javadoc/index.html 何といってもjerichoの魅力は不完全な汚いHTMLでも取り出すことが容易な所が好き。 DOMを理解しているなら、基本的にタグから欲しいデータを抽出するので直感的な操作性が魅力的。 もちろんXMLも解析できる。 JavaDocに使いかたは載っているけど、軽く説明。 サンプルソース //Sourceオブジェクト生成時にアドレス、InputStream等を渡す。 Source html = new Source("http
90年代ホームページの作り方
あの頃はホームページを作っているだけで楽しかった。誰も見ていなくてもプログラミングっぽいことをやっているのが嬉しかった。 そんな純粋な気持ちを取り戻すために今回は90年代のホームページの作り方をおさらいしておこうと思います。ゆっくりしていってね！ ▲まず、ウィンドウズに入っている「メモ帳」を開いてこう書きましょう。そして「index.html」という名前で保存して下さい。 ▲次にこう書きましょう。こう書くことでホームページの画像が盗まれなくなります。 次は背景画像を準備しましょう。 ▲今回はこちらの画像を使います。画像の名前は「haikei.gif」など分かりやすいものにしましょう。そして「gazou」という名前のフォルダを作ってそこに入れましょう。 ▲そして、こう書きましょう。 ▲index.htmlのファイルを「インターネット」にドラッグアンドドロップしてみるとこうなります！ ▲次にこ
HTMLでマンガを作成できる「Comix I/O」、棒人間エディタ付きで誰でも挑戦可能 【増田 @maskin】 | TechWave（テックウェーブ）
全力で「アプリ博」をヨイショしている、ちょっと寒いマンガ、、、、内容はともかく、最近流行している「棒人間」を主役にしたこのマンガはHTMLでできているのである (ソースを参照→http://metamix.com/techwave/comix.html)。 使用したのは「Comix I/O」。オンラインで、棒人間のポーズを決め、あとはHTMLソースに吹き出しなどを入力すれば完成。 出力は画像ではなく、あくまでHTMLで表現できているのがポイント。 棒人間マンガ量産体制スタート? 「Comix I/O」にはオンラインエディターが提供されており、画面上部のグラフィック部が棒人間のポーズや吹き出しの位置を調整するエディタになっている。まずは、ここで図柄を作成すると、下部にHTMLコードが生成される仕組み。 吹き出しの文字列などは、HTMLコードを直接編集する。 棒人間や吹き出しには、ベクターグラ
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
HTML5でロードオブナイツとかいうゲームを作った - mizchi log
陣取り戦争ゲーで、iPhoneのUnity版からの移植です。 ロードオブナイツ - Yahoo!モバゲー http://yahoo-mbga.jp/game/12011436/detail PC(Chrome/Firefox/IE9以上)とスマホ(Webkit)で同じ物が動きます。ヤバゲーとモバゲーでアカウントは共有してるので、どっちからでも入れます。 HTML版としては既存コードとか一切なかったんで、JSに関してはフルスクラッチです。というか全部CoffeeScriptです。 ある日会社で楽しくHaskellでKPI計算モジュール書いてたら、 「UnityのネイティブのゲームをHTML5に移植したい」 みたいな話が降ってきたので、移植しました。3ヶ月ぐらいで。 プラットフォームはモバゲー(スマホ) + ヤバゲーです。HTML5なのは、スマホとブラウザゲーで開発リソースを共通化したかったか
HTML5を中心とした「Web標準」がどれだけあるのか、図にしてみると……
急速に立ち上がろうとしている「プラットフォームとしてのWeb」。そのために現在たくさんのWeb標準が提唱され、標準化作業が行われています。 その全体像を1枚の図として示したのは、Mozilla Japanのdynamis（でゅなみす）氏こと浅井智也氏。先週行われたオープンソースカンファレンス2012京都で行った講演のスライドから許可を得て引用します。 HTML5を中心に、円の色は標準化団体の色を示しています。青ならW3C/WHATWG、黄色はIETF、茶色はECMA、赤はKhronos。また、円の外側はまだまだこれからの技術という位置づけになっているそうです。 こうして1枚の図にして見ると、実にたくさんの技術がWebで実現されようとしていることに驚かされます。 このすべての技術を使いこなす必要はないかもしれませんが、Webをプラットフォームとするアプリケーションの構築には、HTML5のマー
DreamweaverからCodaに変えました
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！ ↑私が10年以上利用している会計ソフト！ Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールして
【iPhone】大藤幹による(X)HTML辞典アプリがついにリリース / KOMOREBI || blog
実は以前から出る事を聞いていたのですが、ついにリリースされました。 我らが大師匠にあたる大藤 幹がお届けする本当の(X)HTML辞典のiPhone App版です。 » 大藤幹のHYML/XHTML辞典 リリース直後ということで、現在50%OFFで購入できる。 この「大藤幹のHYML/XHTML辞典」中身は、各HTMLタグを検索できるほか、要素や属性別で一覧からや逆引きなども可能になっている。検索も可能になっている。 中身についても、意味と役割のみならず読み方やサンプルまで収録されているもの。 正直言って、この値段でこのボリュームは業界人ならば絶対買っておくべきアプリの１つじゃないだろうか。 これまで分厚い辞書をもっていた人は、今日からiPhoneを持っていれば(X)HTMLタグ辞典はもう必要ないはず。 ちなみに、コラムなども入っている。 アプリの制作は沖縄の龍球インクさんです。 【追記：2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tumblr
html2text
site-html.com