[{"data":1,"prerenderedAt":327},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$fljztkkr0hevd":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":272,"html":273,"tags":274,"related":286,"prev":313,"next":320},"use-the-latest-version-sage-of-wordpress-startup-theme-roots","WordPressのスタートアップテーマ「Roots」の最新版「Sage」を使う","2015-04-07T19:11:19","WordPressでサイトを作る際、私はいつも「Roots」というテーマをカスタマイズしている。WordPressのコアにバンドルされているtwenty～系のテーマやWEBで配布されているテーマは、色々な機能やそのまま…",[271],{"slug":74,"name":75},"2016-06-14T11:48:31","\u003Cp>　WordPressでサイトを作る際、私はいつも「\u003Ca href=\"https:\u002F\u002Froots.io\u002F\">Roots\u003C\u002Fa>」というテーマをカスタマイズしている。WordPressのコアにバンドルされているtwenty～系のテーマやWEBで配布されているテーマは、色々な機能やそのまま公開できてしまう程度の初期デザインが施されていて、それは確かにお手軽ではある。\u003Cbr \u002F>\n　でも、サイトを公開するにあたってはやっぱりオリジナリティが欲しいので、テーマを素のまま使うのは嫌だと思うのは私だけではないはず。そうなると、必然的にテーマのカスタマイズをしなきゃならなくなってくるんだが、カスタマイズするにあたってそれらの既存フューチャーを上書きしたりリファクタリングしていくのが非常に手間がかかるのも事実。だったら、自前でテーマを作れよ…とも思うんだが、テーマのコアとなる骨組み（汎用処理やテンプレート構成など）を考えたり作ったりするのがまた億劫で、およそオリジナルテーマとかは作る気にならない（なかなかやっかいな性分だなオレは…）。そんな時に見つけたのが「\u003Cstrong>Roots\u003C\u002Fstrong>」だった。\u003Cbr \u002F>\n　「Roots」はWordPressの開発者向けのスタートアップテーマを謳っており、とにかく汎用的な機能と骨格しかないまっさらなテーマで、インストール後はもう本当に好きなようにカスタマイズしてくれ～って形のテーマだった。WordPressが良かれと思ってデフォルトで追加している固定要素とかも極力そぎ落とす仕様になっていて、出力されるHTMLがスッキリしてるところが非常に好印象だったのだ。まさにやっかいな性分の私にピッタリなテーマだったわけだ（笑）\u003Cbr \u002F>\n　ほぼ一目ぼれに近くWordPressのテーマと言えば「Roots」みたいな感じで使い続けて来たんだが、去年あたりからRuby on Railsに浮気していたこともあってだいぶ疎遠になってた次第。そんな中、私が一番最初（およそ3年前）に「Roots」で作ったサイトはつい先日終了してしまったりしつつも、現在久々にWordPressで新しいサイト作ることになり、テーマにはまた「Roots」を使おうかと思ったのだ。そして、\u003Ca href=\"https:\u002F\u002Froots.io\u002F\">公式サイト\u003C\u002Fa>に最新版を確認しに行ったら、だいぶ様変わりした「Roots」と再会してかなり驚いた。\u003Cbr \u002F>\n　おそらく私が最後に「Roots」を使ったのが自ブログサイトをリニューアルした時で、今も利用しているその「Roots」のバージョンが6.5.2なので、現在のバージョン8.1.1（2015年4月7日現在）までゆうに2バージョンもメジャーアップしたことになる。その間、1年以上も「Roots」の動向を追っていなかったので、激変は当然と言えば当然か。最新バージョンではテーマ名すら変わっていて、「\u003Ca href=\"https:\u002F\u002Froots.io\u002Fsage\u002F\">\u003Cstrong>Sage\u003C\u002Fstrong>（Sage Starter Theme）\u003C\u002Fa>」となっていた。\u003C\u002Fp>\n\u003Cp>　そんな「Roots」改め「\u003Cstrong>Sage\u003C\u002Fstrong>」なのだが、導入敷居も結構上がっていた。CSSやJavaScriptはgulpによるプリコンパイル型でデプロイし、jQueryやBootstrapのコンポーネンツはbowerでパッケージ管理する様になっていた。今どきのフロントエンドの資産管理の流れに沿って進化していたわけだねぇ…。ちゅーわけで、gulpとbowerが使える環境じゃないとテーマの導入もできない。つまりは、node.jsの動作環境が必須になったということだ。さすがに開発者向けのテーマと言ったところか…。\u003Cbr \u002F>\n　いやぁ、導入が面倒そうだったんで、一瞬萎えそうになったんだけど、GitHubでソースの中身見てみたら慣れ親しんだ中身だったので、気を取り直して導入してみることにした。\u003C\u002Fp>\n\u003Cp>　では、早速「Sage」を動かすところまでの手順をまとめてみよう。\u003C\u002Fp>\n\u003Ch2>「Sage」テーマの導入手順\u003C\u002Fh2>\n\u003Ch3>1. node.js のインストール\u003C\u002Fh3>\n\u003Cp>　まずは node.js が動く環境がないと話にならないので、node.jsをインストールしよう。あ、言い忘れるところだったが、構築する環境は CentOS, Apache2.2, php5.4, MySQL5.6 のサーバ上（＝サイトの公開環境）だ。もし、Windows上のXAMPP環境等にインストールする場合はnode.jsの公式サイトからWindows用のパッケージをダウンロードして直接インストーラーで入れることになる。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$ git clone git:\u002F\u002Fgithub.com\u002Fcreationix\u002Fnvm.git ~\u002F.nvm\n$ . ~\u002F.nvm\u002Fnvm.sh\n$ nvm install v0.12.2\n$ vi .bashrc\n$ cat .bashrc\n...\n. ~\u002F.nvm\u002Fnvm.sh\nnvm use v0.12.2\nexport NODE_PATH=${NVM_PATH}_modules\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　node.jsのバージョン（上の例では v0.12.2）は適宜公式サイトの安定バージョンを確認してから指定するのが良い。なお、最後の .bashrc の編集は末尾に3行追加するという意味だ。これで、サーバにログインしたら自動でnode.jsが利用できるようになる（この辺の設定はWindowsOSでは不要だね）。\u003C\u002Fp>\n\u003Ch3>2. gulp と bower のインストール\u003C\u002Fh3>\n\u003Cp>まずはグローバルにだけインストールしておく。もしWindows環境上にインストールする場合はここからコマンドラインで実行する。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$ npm install -g gulp bower\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>3. Sage のインストール\u003C\u002Fh3>\n\u003Cp>いよいよテーマ本体をインストールする。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$ cd \u002Fvar\u002Fwww\u002Fhtml\u002Fwp-content\u002Fthemes\u002F\n$ mkdir -p sage\n$ git clone https:\u002F\u002Fgithub.com\u002Froots\u002Fsage.git sage\n$ cd sage\n$ npm install\n$ bower install\n? May bower anonymously report usage statistics to improve the tool over time? Yes\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>npm install\u003C\u002Fcode> に結構時間がかかるので、気長に待とう。\u003Ccode>bower install\u003C\u002Fcode> 時に発生する対話は \u003Ccode>Y\u003C\u002Fcode> でOKだ。\u003C\u002Fp>\n\u003Ch3>4. Sage の初期設定\u003C\u002Fh3>\n\u003Cp>次に、WordPress側の設定（wp-config.php）に環境定義を追加する。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>define('WP_ENV', 'development');\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　テーマ開発時は \u003Ccode>development\u003C\u002Fcode> にしておく。サイトを公開する場合はこの定数値を \u003Ccode>production\u003C\u002Fcode> に変更するという仕様だ。\u003Cbr \u002F>\nこの状態でテーマ「Sage」を有効にしてもCSSやJavaScriptがプリコンパイル（デプロイ）されていないので、本来のテーマの挙動を示さない。なので、下記のようにCSSやJavaScriptをプリコンパイルする。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$ gulp\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>コンパイルログが出力されて、すべてのコンポーネントが \u003Ccode>Finished\u003C\u002Fcode> したら準備完了だ。サイトの表示を確認してみよう。\u003C\u002Fp>\n\u003Cp>これで「Sage」テーマの導入は完了だ。この後にCSSやJavaScriptを修正する場合は、\u003Ccode>sage\u002Fassets\u002F\u003C\u002Fcode> 内の各種 \u003Ccode>.less\u003C\u002Fcode> ファイルや \u003Ccode>main.js\u003C\u002Fcode> を更新する。ファイルを更新したら、また \u003Ccode>gulp\u003C\u002Fcode> コマンドでプリコンパイルすることでフロントエンドに反映される仕組みだ。\u003Cbr \u002F>\nちなみに、プリコンパイルされたCSSやJavaScriptは \u003Ccode>sage\u002Fdist\u003C\u002Fcode> 内にデプロイされ、WEBフロントエンドで読み込まれることになる。\u003C\u002Fp>\n\u003Ch2>ブラウザ同期（BrowserSync）について\u003C\u002Fh2>\n\u003Cp>さて、テーマの開発を進めていくと、CSSやJavaScriptを更新したらいちいち \u003Ccode>gulp\u003C\u002Fcode> コマンドでプリコンパイルするのが面倒になってくる。そこで使うのが \u003Ccode>gulp watch\u003C\u002Fcode> コマンドだ。このコマンドを実行してプロセスを立ち上げておくと、\u003Ccode>.less\u003C\u002Fcode> や \u003Ccode>.js\u003C\u002Fcode> といったプリコンパイル対象のソースファイルが更新されたことをリアルタイムで検知して、自動でプリコンパイルを実行してくれるのだ。これさえやっておけば、プリコンパイルのオペレーションを忘却できるので、従来の \u003Ccode>.css\u003C\u002Fcode> ファイルを直接変更してすぐにブラウザでスタイルを確認するという開発手法が取れるようになる。\u003C\u002Fp>\n\u003Cp>やり方は、まず \u003Ccode>sage\u002Fassets\u002F\u003C\u002Fcode> 直下にある \u003Ccode>manifest.json\u003C\u002Fcode> の \u003Ccode>devUrl\u003C\u002Fcode> に自分のホスト名を指定する。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>  \"config\": {\n    \"devUrl\": \"http:\u002F\u002Ftest.ka2.org\"\n  }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──みたいな感じに自ホストのドメインURLを設定する。ローカルのWindows環境なら \u003Ccode>http:\u002F\u002F127.0.0.1\u003C\u002Fcode> のようにローカルIPを指定しておくと良い（VirtualHost+HOSTSで擬似的にローカルIPをドメイン解決できるようにしてる場合はそのドメインURLでも動くかも…試してないが）。\u003Cbr \u002F>\nその後で、\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$ gulp watch\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──を実行して、watchプロセスを立ち上げておく。watchをやめたい時は ctrl+C でOKだ。\u003Cbr \u002F>\ngulpのwatchプロセスが立っている間は各種ソースファイルへの変更が監視されていて、ファイル更新が行われたタイミングでプリコンパイルが自動で走るようになる。一応、更新検知はほぼリアルタイムに行われるんだが、プリコンパイル処理自体は更新内容によっては時間がかかったりするので、フロントエンド側への反映が即時同期しないので注意が必要だ。\u003C\u002Fp>\n\n\u003Cp>この記事と同じような内容は \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Froots\u002Fsage\">Roots\u002FSage のGitHubリポジトリ\u003C\u002Fa>のREADMEにも書いてあるので、不明な点があったらそっちを参照のこと。\u003C\u002Fp>\n\u003Cp>私的にはJavaScriptをCoffeeScriptで書きたいので、今度それ用の設定をしてみようと思う。\u003C\u002Fp>\n",[275,278,281,284],{"slug":276,"name":277},"roots","Roots",{"slug":279,"name":280},"sage","Sage",{"slug":282,"name":283},"theme","Theme",{"slug":74,"name":285},"WordPress",[287,295,302,310],{"slug":288,"title":289,"date":290,"excerpt":291,"image":292,"categories":293},"create-wordpress-theme-with-vuetify","WordPressのテーマをVuetifyで作る","2020-11-20T12:16:06","最近Vue.jsが楽しくて仕方がない。WordPressのサイト開発にもVue.js使っている今日この頃だ。今時のWordPressと云えばReactなのだが、どうもReactには私的に嫌悪感が付きまとうのだ……なぜだ…","\u002Fassets\u002Fuploads\u002F2020\u002F11\u002Fwp-vuetify-theme-hw.png",[294],{"slug":74,"name":75},{"slug":296,"title":297,"date":298,"excerpt":299,"image":71,"categories":300},"part2-tips-of-customize-theme-without-wordpressish-coding","第2章 脱WordPress式テーマのカスタマイズ","2020-02-10T15:17:24","まず、下記のソースを見て欲しい。 \u003Chead> \u003Cmeta charset=”UTF-8″> \u003Cmeta name=”viewport” content=”width=device-wid…",[301],{"slug":74,"name":75},{"slug":303,"title":304,"date":305,"excerpt":306,"image":42,"categories":307},"wordpress-emergency-tool","WordPressの管理画面にログインできなくなった時の緊急対処ツール","2017-06-17T00:13:27","WordPressのテーマとプラグインを開発していて、ログイン周りなどをカスタマイズしている時、ブラウザのセッションが切れて管理画面に入れなくなってしまう事などがまれにある。 私の例だと、WordPressの会員制サ…",[308,309],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":107,"title":108,"date":109,"excerpt":110,"image":111,"categories":311},[312],{"slug":74,"name":75},{"slug":314,"title":315,"date":316,"excerpt":317,"image":42,"categories":318},"next-issues-of-cdbt-plugin","CDBTプラグインの次回バージョンアップまでの課題","2015-03-06T18:50:31","最近時間が取れなくてプラグイン改修がとんと進んでいないのだが、前回のリリースからちょっと時間が経ってしまって課題がぼやけてきたので、自分用にリマインドしておこうと思う。 v1.1.13 1.1.14 まず、直近リリースを…",[319],{"slug":13,"name":7},{"slug":321,"title":322,"date":323,"excerpt":324,"image":42,"categories":325},"note-install-gulp-and-bower-to-windows8","Windows8.1にgulp、bowerをインストールする時の注意点","2015-05-17T11:28:12","Windows8.1のノートPCにphpの開発環境を構築しようと思い、gulpとbowerをインストールしようとして結構ハマったので、その時のTIPSをまとめておく。 Windows 8.1の罠 まず、Windows8.…",[326],{"slug":25,"name":26},1793391398519]