[{"data":1,"prerenderedAt":340},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f3mf0clihlg5vi":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":38,"title":39,"date":40,"excerpt":41,"image":42,"categories":266,"modified":269,"html":270,"tags":271,"related":289,"prev":322,"next":331},[267,268],{"slug":45,"name":46},{"slug":25,"name":26},"2021-02-03T20:30:49","\u003Cp>　WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見てみてください」みたいなやり取りが発生することがある。これが、サービス内部のメンバー間のやり取りであれば（非効率ではあるものの）まだ許せるが、サービスを提供している顧客側に更新内容が反映されない事態が発生してしまうと、それは障害と同義だ。\u003C\u002Fp>\n\u003Cp>　そんなわけで、WEBページにおける静的リソースの読み込みには開発時に注意を払う必要がある。確実な対処方法としては、静的リソースの読み込み時にリソースパスに動的パラメータを付与して、ブラウザにキャッシュされないようにすることだ。\u003Cbr \u002F>\n　下記のように、フロントエンドだけで対応することもできる。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><link href=\"\u002Fcss\u002Fstyle.css?20180101010100\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n\n<img src=\"\u002Fimages\u002Fsample.jpg?20180101010100\" alt=\"Sample\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　読み込む静的リソースのファイルパスの後にGETパラメータとして更新日時等を付けてやるだけだ。これで、それらの静的リソースはブラウザに新しいリソースとして認識され、それまでキャッシュされていたリソースは破棄される。\u003Cbr \u002F>\n　だが、この方法だと、複数の画像を更新した際にHTML側で対応しなければならない箇所が多岐に渡ってしまうし、実際のページを見ながらスタイルシートを調整している時などはスタイルシートを更新する都度パラメータを変更しなければならず、作業効率が非常に悪くなる。\u003Cbr \u002F>\n　そこで、リソースパスに対しては常に動的パラメータを付与するようにしてみる。\u003C\u002Fp>\n\u003Cp>PHP向け:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php:\"><link href=\"\u002Fcss\u002Fstyle.css?<?= strtotime('now') ?>\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n# => <link href=\"\u002Fcss\u002Fstyle.css?1516854535\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ruby向け:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-ruby:\">= image_tag \"\u002Fimages\u002Fsample.jpg?#{Time.now.to_i}\"\n# => <img alt=\"Sample\" src=\"\u002Fimages\u002Fsample.jpg?1516854061\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　こんな感じに、PHPやRubyでページのテンプレートに元から動的パラメータを仕込んでしまえば良いのだ。\u003C\u002Fp>\n\u003Cp>　しかし、これだと毎回ページを読み込んだ際に静的リソースの読み込みが発生してしまい、WEBサービスとしてのパフォーマンスが著しく悪くなってしまうという弊害がある。理想としては、更新が発生した静的リソースのみブラウザキャッシュを破棄して読み込ませ、更新されていないリソースファイルにはブラウザキャッシュを効かせたい。\u003C\u002Fp>\n\u003Cp>　そういう時に使えるメソッドが、PHPやRubyなどには準備されている。\u003C\u002Fp>\n\u003Ch2>PHPなら filemtime() を使おう\u003C\u002Fh2>\n\u003Cp>　PHPの \u003Ccode>filemtime()\u003C\u002Fcode> は、指定されたファイルの更新時刻を取得する関数だ。これを使って静的リソースファイルのパスに動的パラメータを付与しておけば、リソースファイルが更新されない限り動的パラメータ部分が変わらないため、一度ブラウザにキャッシュされたリソースを有効に活用できる。\u003Cbr \u002F>\n　実際には、PHPでレンダリングするテンプレート等で下記のようにコーディングしておけば良い。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php:\"><link href=\"\u002Fcss\u002Fstyle.css?<?= filemtime( \"{$_SERVER['DOCUMENT_ROOT']}\u002Fcss\u002Fstyle.css\" ) ?>\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　注意点としては、\u003Ccode>filemtime()\u003C\u002Fcode> に指定するリソースファイルのパスは、サーバ上でのパスになるということだ。しかし、上記のような記述をテンプレート上のすべての静的リソースに行うのはテンプレートの可読性が著しく下がるので、指定されたファイルパスに動的パラメータが付与されたURIを返すような関数を作った方が良いだろう。\u003C\u002Fp>\n\u003Cp>独自関数化:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php:\">function optimize_uri( $resource_absolute_path=null ) {\n  $docroot = $_SERVER['DOCUMENT_ROOT'];\n  if ( ! empty( $resource_absolute_path ) && file_exists( $docroot . $resource_absolute_path ) ) {\n    $resource_absolute_path .= '?' . filemtime( $docroot . $resource_absolute_path );\n  }\n  return $resource_absolute_path;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　上記の関数を使って静的リソースファイルを読み込むテンプレートの例は下記のようになる。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php:\"><link href=\"<?= optimize_uri( '\u002Fcss\u002Fstyle.css' ) ?>\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n# 指定されたリソースファイルがあれば、ファイルの更新日時のタイムスタンプをパラメータに付与する\n# => <link href=\"\u002Fcss\u002Fstyle.css?1516855734\" rel=\"stylesheet\" type=\"text\u002Fcss\">\n\n<script src=\"<?= optimize_uri( '\u002Fjs\u002Fnone.js' ) ?>\"><\u002Fscript>\n# 指定されたリソースファイルがなければ、指定されたファイルパスをそのまま返す\n# => <script src=\"\u002Fjs\u002Fnone.js\"><\u002Fscript>\n\n<img src=\"<?= optimize_uri( '\u002Fimages\u002Fsample.jpg' ) ?>\" alt=\"Sample\">\n# => <img src=\"\u002Fimages\u002Fsample.jpg?1516855734\" alt=\"Sample\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Rubyなら File.mtime() を使おう\u003C\u002Fh2>\n\u003Cp>　Rubyでは Fileオブジェクト の \u003Ccode>mtime()\u003C\u002Fcode> メソッドでファイルの更新日時を取得できる。これを使って静的リソースファイルのパスに動的パラメータを付与していけば、リソースファイルが更新されない限り動的パラメータ部分が変わらないため、一度ブラウザにキャッシュされたリソースを有効に活用できるようになる。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-ruby:\">no_cache_param = Time.parse( File.mtime( \"#{Rails.public_path}\u002Fimages\u002Fsample.jpg\" ).to_s ).to_i\n= image_tag \"\u002Fimages\u002Fsample.jpg?#{no_cache_param}\"\n# => <img alt=\"Sample\" src=\"\u002Fimages\u002Fsample.jpg?1451907511\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　注意点としては、\u003Ccode>File.mtime()\u003C\u002Fcode> に指定するリソースファイルのパスは、サーバ上でのパス（RailsであればRails上の公開ディレクトリ経由のパス）になるということだ。しかし、上記のような記述をテンプレート上のすべての静的リソースに行うのはテンプレートの可読性が著しく下がるので、指定されたファイルパスに動的パラメータが付与されたURIを返すような関数を作った方が良いだろう。　\u003C\u002Fp>\n\u003Cp>独自関数化:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-ruby:\">def optimize_uri(resource_absolute_path = nil)\n  return resource_absolute_path if resource_absolute_path.blank?\n  return resource_absolute_path unless File.exist?(\"#{Rails.public_path}#{resource_absolute_path}\")\n  no_cache_param = Time.parse(File.mtime(\"#{Rails.public_path}#{resource_absolute_path}\").to_s).to_i\n  resource_absolute_path = \"#{resource_absolute_path}?#{no_cache_param}\"\nend\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　Railsアプリなら、アプリケーション全体の共通処理用ヘルパーメソッド（\u003Ccode>app\u002Fhelpers\u002Fapplication_helper.rb\u003C\u002Fcode>）に上記の関数を定義しておけば良い。そして、Viewのテンプレートではその関数にリソースパスを渡すようにする。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-ruby:\">= stylesheet_link_tag optimize_uri('\u002Fcss\u002Fstyle.css')\n# 指定されたリソースファイルがあれば、ファイルの更新日時のタイムスタンプをパラメータに付与する\n# => <link href=\"\u002Fcss\u002Fstyle.css?1516780069\" media=\"screen\" rel=\"stylesheet\">\n\n= javascript_include_tag optimize_uri('\u002Fjs\u002Fnone.js')\n# 指定されたリソースファイルがなければ、指定されたファイルパスをそのまま返す\n# => <script src=\"\u002Fjs\u002Fnone.js\"><\u002Fscript>\n\n= image_tag optimize_uri('\u002Fimages\u002Fsample.png')\n# => <img alt=\"Sample\" src=\"\u002Fimages\u002Fsample.jpg?1451907511\">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>おまけ: WordPressでの静的リソースの読み込みを最適化する\u003C\u002Fh2>\n\u003Cp>　WordPressではテーマへの静的リソースの読み込みは、スタイルシートなら \u003Ccode>wp_enqueue_style()\u003C\u002Fcode> 関数、スクリプトなら \u003Ccode>wp_enqueue_script()\u003C\u002Fcode> 関数を使って \u003Ccode>wp_enqueue_scripts\u003C\u002Fcode> のアクションフックに読み込み処理を追加するのがセオリーである。\u003Cbr \u002F>\n　\u003Ccode>wp_enqueue_style()\u003C\u002Fcode> や \u003Ccode>wp_enqueue_script()\u003C\u002Fcode> の関数では、引数で読み込むリソースのバージョン番号などを指定することができるので、そこにキャッシングを抑止するための動的パラメータを渡してあげるのが良いだろう。もちろん、バージョン管理されている外部リソースであればバージョン番号をそのまま指定するべきだが、厳密なバージョン管理を行っていない自サイトのみで使っている静的リソースであれば動的パラメータを付与しておくと効果的にキャッシングされる。\u003C\u002Fp>\n\u003Cp>テーマのfunctions.php等に:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php:\">add_action( 'wp_enqueue_scripts', function() {\n  \u002F\u002F Stylesheets to load\n  wp_enqueue_style(\n    'style-handle-name', \n    get_stylesheet_directory_uri() . '\u002Fcss\u002Fstyle.css', \n    array(), \n    filemtime( get_template_directory() . '\u002Fcss\u002Fstyle.css' ) \n  );\n\n  \u002F\u002F JavaScripts to load\n  wp_enqueue_script(\n    'script-handle-name', \n    get_template_directory_uri() . '\u002Fjs\u002Fscript.js', \n    array(), \n    filemtime( get_template_directory() . '\u002Fjs\u002Fscript.js' ), \n    true\n  );\n}, PHP_INT_MAX );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　一方で、画像リソースについては、各WordPressサイトやテーマによって取り扱いが異なるので、キャッシングの最適化は個別対応となってしまう。もしWordPressにビルドインされているテンプレート関数を利用して出力を行っているのであれば、 アイキャッチ画像ならば \u003Ccode>post_thumbnail_html\u003C\u002Fcode> フィルター、本文内の埋め込み画像ならば \u003Ccode>the_content\u003C\u002Fcode> フィルター、管理画面からアップロードされたメディアならば \u003Ccode>get_attached_file\u003C\u002Fcode> フィルターなどを使って画像ファイルのパスを拾ってフィルタリングしてあげることになるかと。\u003C\u002Fp>\n\u003Cp>これで「ブラウザのキャッシュを消してから見てみてください」とお願いする必要がなくなるのではないだろうか。\u003C\u002Fp>\n",[272,275,278,281,284,286],{"slug":273,"name":274},"css","CSS",{"slug":276,"name":277},"javascript","JavaScript",{"slug":279,"name":280},"php","PHP",{"slug":282,"name":283},"ruby","Ruby",{"slug":74,"name":285},"WordPress",{"slug":287,"name":288},"%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%82%ad%e3%83%a3%e3%83%83%e3%82%b7%e3%83%a5","ブラウザキャッシュ",[290,299,306,314],{"slug":291,"title":292,"date":293,"excerpt":294,"image":295,"categories":296},"javascript-function-that-can-determine-whether-specific-value-is-empty","JavaScriptでPHPのempty()のように空判定ができる関数","2017-10-13T20:18:47","JavaScriptにはオブジェクトや配列などの引数に与えた変数（値）が「空」かどうかを判定する関数がない。つまり、PHPで云うところの empty() や、Railsで云うところの blank? といったビルトインメ…","\u002Fassets\u002Fuploads\u002F2016\u002F06\u002Ftools.png",[297,298],{"slug":45,"name":46},{"slug":25,"name":26},{"slug":300,"title":301,"date":302,"excerpt":303,"image":42,"categories":304},"compare-php-and-ruby-and-javascript","RubyとPHPとJavaScriptの狭間で","2014-08-04T16:02:58","ここ1ヶ月ほど、会社の仕事でRubyを使った開発業務をしている。同時に、プライベートでは、WordPressのテーマ開発やプラグイン開発を進めてもいるため、RubyとPHPとJavaScriptのコーディングを同時並行で…",[305],{"slug":22,"name":23},{"slug":307,"title":308,"date":309,"excerpt":310,"image":42,"categories":311},"switch-the-read-or-unread-posts-of-wordpress","WordPressの記事の既読・未読を判定する","2014-07-23T20:11:59","WordPressの単一投稿ページや固定ページでは、\u003CBODY>タグのクラスに投稿IDが出力されます。 単一投稿ページでは、class=”single single-post postid-13 single…",[312,313],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":315,"title":316,"date":317,"excerpt":318,"image":295,"categories":319},"ready-to-usable-the-7-javascript-utility-functions","JavaScriptのすぐ使える7つのユーティリティ関数","2016-06-02T15:05:03","私が「Custom DataBase Tables」プラグインのJavaScriptで使っている関数で、すぐに使えて、わざわざ外部ライブラリを読み込むまでもないユーティリティ関数がいくつかあるので、それらを紹介してみたい…",[320,321],{"slug":45,"name":46},{"slug":25,"name":26},{"slug":323,"title":324,"date":325,"excerpt":326,"image":327,"categories":328},"yokai-watch-punipuni-gacha-tool","[妖怪ウォッチぷにぷに]Yマネーガチャ集計ツール","2017-10-24T12:26:03","スマホゲーム「妖怪ウォッチぷにぷに」のYマネーガチャの現在の状況を集計するツールを作ってみた。 「ぷにぷに」のYマネーガチャは、パズルで稼いだゲーム内通貨を使って回すガチャで、ガチャから出る妖怪をわざレベルを最大まで…","\u002Fassets\u002Fuploads\u002F2017\u002F10\u002FIMG_0095.jpg",[329,330],{"slug":45,"name":46},{"slug":255,"name":256},{"slug":332,"title":333,"date":334,"excerpt":335,"image":336,"categories":337},"no-plugin-how-to-set-category-order-by-using-description","プラグイン不要！ 説明欄を使ってカテゴリーの並び順を変える方法","2018-02-22T22:43:55","WordPressでカテゴリーの並び順を任意に変更したい場合、「Category Order and Taxonomy Terms Order」等のプラグインを導入するのが一般的だが、私のように管理画面に管理系のUIを…","\u002Fassets\u002Fuploads\u002F2018\u002F02\u002Fcategory_desciption_order_thumbnail.png",[338,339],{"slug":74,"name":75},{"slug":45,"name":46},1793391397546]