[{"data":1,"prerenderedAt":319},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f3ko13xxbjeopw":263},{"featured":4,"latest":129,"categories":227},[5,14,27,37,48,56,66,76,86,96,106,114,122],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":11},"custom-database-tables","Custom DataBase Tables","2015-11-24T02:29:34","You can create the new own table freely in the your WordPress database via this plugin. Then, you can make the management of table or (as view or entry or edit) data in a simple user interface.\\nAlso,","\u002Fassets\u002Fuploads\u002F2016\u002F02\u002Fcdbt-overview.png",[12],{"slug":13,"name":7},"cdbt",{"slug":15,"title":16,"date":17,"excerpt":18,"image":19,"categories":20},"10_php_tips_for_developers","PHP開発者が心得ておくべき10の鉄則","2016-01-11T18:38:09","PHPだけに限った話ではないが、プログラミングを行うに当たって、心得て、準備しておくと失敗が劇的に減る事柄をまとめてある良い記事を見つけたので、私なりの解釈で意訳しつつ、経験則を踏まえてあらためてまとめてみた。 オリジナ…","\u002Fassets\u002Fuploads\u002F2016\u002F01\u002Feyecatch-php-10-tips.jpg",[21,24],{"slug":22,"name":23},"column","コラム",{"slug":25,"name":26},"development","開発関連",{"slug":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":33},"jquery-timeline-v1","2種類の横型タイムラインを簡単に作成できる「jQuery.Timeline」をリリース","2017-05-29T14:55:46","現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。 ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、そち…","\u002Fassets\u002Fuploads\u002F2017\u002F05\u002Fjquery_timeline_image.png",[34],{"slug":35,"name":36},"jqtl","jQuery.Timeline",{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":43},"optimize-browser-cache-of-static-resources","更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる","2018-01-31T15:47:47","WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見て…",null,[44,47],{"slug":45,"name":46},"codes","コード集",{"slug":25,"name":26},{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":54},"jquery-timeline","jQuery.Timeline version2 – full documentation","2019-03-04T20:40:48","Plugin Overview The jQuery.Timeline plugin provides you two types of the horizontal timeline. You can create a…","\u002Fassets\u002Fuploads\u002F2019\u002F03\u002Fjquery.timeline_v2.jpg",[55],{"slug":35,"name":36},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":62},"released-the-sloth","Released the Sloth of mobile-first CSS micro framework!","2019-04-16T18:04:25","I released the “Sloth” that is mobile-first CSS micro framework. I have long used frontend framewo…","\u002Fassets\u002Fuploads\u002F2019\u002F04\u002Fsloth_doc_head.png",[63],{"slug":64,"name":65},"sloth","Sloth",{"slug":67,"title":68,"date":69,"excerpt":70,"image":71,"categories":72},"challenge-to-conceal-the-wordpress-site","WordPressサイトを徹底的に秘匿化する","2020-02-02T23:59:58","私は自分の個人サイトをはじめ、仕事でもWordPressサイトを運用している。WordPressは気軽にサイトを立ち上げられてカスタマイズも簡単な、素晴らしいオープンソースなのだが、世界中で使われまくっているその知名度…","\u002Fassets\u002Fuploads\u002F2020\u002F02\u002Fshutterstock_1878005929.jpg",[73],{"slug":74,"name":75},"wordpress","WordPress関連",{"slug":77,"title":78,"date":79,"excerpt":80,"image":81,"categories":82},"what-is-forkor","Made a shortened URL app called Forkor","2020-07-07T22:27:01","What’s Forkor? Forkor is a service that provides a shortened URL feature that allows you to redirect any…","\u002Fassets\u002Fuploads\u002F2020\u002F07\u002Fforkor.png",[83],{"slug":84,"name":85},"forkor","Forkor",{"slug":87,"title":88,"date":89,"excerpt":90,"image":91,"categories":92},"manual-about-svg-japan","インタラクティブな日本地図を生成するJSプラグイン「SVG Japan」","2020-11-16T21:19:58","各都道府県をそれぞれ選択・クリック可能なインタラクティブな日本地図を生成するネイティブJavaScript建てのプラグイン「SVG Japan」を作ったので、その紹介と使い方をまとめておく。ちなみにソースコードはgit…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fsvg-japan.png",[93],{"slug":94,"name":95},"svg-japan","SVG Japan",{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":102},"wp-ignitor-plugin-to-conceal-wordpress-site","WordPressサイトを秘匿化するプラグイン「WP Ignitor」","2021-01-19T15:28:21","以前「WordPressサイトを徹底的に秘匿化する」という記事で、WordPress建てのサイトを秘匿化する方法を取り上げたのだが、あれをサイト構築時に毎度実施するとなるととても労力が必要であった。そこで、もっとお手軽…","\u002Fassets\u002Fuploads\u002F2021\u002F01\u002Fbanner-1554x500-1.png",[103],{"slug":104,"name":105},"wp-ignitor","WPイグナイタ",{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":112},"tastewp","無料でWordPressサイトを複数作成できるWEBサービス「TasteWP」","2021-03-25T20:21:59","私が日本語翻訳に協力しているWEBサービス「TasteWP」について紹介しようと思う。 https:\u002F\u002Ftastewp.com このサービス、サインアップすることなく無料で自分用のWordPressサイトを作れるとい…","\u002Fassets\u002Fuploads\u002F2021\u002F03\u002FTasteWP_screenshot.png",[113],{"slug":74,"name":75},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":120},"monster-hunter-rise-skill-simulator","モンハンライズのスキルシミュレータを作ってみた！","2021-06-28T20:24:52","コラムで連載していたNintendo Switch版『モンスターハンターライズ』のスキルシミュレータ開発がやっと一段落して一通り完了した。いやぁ、記事書きながら同時並行で開発すると思っていた以上に時間がかかるもんだなぁ…","\u002Fassets\u002Fuploads\u002F2021\u002F06\u002Fmhrss_v100.png",[121],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":127},"comparison-of-javascript-date-libraries","JavaScriptの日時ライブラリを比較してみた","2021-07-28T22:39:19","ネイティブJavaScriptで日時を取り扱う場合、ビルトインされているDateオブジェクトを使うことになるのだが、このDateオブジェクトは取り扱いにクセが多く、直感的に日時を操作できない点でも有名である。そこで、専…",[128],{"slug":25,"name":26},[130,141,153,165,175,184,192,195,198,206,213,220],{"slug":131,"title":132,"date":133,"excerpt":134,"image":135,"categories":136},"pulllog_launched","ガチャ履歴を記録・分析できるWebサービス「PullLog」","2025-08-22T13:05:30","このたび、新しい個人開発サービスとして 「PullLog（プルログ）」 をリリースした。 URLはこちら https:\u002F\u002Fpulllog.net PullLogとは？ PullLogは、ソーシャルゲームのガチャ履歴を記録…","\u002Fassets\u002Fuploads\u002F2025\u002F08\u002Fpulllog_stats_jp.png",[137,140],{"slug":138,"name":139},"industries","プロダクト",{"slug":25,"name":26},{"slug":142,"title":143,"date":144,"excerpt":145,"image":146,"categories":147},"mockapi-php-openapi-schema-generation","モックAPIのレスポンスから OpenAPI 3.0 スキーマを自動生成するPHPツール","2025-04-17T09:31:52","私自身がそうなのですが、OpenAPI仕様書を毎回手作業で書いていて「面倒だな」と思ったことはありませんか？ そんな（私と）あなたにぴったりのツールがあります。 レスポンスの例さえ用意すれば、OpenAPI 3.0 スキ…","\u002Fassets\u002Fuploads\u002F2025\u002F04\u002Fswaggerui-preview.png",[148,151,152],{"slug":149,"name":150},"mockapi-php","MockAPI-PHP",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":154,"title":155,"date":156,"excerpt":157,"image":158,"categories":159},"ambient_playlist_customize","Ambientでメメントモリのラメントプレイヤーを作る","2023-11-30T17:32:39","「Ambient」の最新バージョン 1.2.0で実装した「疑似フェーダー」機能を使って、ソーシャルゲーム「メメントモリ」のYouTube公式チャンネルで公開されているMVを集約したラメント専用プレイヤーを作ってみた。 ラ…","\u002Fassets\u002Fuploads\u002F2023\u002F11\u002Fambient_mememori_1.png",[160,163,164],{"slug":161,"name":162},"ambient","Ambient",{"slug":138,"name":139},{"slug":25,"name":26},{"slug":166,"title":167,"date":168,"excerpt":169,"image":170,"categories":171},"released_ambient_demo_version","Ambientメディアプレイヤーのクラウド版デモを公開","2023-11-22T13:47:36","つい先日「Ambient」の最新バージョン 1.1.0をリリースして、それに合わせてクラウド版デモサイトも公開してみた。 なお、クラウド版デモでローカルのホストコンピュータのメディアを再生するには、そのメディアファイルも…","\u002Fassets\u002Fuploads\u002F2023\u002F10\u002FAmbientMediaPlayer-typologo.png",[172,173,174],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":176,"title":177,"date":178,"excerpt":179,"image":170,"categories":180},"ambient-media-player","YouTubeと自分のPC内メディアを同時に再生できるメディアプレイヤーを作ってみた","2023-10-20T00:00:25","私はよくPCで何か作業をするときには音楽を垂れ流していることが多い。 そういう時にかける曲は、手持ちのアルバムCD等からPCに取り込んだ音源だったり、さらにはYouTubeの動画だったりとメディアや再生環境がバラバラだ。…",[181,182,183],{"slug":161,"name":162},{"slug":138,"name":139},{"slug":25,"name":26},{"slug":185,"title":186,"date":187,"excerpt":188,"image":189,"categories":190},"what-is-the-sunorhc","Sunorhc is a date-time library for JavaScript","2021-08-25T22:55:55","Sunorhc is a lightweight library for handling dates and times for JavaScript. The library wraps a native JavaS…","\u002Fassets\u002Fuploads\u002F2021\u002F08\u002Fshutterstock_1091212919_resized.jpg",[191],{"slug":25,"name":26},{"slug":123,"title":124,"date":125,"excerpt":126,"image":42,"categories":193},[194],{"slug":25,"name":26},{"slug":115,"title":116,"date":117,"excerpt":118,"image":119,"categories":196},[197],{"slug":25,"name":26},{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":204},"mhrise-skill-simulator-creation-chapter-12","モンスターハンターライズのスキルシミュレータを作ってみる！ 第12回","2021-06-21T13:11:46","今回は「マイセット登録」と護石データの「エクスポート／インポート」機能の追加をしていく。折り良く（悪く？）「FF7リメイク・インターグレード」や「FORTNITEシーズン7」が出たこともあって、そっちをプレイしてたらこ…","\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fb6ca09e9a7f6faf27641f62dabe64c6ff97b4f326aa478379e3c112aa28eb9ab.jpg",[205],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":211},"mhrise-skill-simulator-creation-chapter-11","モンスターハンターライズのスキルシミュレータを作ってみる！ 第11回","2021-06-07T14:52:31","さて、今回はユーザー個別データの管理部分を開発していく予定だが、まずその前にやっておくことがある。 新スキル「風雷合一」に対応する Ver.3.0の大型無料アップデートで追加された新スキルに「風雷合一」というのがある…",[212],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":218},"mhrise-skill-simulator-creation-chapter-10","モンスターハンターライズのスキルシミュレータを作ってみる！ 第10回","2021-06-02T00:29:10","今回は、護石管理画面の作成だ。この護石管理では、ユーザーごとに護石の登録を行う機能と、登録した護石を削除する機能を持つ仕様になる。この画面から登録した護石データはデータベースに格納するので、フロントエンド側からのリクエス…",[219],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":225},"mhrise-skill-simulator-creation-chapter-9","モンスターハンターライズのスキルシミュレータを作ってみる！ 第9回","2021-05-22T23:56:27","さて、今回はVuexによるデータ・キャッシュの実装だ。一度データベースから読み込んだデータをフロントエンド側で再利用可能なストアに格納することで、データベースへの接続回数を減らしてシステム負荷を下げるとともに、UX的な…",[226],{"slug":22,"name":23},[228,230,232,236,238,239,240,241,242,244,247,248,250,252,254,258,261],{"slug":161,"name":162,"count":229},3,{"slug":13,"name":7,"count":231},7,{"slug":233,"name":234,"count":235},"csnp","Custom Sticky Notes",2,{"slug":84,"name":85,"count":237},1,{"slug":35,"name":36,"count":229},{"slug":149,"name":150,"count":237},{"slug":64,"name":65,"count":237},{"slug":94,"name":95,"count":237},{"slug":74,"name":75,"count":243},37,{"slug":245,"name":246,"count":237},"wpqt","WP Qiita",{"slug":104,"name":105,"count":237},{"slug":22,"name":23,"count":249},29,{"slug":45,"name":46,"count":251},16,{"slug":138,"name":139,"count":253},5,{"slug":255,"name":256,"count":257},"lifelog","ライフログ",64,{"slug":259,"name":260,"count":235},"uncategorized","未分類",{"slug":25,"name":26,"count":262},45,{"type":264,"post":265},"post",{"slug":266,"title":267,"date":268,"excerpt":269,"image":42,"categories":270,"modified":273,"html":274,"tags":275,"related":282,"prev":305,"next":312},"comparing-the-css-framework-of-alternative-to-the-bootstrap","Bootstrapに代わるCSSフレームワークを比較してみた","2015-03-03T18:54:38","ここ数年、Webのフロントエンド開発でのレイアウト部分には「Twitter Bootstrap」を長く使って来たが、さすがに飽きてきた（笑） バージョンが3になってからあまりコアに変更もなくなって、つまらなくなって来たと…",[271,272],{"slug":22,"name":23},{"slug":25,"name":26},"2021-02-03T20:42:22","\u003Cp>ここ数年、Webのフロントエンド開発でのレイアウト部分には「Twitter Bootstrap」を長く使って来たが、さすがに飽きてきた（笑） バージョンが3になってからあまりコアに変更もなくなって、つまらなくなって来たというのが一番大きいのかも。\u003Cbr \u002F>\n──そんなわけで、Bootstrapに代わるフロントエンドフレームワーク（≒CSSフレームワーク）ってないのかなぁと思い立ったのだ。\u003Cbr \u002F>\n探してみたら、結構面白いのが色々あったのでこの記事で紹介しておこう（アルファベット順）。\u003C\u002Fp>\n\u003Ch2>\u003Ca href=\"https:\u002F\u002Fdocs.atlassian.com\u002Faui\u002Flatest\u002F\">AUI\u003C\u002Fa> ─ Atlassian User Interface\u003C\u002Fh2>\n\u003Cp>「Bitbucket（Git & Mercurial（マーキュリアル）選択型Webホスティングサービス）」を提供しているアトラシアン社が提供しているCSSフレームワーク（フロントエンドライブラリ）。Bootstrapと同等かそれ以上の高機能フレームワークで、Forkしている有志のユーザーによってコアやUIコンポーネント等の開発が活発である。\u003Cbr \u002F>\nその他の特徴としては、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>CDN経由での読み込みが可能\u003C\u002Fli>\n\u003Cli>動作にはjQueryが必要（公式サポートバージョンは1.7.2と1.8.3、および1.10.2\u003Csup id=\"fnref-860-1\">\u003Ca href=\"#fn-860-1\" rel=\"footnote\">1\u003C\u002Fa>\u003C\u002Fsup>）\u003C\u002Fli>\n\u003Cli>UIコンポーネントセットが多い（種類としてはBootstrapを超える）\u003C\u002Fli>\n\u003Cli>コアモジュールに魅力的なUIコンポーネントがある（ソート可能テーブルや日付ピッカーなど）\u003C\u002Fli>\n\u003Cli>Soyテンプレート（Closure templateとも呼ばれる）を採用しており、これを利用することで開発者はクライアントとサーバ上（JAVA）で同じテンプレート上でのUI開発を行うことができる \u003C\u002Fli>\n\u003Cli>bootstrapよりHTML側のネスト構造が浅いままUIコンポーネントが適用できるため、最終的なHTMLの可読性が高い\u003C\u002Fli>\n\u003Cli>ライセンス形態： Apache2\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン:  5.8.7（2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fmatthewhartman.github.io\u002Fbase\u002F\">Base\u003C\u002Fa> ─ ベース\u003C\u002Fh2>\n\u003Cp>CSSプリプロセッサ「SASS\u002FLESS」で開発されたCSSフレームワークで、IE7を含むほとんどのメジャーブラウザでの互換性を謳っている。UIコンポーネントは全体的にセンシティブ（線が細い）な感じで、非丸角型のフラットレイアウトとなる。フレームワークのclass名汚染は少ない方だが、class名はやや長いかも。\u003Cbr \u002F>\nその他の特徴としては、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>動作にはプラグイン用の default.js と modernizr.js （どちらもパッケージに同梱）が必要\u003C\u002Fli>\n\u003Cli>カスタマイズにはSASSかLESSのコンパイラが必要\u003C\u002Fli>\n\u003Cli>グリッドは最大12グリッドまで\u003C\u002Fli>\n\u003Cli>初期状態ではプラグインが未定義で、JavaScriptを使用する動的なUIコンポーネントはない\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン:  1.8.5（2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fwww.basscss.com\u002F\">BassCSS\u003C\u002Fa> ─ BASSCSS\u003C\u002Fh2>\n\u003Cp>デザイナーのための超高速CSSフレームワークで、「初心者向けCSSツールキット」を謳っている。基本的に利用するユーザーがスタイル定義を拡張していくことが前提となっていて、フレームワークと言うよりはCSSテンプレートに近い。仕様的にもBootstrapに似ている部分が多く、Bootstrapを使ったことがあるユーザーなら扱い易いかも。\u003Cbr \u002F>\nその他の特徴は、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>CDN経由でのインポートに対応\u003C\u002Fli>\n\u003Cli>Reworkプリプロセッサを利用したコンパイルが可能\u003C\u002Fli>\n\u003Cli>各UIコンポーネントをプラグインとして使用する／しないを選べる\u003C\u002Fli>\n\u003Cli>グリッドレイアウトやカラーリング等、UIコンポーネントセットは多め\u003C\u002Fli>\n\u003Cli>レスポンシブ対応型の要素オブジェクトのスタイル「Flex Object」という独自コンポーネントがある（グリッドレイアウトとも組み合わせられる）\u003C\u002Fli>\n\u003Cli>公式サイトから自分用のスタイル定義を設定してコンパイル済みCSSファイルを取得できる\u003C\u002Fli>\n\u003Cli>デフォルトのCSSファイルは23kBで、GZIP圧縮後は4kBとなる\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン: 5.0.0 （2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fcardinalcss.com\u002F\">CardinalCSS\u003C\u002Fa> ─ カーディナルCSS\u003C\u002Fh2>\n\u003Cp>「モバイルファースト」を謳っているCSSフレームワーク。LESSプリプロセッサ用のCSSで読みやすく保守性が高い。機能やUIコンポーネントセットはBootstrapに迫るものがある。\u003Cbr \u002F>\n特徴としては、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>normalize.css 組み込み済み\u003C\u002Fli>\n\u003Cli>利用にはサーバ側でCSSをLESSコンパイルできる環境が必要\u003C\u002Fli>\n\u003Cli>柔軟なグリッドレイアウトシステム\u003C\u002Fli>\n\u003Cli>ボタン、フォーム、テーブルなどのUIコンポーネントセットを持つ\u003C\u002Fli>\n\u003Cli>gzip圧縮用に最適化されたユーティリティクラス\u003C\u002Fli>\n\u003Cli>実ファイルはミニファイ&gzip圧縮されていて 11.13kB\u003C\u002Fli>\n\u003Cli>ほぼすべてのメジャーなモダンブラウザに対応している\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン:  3.0.6（2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fconcisecss.com\u002F\">ConciseCSS\u003C\u002Fa> ─ コンサイスCSS\u003C\u002Fh2>\n\u003Cp>フラットデザインのCSSフレームワーク。必要最小限の機能構成なので初心者にも扱いやすい。デフォルトのカラートーンが淡め。グリッドレイアウトは16グリッドまで可能。UIコンポーネントのclass名がやや長いのでコーディング時の負担がやや大きいかも。\u003Cbr \u002F>\nその他の特徴としては、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Normalize.CSS 組み込み済み\u003C\u002Fli>\n\u003Cli>SASSソースファイルによるカスタマイズ\u003C\u002Fli>\n\u003Cli>HTML5を無効にできる（旧来の(X)HTML用CSSセットとしても利用可能）\u003C\u002Fli>\n\u003Cli>レスポンシブを無効化できる\u003C\u002Fli>\n\u003Cli>コンパイル済みCSSを適応するだけで利用可能（css\u002Fconcise.css と js\u002Fconcise.js）\u003C\u002Fli>\n\u003Cli>動作にはjQueryが必要\u003C\u002Fli>\n\u003Cli>アドオンにてUIコンポーネントセットを利用できるが少なめ\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン: 2.1.0 （2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Ffurtive.co\u002F\">Furtive\u003C\u002Fa> ─ ファーティブ\u003C\u002Fh2>\n\u003Cp>100％モバイルファーストの超軽量CSSフレームワーク。モバイル優先のメディアクエリでグリッドを生成する「\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjohnotander\u002Frework-flex-grid\">Rework Flex Grid\u003C\u002Fa>」というCSSプラグインを取り込んでいて、モバイルでのブラウジングに対して無駄なCSS解析を行わず高速なWEBレンダリングを実現している（と謳っている）。確かに今回調査したCSSフレームワーク中では一番軽量だったので、名前の通り「ひそかに」動くのかも（笑） ただし、PC向けのサイトには向かないので、利用シーンは限られるかも。\u003Cbr \u002F>\nその他の特徴は、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>rem単位でのグリッドシステムを採用（完全なプログレッシブ・エンハンスメント対応のため、レガシーブラウザでは動作制限あり）\u003C\u002Fli>\n\u003Cli>グリッドは最大6グリッドまで\u003C\u002Fli>\n\u003Cli>最終的にWEBサイトに読み込まれるCSSファイルは3.92kB（GZIP圧縮済み）と超軽量\u003C\u002Fli>\n\u003Cli>SCSSに対応している\u003C\u002Fli>\n\u003Cli>uncssの利用推奨で、gulpにてビルド（CSSコンパイル）する\u003C\u002Fli>\n\u003Cli>利用できるコンポーネントセットは必要最小限で、すべてモバイル向けに最適化されている感じ\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン: 2.0.0 （2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fmuellergridsystem.com\u002F\">Mueller\u003C\u002Fa> ─ ミューラー\u003C\u002Fh2>\n\u003Cp>「\u003Ca href=\"http:\u002F\u002Fcompass-style.org\u002F\">Compass\u003C\u002Fa>」ベースのグリッド生成モジュール。レスポンシブ、非レスポンシブを問わずグリッドレイアウトを強力に制御すると謳っている。グリッドレイアウト生成用のスタイリングしか定義されていないので、他のUIコンポーネントのスタイリングは別途必要になる。JavaScriptライブラリ「Masonry」と組み合わせて「Pinterest」のようなデザインを実現できる（らしい）。\u003Cbr \u002F>\nその他の特徴としては、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Normalize.css は組み込み済み\u003C\u002Fli>\n\u003Cli>利用にはSASSでコンパイルするか、screen.cssを読み込む\u003C\u002Fli>\n\u003Cli>2013年4月からアップデートがないので、トレンドからやや古くなっている可能性あり\u003C\u002Fli>\n\u003Cli>ライセンス形態： BSDライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン: 1.1 （2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fpowertoweb.com\u002Fpowertocss\u002F\">PowerToCSS\u003C\u002Fa> ─ パワートゥCSS\u003C\u002Fh2>\n\u003Cp>WEBページのスタートアップには最適と謳う軽量CSSフレームワーク。jQuery等のJavaScriptに依存しない純粋なCSSのみのフレームワークで、専用のclass名記述も必要最小限度でフロントエンドをコーディングできる。それもあって、動的なコンポーネントセットは少ない。\u003Cbr \u002F>\nその他の特徴は、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>オリジンのCSSで21KB、ミニファイされたCSSファイルで14.8KBと軽量\u003C\u002Fli>\n\u003Cli>powertocss.min.css の読み込みだけで動作可能\u003C\u002Fli>\n\u003Cli>追加できるグリッドサイズは1200px、960px、640px、320pxの4種類\u003C\u002Fli>\n\u003Cli>レスポンシブレイアウトにも対応\u003C\u002Fli>\n\u003Cli>LESS対応\u003C\u002Fli>\n\u003Cli>CSSフレームワーク用のclass名定義がほとんど不要（HTMLのタグ名に対してスタイリングされている）\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン: 1.1.0 （2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fgetskeleton.com\u002F\">Skeleton\u003C\u002Fa> ─ スケルトン\u003C\u002Fh2>\n\u003Cp>モバイルファーストのCSSフレームワークで、小規模WEBサイトのベースCSS、およびスモールスタート時の初期CSSセットとして推奨している。導入が簡単で、フレームワーク専用のclass名汚染が最小限なので、後々に別のCSSフレームワークに乗り換えるなどの運用に適している。Web開発の初期のとりあえずのスタイリングやモック開発に適している。\u003Cbr \u002F>\nその他の特徴は、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>normalize.css は同梱されているので別途組み込む\u003C\u002Fli>\n\u003Cli>対応ブラウザは各モダンブラウザの最新版のみ（完全なプログレッシブ・エンハンスメント対応）\u003C\u002Fli>\n\u003Cli>拡張ディストリビューションとして\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fwhatsnewsaes\u002FSkeleton-less\">LESS対応版\u003C\u002Fa>と\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fwhatsnewsaes\u002FSkeleton-Sass\">SASS対応版\u003C\u002Fa>がある\u003C\u002Fli>\n\u003Cli>UIコンポーネントは必要最小限度のみの提供\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン: 2.0.4 （2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Fdaneden.github.io\u002FToast\u002F\">Toast\u003C\u002Fa> ─ トースト\u003C\u002Fh2>\n\u003Cp>一風変わったグリッドレイアウト専用CSSフレームワーク。ユーザーの好きなカラム数、間隔でグリッドレイアウトを自由に生成できる。…というかそれしかできません。なので、他のUIコンポーネントのスタイリングは別途定義するなり、他のフレームワークに依存することになる。\u003Cbr \u002F>\n特徴としては、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>グリッド定義はSCSSに変数としてセットする（SASSコンパイル形式）\u003C\u002Fli>\n\u003Cli>プリセットのデフォルトCSSもあるので、カスタマイズしなくてもそのまま使える\u003C\u002Fli>\n\u003Cli>ライセンス形態： MITライセンス\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン:  1.0.0（2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>\u003Ca href=\"http:\u002F\u002Ftuktuk.tapquo.com\u002F\">TukTuk\u003C\u002Fa> ─ トゥクトゥク\u003C\u002Fh2>\n\u003Cp>緑と黒がキーカラーのフロントエンドフレームワーク。グリッドレイアウト（カラムレイアウト）の際のclass名汚染が大きいが、それ以外のUIではほぼclass名なしでスタイリングしてくれる。動的UIコンポーネントもいくつかパッケージングされていて、幅広いWebサイトデザインに対応できる。\u003Cbr \u002F>\nその他の特徴としては、\u003C\u002Fp>\n\u003Cul>\n\u003Cli>プログレッシブエンハンスメント志向なのでモダンブラウザ用（IE6では使うなと謳っている）\u003C\u002Fli>\n\u003Cli>コアファイルのサイズはGZIP圧縮時で9kB\u003C\u002Fli>\n\u003Cli>オブジェクト指向型CSSを採用している（≒class名汚染の危険性が高い）\u003C\u002Fli>\n\u003Cli>モーダル、アコーディオン等の動的UIコンポーネントや専用アイコンセットを有する\u003C\u002Fli>\n\u003Cli>JavaScriptのソースはCoffeeScript形式、CSSのソースはstyl形式\u003C\u002Fli>\n\u003Cli>ソースカスタマイズ後はgulpにてビルドする\u003C\u002Fli>\n\u003Cli>ライセンス形態： GPLv3\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\u003Cp>\n  最新バージョン:  1.0.0（2015年3月3日時点）\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch2>総評\u003C\u002Fh2>\n\u003Cp>色々試してみて、改めてBootstrapの偉大さに気づかされた次第。いやぁ、Bootstrapは良くできてるフレームワークだわ～。初心者から上級者まで安定して使えるうえに、拡張しやすいしねぇ…。\u003Cbr \u002F>\nフラットレイアウトに特に違和感感じないなら、最終的にフロントエンドフレームワークはBootstrapを選んでおきなさい─と言いたくなる…\u003Cstrong>が、それじゃぁこの記事書いた意味がない\u003C\u002Fstrong>ので、あえてBootstrapに代わるフレームワークを選ぼう！\u003Cbr \u002F>\nまぁ、機能面と柔軟性で\u003Cstrong>Bootstrapと渡り合えるのは今のところ「AUI」しかない\u003C\u002Fstrong>んだけどねぇ…。アトラシアン社のサービスって「Bitbucket」もそうだけど主流のサービスに対抗するような挑戦的なサービスが多いと思った。「AUI」もバリバリに本家Bootstrapを意識して対抗するような感じで作られている気がするんだけど…オレの気のせいか？\u003C\u002Fp>\n\u003Cp>とにもかくにも、Bootstrapに代わるCSSフレームワークは「AUI」と（自分の中で）決定したので、うちのブログも「AUI」スタイルでリニューアルしてみようかなぁ…。時間があればだけど、ぜひ触ってみたいフレームワークではあるんだよねぇ。\u003C\u002Fp>\n\u003Ch4>脚注\u003C\u002Fh4>\n\u003Cp>参考サイト: \u003Ca href=\"http:\u002F\u002Fdesignposts.net\u002F10-best-bootstrap-alternative-web-developers\u002F\">http:\u002F\u002Fdesignposts.net\u002F10-best-bootstrap-alternative-web-developers\u002F\u003C\u002Fa>\u003C\u002Fp>\n\u003Cdiv class=\"footnotes\">\n\u003Chr \u002F>\n\u003Col>\n\u003Cli id=\"fn-860-1\">\n\u003Ca href=\"https:\u002F\u002Fbitbucket.org\u002Fatlassian\u002Faui-adg\u002Fwiki\u002Fversions\u002Fjq-version-matrix\">https:\u002F\u002Fbitbucket.org\u002Fatlassian\u002Faui-adg\u002Fwiki\u002Fversions\u002Fjq-version-matrix\u003C\u002Fa> \u003Ca href=\"#fnref-860-1\" rev=\"footnote\">↩\u003C\u002Fa>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n",[276,279],{"slug":277,"name":278},"bootstrap","Bootstrap",{"slug":280,"name":281},"css","CSS",[283,290,294,302],{"slug":284,"title":285,"date":286,"excerpt":287,"image":42,"categories":288},"stylish-styling-of-blockquote-created-by-markdown-text","Markdownテキストの引用（blockquote）をスタイリッシュに見せる","2015-09-04T12:25:32","このブログはMarkdownに対応させているので、投稿はほぼすべてMarkdown記法で書いている。 そして、スタイルはbootstrap（バージョン3）を使っているので、MarkdownテキストがHTMLに変換されると…",[289],{"slug":25,"name":26},{"slug":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":291},[292,293],{"slug":45,"name":46},{"slug":25,"name":26},{"slug":295,"title":296,"date":297,"excerpt":298,"image":299,"categories":300},"css-hack-for-opera","OperaだけにSTYLEを適応させるCSSハックでつまづいた時","2011-08-12T12:25:13","現在、仕事でスマホ（メインはAndroidとiPhone）専用サイトを作っているのだが、スマホってPCと同じように個人がブラウザを自由にインストールできるので、主要なスマートフォン用ブラウザアプリのクロスブラウジングはや…","\u002Fassets\u002Fuploads\u002F2011\u002F08\u002Fopera_css_hack.gif",[301],{"slug":25,"name":26},{"slug":57,"title":58,"date":59,"excerpt":60,"image":61,"categories":303},[304],{"slug":64,"name":65},{"slug":306,"title":307,"date":308,"excerpt":309,"image":42,"categories":310},"type-of-bit-is-optimal-as-field-handling-boolean-in-mysql","MySQLに真偽値を格納する場合はbit(1)型のフィールドが最適","2015-02-23T16:30:43","つい最近、自作のWordPressカスタムデータベース管理プラグイン「Custom DataBase Tables」への問い合わせで bit型フィールド についてデフォルト値を指定するとテーブル作成がコケるという不具合報…",[311],{"slug":25,"name":26},{"slug":313,"title":314,"date":315,"excerpt":316,"image":42,"categories":317},"next-issues-of-cdbt-plugin","CDBTプラグインの次回バージョンアップまでの課題","2015-03-06T18:50:31","最近時間が取れなくてプラグイン改修がとんと進んでいないのだが、前回のリリースからちょっと時間が経ってしまって課題がぼやけてきたので、自分用にリマインドしておこうと思う。 v1.1.13 1.1.14 まず、直近リリースを…",[318],{"slug":13,"name":7},1793391398545]