[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$fp8cri2gabzbv":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":270,"categories":271,"modified":273,"html":274,"tags":275,"related":281,"prev":306,"next":314},"try-to-make-pages-of-products-management-with-evaluatable-by-users-at-custom-database-tables","Custom DataBase Tablesでユーザー評価可能な製品管理ページを作る","2016-04-15T17:45:24","Custom DataBase Tables（以降「CDBT」と呼ぶことにする）プラグインのバージョン2のチュートリアルを公開したのに合わせて、連携した記事を書き起こしてみた。原文のチュートリアルの方は技術者向けで表記が…","\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Fcdbt_sample_20160415.jpg",[272],{"slug":13,"name":7},"2019-02-19T23:41:40","\u003Cp>Custom DataBase Tables（以降「CDBT」と呼ぶことにする）プラグインのバージョン2の\u003Ca href=\"\u002Fcdbt\u002Fv2\u002Ftutorial\">チュートリアル\u003C\u002Fa>を公開したのに合わせて、連携した記事を書き起こしてみた。原文のチュートリアルの方は技術者向けで表記が硬いので、もう少しライトな感じの記事も公開しておこうと思ったのだ。原文は長いので、こちらの記事ではインストール方法とかのくだりは省略して、ダイレクトに表題のお題を実践してみる。\u003C\u002Fp>\n\u003Ch3>新しいテーブルを作ろう\u003C\u002Fh3>\n\u003Cp>では早速、CDBTプラグインで新しいテーブルを作成していこう。WordPressの管理画面の「CDBT」メニューから「テーブル管理」ページの「テーブル作成」タブを開こう。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-2.png\" alt=\"テーブルの新規作成（1）\" title=\"Create New Table step1\" \u002F>\u003C\u002Fp>\n\u003Cp>このページでは新しく作成したいテーブルの基本設定をすべて行うことができる。\u003Cbr \u002F>\nこの記事では設定項目別の詳しい説明は省略するので、詳しく知りたい場合はドキュメントの\u003Ca href=\"\u002F\u002Fka2.org\u002Fcdbt\u002Fv2\u002Fbasic-info\u002Ftables\u002Fcreate-table\u002F\">テーブル作成 ─ Create Table\u003C\u002Fa>を参照してみてほしい。\u003C\u002Fp>\n\u003Cp>今回、簡易的な製品データベース用のテーブルと製品を評価するためのテーブルの二つを作成して、製品管理ページと製品評価ページをWordPressサイトで公開するところまでをやってみる。\u003C\u002Fp>\n\u003Cp>まず、製品情報を格納する製品管理テーブルを作成していこう。テーブル名は\u003Cem>wp_products\u003C\u002Fem>とする（テーブル名の欄に「wp_products」と入力しよう）。他の項目はそのままで、「テーブル作成SQL」欄の「テーブルクリエイター」をクリックして起動しよう。起動したら、下図を参照してテーブルを設計する。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-3.png\" alt=\"製品管理テーブル: テーブルクリエイター\" \u002F>\u003C\u002Fp>\n\u003Cp>テーブルクリエイターでの設計が終わったら「SQLを適用する」をクリックすると「テーブル作成SQL」欄に下記のSQLが生成される。テーブルクリエイターでの設計が面倒であれば、「テーブル作成SQL」欄の「SQL直接編集」のテキストエリアに下記のSQLをコピー＆ペーストしてもOKだ。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>CREATE TABLE `wp_products` ( \n`ID` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID', \n`product_name` varchar(200) NOT NULL COMMENT 'Product Name', \n`supplier` varchar(200) COMMENT 'Supplier', \n`category` enum('undefined','category-a','category-b','category-c','category-d','category-e') NOT NULL COMMENT 'Category', \n`price` int(11) UNSIGNED NOT NULL DEFAULT 0 COMMENT 'Price', \n`image` mediumblob COMMENT 'Image', \n`reference_url` varchar(255) COMMENT 'Reference URL', \n`description` text COMMENT 'Description', \n`created` datetime NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT 'Created Datetime', \n`updated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 'Updated Datetime', \nPRIMARY KEY(`ID`)  ) \nENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>続いて、作成するテーブルのプラグイン用の設定を行おう。今回のプロジェクトでは、製品管理テーブルへの製品登録やデータ編集はログインしていないユーザーにもアクセス権を与える建付けにするので、下記のようにデータ閲覧・データ登録・データ編集のすべてについてゲストユーザー以上にアクセス権を与えておこう。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-4.png\" alt=\"製品管理テーブル: アクセス権\" \u002F>\u003C\u002Fp>\n\u003Cp>これで製品管理テーブルの設定は完了だ。「テーブル作成」をクリックしよう。\u003C\u002Fp>\n\u003Cp>次に、製品の評価データを収集する製品評価テーブルを作成する。テーブル名は\u003Cem>wp_product repute\u003C\u002Fem>だ（テーブル名の欄に「wp_product_repute」と入力しよう）。今回のプロジェクトでは、評価の仕組みとして評価した日時等は管理しないことにするため、自動追加カラムはプライマリーキーのみにチェックして他はチェックを外そう。それ以外の設定値は特に変更しなくて構わない。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-5.png\" alt=\"製品評価テーブル: 基本設定\" \u002F>\u003C\u002Fp>\n\u003Cp>テーブルクリエイターを起動して、下記のようにテーブルを設計しよう。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-6.png\" alt=\"製品評価テーブル: テーブルクリエイター\" \u002F>\u003C\u002Fp>\n\u003Cp>設計後に生成されるSQLは下記の通りだ。テーブルクリエイターを使わず、下記のSQLをコピペしてテーブルを作っても大丈夫だ。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>CREATE TABLE `wp_product_repute` ( \n`ID` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID', \n`product_id` bigint(20) UNSIGNED NOT NULL COMMENT 'Product ID', \n`rater` varchar(100) COMMENT 'Rater', \n`score` tinyint(4) UNSIGNED NOT NULL DEFAULT 1 COMMENT 'Score', \n`comment` text COMMENT 'Evaluation Comment', \nPRIMARY KEY(`ID`)  ) \nENGINE=InnoDB DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>製品評価テーブルのユーザーのアクセス権も製品管理テーブルと同じ設定でOKだ。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-4.png\" alt=\"製品評価テーブル: アクセス権\" \u002F>\u003C\u002Fp>\n\u003Cp>最後に「テーブル作成」をクリックして、完了だ。\u003Cbr \u002F>\nこれで、製品管理テーブルと製品評価テーブルができた。次にこの二つのテーブルをリレーション（連携）させる。なぜかというと、製品評価テーブルの\u003Cem>product_id\u003C\u002Fem>カラムには製品管理テーブルのプライマリーキーである\u003Cem>ID\u003C\u002Fem>カラムに存在する値しか指定できないようにするためだ。そのためには、\u003Cem>wp_product_repute\u003C\u002Fem>テーブルの\u003Cem>product_id\u003C\u002Fem>カラムに外部キー制約を追加することになる。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-7.png\" alt=\"テーブル編集\" \u002F>\u003C\u002Fp>\n\u003Cp>テーブル管理の「テーブル編集」タブを開き、外部キー制約を追加する\u003Cem>wp_product_repute\u003C\u002Fem>テーブルを選択して「編集テーブルの変更」をクリックしよう。\u003C\u002Fp>\n\u003Cp>「テーブル本体スキーマの変更」セクションの「カスタムSQL（ALTER TABLE）」欄、「SQL直接編集」タブのテキストエリアに外部キー制約追加のSQLを入力する。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-8.png\" alt=\"テーブル編集: 外部キー追加\" \u002F>\u003C\u002Fp>\n\u003Cp>入力するSQLは下記の通りだ。これをコピペしてほしい。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>ALTER TABLE wp_product_repute ADD FOREIGN KEY index_pid (product_id) REFERENCES wp_products (ID) ON DELETE CASCADE ON UPDATE CASCADE;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>これで新規テーブルについての準備はすべて完了した。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 3em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch3>カスタムショートコードを作ろう\u003C\u002Fh3>\n\u003Cp>新しく作成したテーブルをWEBページに出力するために、専用のショートコード（カスタムショートコード）を作成する。\u003Cbr \u002F>\nCDBTプラグインで新しいショートコードを作成するには、WordPressの管理画面の「CDBT」メニューから「ショートコード管理」ページの「ショートコード登録」タブを開く。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-9.png\" alt=\"ショートコードの新規作成（1）\" \u002F>\u003C\u002Fp>\n\u003Cp>上記のページで、新しく作成したいショートコードの各種設定を行っていくことになる。\u003C\u002Fp>\n\u003Cp>今回のプロジェクトでは製品管理テーブルのデータを一覧表示するための\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>のショートコードと、製品管理テーブルに製品データを登録するための\u003Cstrong>[cdbt-entry]\u003C\u002Fstrong>のショートコード、そして製品評価テーブルに評価を入力してもらうための\u003Cstrong>[cdbt-entry]\u003C\u002Fstrong>のショートコードの三つが必要になる。\u003C\u002Fp>\n\u003Cp>まず一つ目のショートコード\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>を作成しよう。「ショートコード登録」タブで「ベースショートコード名」に\u003Ccode>cdbt-view\u003C\u002Fcode>を、「対象テーブル名」に\u003Ccode>wp_products\u003C\u002Fcode>をそれぞれ選択する。すると、参考情報として\u003Cstrong>wp_product\u003C\u002Fstrong>テーブルのカラム情報が表示されるはずだ。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-10.png\" alt=\"ショートコードの新規作成（2）\" \u002F>\u003C\u002Fp>\n\u003Cp>「ショートコードの高度な設定」セクションで、下図の設定項目を参照して設定を行ってほしい。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-11.png\" alt=\"ショートコードの新規作成（3）\" \u002F>\u003C\u002Fp>\n\u003Cp>設定が完了したら、「ショートコードを保存」ボタンをクリックしてカスタムショートコードとして保存する。カスタムショートコードのエイリアスIDが通知されるはずだ。\u003C\u002Fp>\n\u003Cp>続いて二つ目のショートコード\u003Cstrong>[cdbt-entry]\u003C\u002Fstrong>を作成しよう。やり方は一つ目の時と同じで、「ベースショートコード名」に\u003Ccode>cdbt-entry\u003C\u002Fcode>を、「対象テーブル名」に\u003Ccode>wp_products\u003C\u002Fcode>をそれぞれ選択する。そして、「ショートコードの高度な設定」セクションで下図の通り設定項目を指定してほしい。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-12.png\" alt=\"ショートコードの新規作成（4）\" \u002F>\u003C\u002Fp>\n\u003Cp>ショートコードの作成は「ショートコードプレビュー」を利用して、現在の設定によるショートコード出力を確認しながら作成できるのだが、\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>や\u003Cstrong>[cdbt-edit]\u003C\u002Fstrong>のショートコードはテーブル内にデータが存在しないと表示されないため、現時点ではプレビューが有効ではない。プレビューを利用する場合はあらかじめいくつかのデータを登録しておく必要があるのだ。\u003C\u002Fp>\n\u003Cp>これで二つ目のショートコードの設定は完了だ。「ショートコードを保存」ボタンをクリックしてカスタムショートコードとして保存しよう。\u003C\u002Fp>\n\u003Cp>最後に三つめのショートコード、製品評価テーブル用の\u003Cstrong>[cdbt-entry]\u003C\u002Fstrong>を作成しよう。やり方は二つ目の時と同様に、「ベースショートコード名」に\u003Ccode>cdbt-entry\u003C\u002Fcode>を、「対象テーブル名」に\u003Ccode>wp_product_repute\u003C\u002Fcode>をそれぞれ選択すればOKだ。そして、「ショートコードの高度な設定」セクションでの設定項目は下図を見てほしい。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-13.png\" alt=\"ショートコードの新規作成（5）\" \u002F>\u003C\u002Fp>\n\u003Cp>設定後、「ショートコードを保存」ボタンをクリックしてカスタムショートコードとして保存するのを忘れずに。\u003C\u002Fp>\n\u003Cp>さて、これで必要な三つのショートコードが完成した。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 3em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch3>ショートコードをページに設置しよう\u003C\u002Fh3>\n\u003Cp>作成したショートコードをWordPressサイトのページに設置していく。\u003Cbr \u002F>\nまず、設置するショートコードの記述を確認しておく必要がある。そのためには「ショートコード管理」の「ショートコード一覧」タブを開こう。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-14.png\" alt=\"ショートコード一覧\" \u002F>\u003C\u002Fp>\n\u003Cp>一覧表の一番最後に作成した三つのショートコードが一覧表示されてはずだ。それらの「ショートコード名／エイリアスコード」列のエイリアスコードをすべて控えておこう（メモ帳あたりにコピペしておくと良いだろう）。\u003C\u002Fp>\n\u003Cp>次にWordPressの新規投稿画面を開き、下図のような投稿を作成する。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-15.png\" alt=\"新規投稿作成（1）\" \u002F>\u003C\u002Fp>\n\u003Cp>投稿本文（テキスト）は下記の通りだ。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Currently registered product list:\n\n\n\n<hr \u002F>\n\nProduct Registration Form:\n\n\n\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>投稿が完成したら、さっそく「公開」して表示を確認してみよう。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-16.png\" alt=\"製品管理ページ表示\" \u002F>\u003C\u002Fp>\n\u003Cp>この時点では、まだ製品管理テーブルにデータが登録されていないので、\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>のショートコード部分が表示されないが、このページから製品データを登録できるようになっているはずだ。\u003Cbr \u002F>\nでは、実際にいくつかサンプルの製品データを登録してみよう。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-17.jpg\" alt=\"製品管理ページ: サンプルデータ投入後\" \u002F>\u003C\u002Fp>\n\u003Cp>それらしくなって来た…！\u003Cbr \u002F>\n続いて、製品評価用のページを作ってみよう。再びWordPressの新規投稿画面を開いて、下図のような投稿を作成する。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-18.png\" alt=\"新規投稿作成（2）\" \u002F>\u003C\u002Fp>\n\u003Cp>投稿本文（テキスト）は下記の通りだ。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Currently registered product list:\n\n\n\n<hr \u002F>\n\nProduct Evaluation Form:\n\n\n\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>これも「公開」して表示してみる。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-19.png\" alt=\"製品評価ページ\" \u002F>\u003C\u002Fp>\n\u003Cp>これで製品管理ページと製品評価ページが完成だ。\u003C\u002Fp>\n\u003Cp>しかし、このままでは製品データの閲覧や製品評価の入力についてはかなり使い勝手が悪い状態だ。例えば、この時点で製品評価フォームに\u003Cstrong>Product ID\u003C\u002Fstrong>に\u003Ccode>99\u003C\u002Fcode>などの製品管理テーブルのIDカラムにない値を指定してデータ登録を行った場合、外部キー制約に違反して登録に失敗してしまう。しかも、製品についての現在の評価値が表示されていないので、評価してもそれを確認できないのだ。\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 3em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch3>ショートコードをカスタマイズしよう\u003C\u002Fh3>\n\u003Cp>最後の仕上げとして、出力されたショートコードの見た目や処理をカスタマイズして、プロジェクトを完成させよう。\u003C\u002Fp>\n\u003Ch4>データ一覧の見た目をカスタマイズしてみよう\u003C\u002Fh4>\n\u003Cp>\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>や\u003Cstrong>[cdbt-edit]\u003C\u002Fstrong>で出力されるデータ一覧の表示をカスタマイズしていこう。\u003Cbr \u002F>\n現時点のショートコードで出力される製品管理テーブルの表示構造は下記のようになっているはずだ。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">Image\u003C\u002Fth>\n\u003Cth align=\"left\">Product Name\u003C\u002Fth>\n\u003Cth align=\"left\">Supplier\u003C\u002Fth>\n\u003Cth align=\"left\">Category\u003C\u002Fth>\n\u003Cth align=\"left\">Price\u003C\u002Fth>\n\u003Cth align=\"left\">Description\u003C\u002Fth>\n\u003Cth align=\"left\">Reference URL\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"left\">画像ファイル\u003C\u002Ftd>\n\u003Ctd align=\"left\">製品名\u003C\u002Ftd>\n\u003Ctd align=\"left\">供給元\u003C\u002Ftd>\n\u003Ctd align=\"left\">カテゴリー名\u003C\u002Ftd>\n\u003Ctd align=\"left\">価格\u003C\u002Ftd>\n\u003Ctd align=\"left\">説明\u003C\u002Ftd>\n\u003Ctd align=\"left\">参照URL\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>この表示を下記のように変更してみよう。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth align=\"left\">Image\u003C\u002Fth>\n\u003Cth align=\"left\">Product Name\u003C\u002Fth>\n\u003Cth align=\"left\">Supplier\u003C\u002Fth>\n\u003Cth align=\"left\">Category\u003C\u002Fth>\n\u003Cth align=\"left\">Price\u003C\u002Fth>\n\u003Cth align=\"left\">Description\u003C\u002Fth>\n\u003Cth align=\"left\">Repute\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd align=\"left\">画像ファイル\u003C\u002Ftd>\n\u003Ctd align=\"left\">参照URLへのリンク付き製品名\u003C\u002Ftd>\n\u003Ctd align=\"left\">供給元\u003C\u002Ftd>\n\u003Ctd align=\"left\">カテゴリー名\u003C\u002Ftd>\n\u003Ctd align=\"left\">単位「$」付き価格\u003C\u002Ftd>\n\u003Ctd align=\"left\">ポップアップ形式の説明リンク\u003C\u002Ftd>\n\u003Ctd align=\"left\">平均の評価スコア\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>さらに、製品のカテゴリーによって行の背景色も変更してみる。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>や\u003Cstrong>[cdbt-edit]\u003C\u002Fstrong>で表示されるデータ一覧の表示をカスタマイズする時には、CDBTプラグインに用意されている\u003Ca href=\"\u002Fcdbt\u002Fv2\u002Ffilter-reference\u002Fcdbt_shortcode_custom_columns\">\u003Cstrong>cdbt_shortcode_custom_columns\u003C\u002Fstrong>フィルター\u003C\u002Fa>と\u003Ca href=\"\u002Fcdbt\u002Fv2\u002Ffilter-reference\u002Fcdbt_shortcode_custom_component_options\">\u003Cstrong>cdbt_shortcode_custom_component_options\u003C\u002Fstrong>フィルター\u003C\u002Fa>を使えば良い。それぞれのフィルター処理をテーマの\u003Ccode>functions.php\u003C\u002Fcode>に追加していこう。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function custom_wp_products_crud_get_data_sql( $sql, $table_name, $sql_clauses ) {\n  if ( in_array( get_post()->post_title, array( 'Product evaluation page', 'Product registration page' ) ) && 'wp_products' === $table_name ) {\n    if ( strpos( $sql_clauses[0], 'image' ) !== false ) {\n      \u002F\u002F Join of table (outer join)\n      $_overwrite_sql = <<<SQL\nSELECT p.image,p.product_name,p.supplier,p.category,p.price,p.description,p.reference_url,AVG(r.score) as repute \nFROM wp_products p\nLEFT OUTER JOIN wp_product_repute r ON p.ID=r.product_id \nGROUP BY p.ID \nORDER BY p.product_name ASC \nSQL;\n      $sql = $_overwrite_sql;\n    }\n  }\n  return $sql;\n}\nadd_filter( 'cdbt_crud_get_data_sql', 'custom_wp_products_crud_get_data_sql', 10, 3 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>まず\u003Ca href=\"\u002Fcdbt\u002Fv2\u002Ffilter-reference\u002Fcdbt_crud_get_data_sql\">\u003Cstrong>cdbt_crud_get_data_sql\u003C\u002Fstrong>フィルター\u003C\u002Fa>を使い、\u003Cstrong>wp_products\u003C\u002Fstrong>テーブルに製品評価テーブルの各\u003Cstrong>product_id\u003C\u002Fstrong>ごとの\u003Cstrong>score\u003C\u002Fstrong>カラムの平均値を\u003Cstrong>repute\u003C\u002Fstrong>カラムとして外部結合（OUTER JOIN）する。これによって、製品管理ページのショートコード\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>で新カラム（別名カラム）\u003Cstrong>repute\u003C\u002Fstrong>を取り扱うことができるようになるのだ。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function custom_wp_products_cdbt_shortcode_custom_columns( $columns, $shortcode_name, $table ) {\n  if ( in_array( get_post()->post_title, array( 'Product evaluation page', 'Product registration page' ) ) && in_array( $shortcode_name, array( 'cdbt-view', 'cdbt-edit' ) ) && 'wp_products' === $table ) {\n    foreach ( $columns as $_i => $_column ) {\n      $_custom_column = '';\n      switch( $_column['property'] ) {\n        case 'product_name':\n          \u002F\u002F Add a tag for link\n          $_custom_column = 'rowData.reference_url != \"\" ? $(\"<a\u002F>\").attr(\"href\",_.unescape(rowData.reference_url)).attr(\"target\",\"_blank\").text(_.unescape(rowData.product_name)) : rowData.product_name';\n          break;\n        case 'price':\n          \u002F\u002F Add string of unit as prefix\n          $_custom_column = '\"$ \" + rowData.price';\n          break;\n        case 'description':\n          \u002F\u002F Add a popup link\n          $_custom_column = 'rowData.description != \"\" ? $(\"<a\u002F>\").attr(\"href\",\"javascript:;\").attr(\"class\",\"collapse-col-data btn btn-default btn-sm\").data(\"raw\",_.unescape(rowData.description)).text(\"More\") : \"-\"';\n          break;\n        case 'reference_url':\n          \u002F\u002F Do not show\n          unset( $columns[$_i] );\n          break;\n      }\n      if ( ! empty( $_custom_column ) ) \n        $columns[$_i]['customColumnRenderer'] = $_custom_column;\n    }\n    \u002F\u002F Add new column\n    $columns = array_merge( $columns, array( \n      array(\n        'label' => 'Repute', \n        'property' => 'repute', \n        'sortable' => true, \n        'sortDirection' => 'asc', \n        'dataNumric' => true, \n        'truncateStrings' => '0', \n        'className' => '', \n        'customColumnRenderer' => 'rowData.repute != null ? Number(rowData.repute) : \"Unrated\"'\n      )\n    ) );\n  }\n\n  return $columns;\n}\nadd_filter( 'cdbt_shortcode_custom_columns', 'custom_wp_products_cdbt_shortcode_custom_columns', 10, 3 );\n\nfunction custom_wp_products_cdbt_shortcode_custom_component_options( $component_options, $shortcode_name, $table ){\n  if ( in_array( get_post()->post_title, array( 'Product evaluation page', 'Product registration page' ) ) && in_array( $shortcode_name, array( 'cdbt-view', 'cdbt-edit' ) ) && 'wp_products' === $table ) {\n    $_custom_script = <<<EJS\nvar bgcolor = '#ececec', txtcolor = '#333';\nswitch( helpers.rowData.category ){\n  case 'category-a':\n    bgcolor = '#8fc31f';\n    break;\n  case 'category-b':\n    bgcolor = '#fff100';\n    break;\n  case 'category-c':\n    bgcolor = '#e60012';\n    txtcolor = '#fff';\n    break;\n  case 'category-d':\n    bgcolor = '#f39800';\n    break;\n  case 'category-e':\n    bgcolor = '#e4007f';\n    txtcolor = '#fff';\n    break;\n}\nitem.css({ backgroundColor: bgcolor, color: txtcolor });\nEJS;\n    if ( ! isset( $component_options['customRowScripts'] ) ) {\n      $component_options['customRowScripts'] = array( $_custom_script );\n    } else {\n      $component_options['customRowScripts'][] = $_custom_script;\n    }\n  }\n\n  return $component_options;\n}\nadd_filter( 'cdbt_shortcode_custom_component_options', 'custom_wp_products_cdbt_shortcode_custom_component_options', 10, 3 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>そして、上記のフィルターフックでショートコードで出力される一覧表の列と行についてカスタマイズを行う。\u003Cbr \u002F>\nこのカスタマイズが反映されたショートコード\u003Cstrong>[cdbt-view]\u003C\u002Fstrong>は下記のように表示される。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-20.jpg\" alt=\"カスタマイズ後のcdbt-view\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cdiv class=\"clearfix\" style=\"margin-bottom: 3em;\">\u003C\u002Fdiv>\u003C\u002Fp>\n\u003Ch4>データ登録フォームをカスタマイズする\u003C\u002Fh4>\n\u003Cp>今度は\u003Cstrong>[cdbt-entry]\u003C\u002Fstrong>で出力されるデータ登録フォームの表示をカスタマイズする。\u003Cbr \u002F>\n登録フォームの表示をカスタマイズする時には、CDBTプラグインに用意されている\u003Ca href=\"\u002Fcdbt\u002Fv2\u002Ffilter-reference\u002Fcdbt_shortcode_custom_forms\">\u003Cstrong>cdbt_shortcode_custom_forms\u003C\u002Fstrong>フィルター\u003C\u002Fa>を使う。フィルター処理の追加場所はテーマの\u003Ccode>functions.php\u003C\u002Fcode>だ。\u003C\u002Fp>\n\u003Cp>今回のプロジェクトでは、製品評価フォームに対して次のようなカスタマイズを行ってみよう。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>評価対象を入力する\u003Cstrong>product_id\u003C\u002Fstrong>フィールドについて、製品管理テーブルに存在する製品IDのみが入力されるように選択式フィールドに変更する。\u003C\u002Fli>\n\u003Cli>入力項目の並び順を変更する。\u003C\u002Fli>\n\u003Cli>評価フィールドを10段階評価の選択式フィールドに変更する。\u003C\u002Fli>\n\u003Cli>評価コメントフィールドの初期サイズを変更し、補足テキストを追加する。\u003C\u002Fli>\n\u003Cli>各フィールドの項目ラベルを変更する。 \u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre>\u003Ccode>function custom_wp_product_repute_cdbt_shortcode_custom_forms( $elements_options, $shortcode_name, $table ){\n  if ( 'Product evaluation page' === get_post()->post_title && 'cdbt-entry' === $shortcode_name && 'wp_product_repute' === $table ) {\n    global $cdbt;\n    $result = $cdbt->get_data( 'wp_products', ['ID','product_name'], [], ['product_name'=>'ASC'], 'ARRAY_A' );\n    $values = [];\n    foreach ( $result as $_i => $_v ) {\n      $values[] = $_v['product_name'] .':'. $_v['ID'];\n    }\n    foreach ( $elements_options as $_i => $_option ) {\n      if ( 'product_id' === $_option['elementName'] ) {\n        $elements_options[$_i]['elementLabel'] = __('Product Name');\n        $elements_options[$_i]['elementType'] = 'select';\n        $elements_options[$_i]['selectableList'] = implode( ',', $values );\n        $elements_options[$_i]['helperText'] = __('Please choose the name of product to evaluate.');\n        $_new_elements_options[0] = $elements_options[$_i];\n      }\n      if ( 'rater' === $_option['elementName'] ) {\n        $elements_options[$_i]['elementLabel'] = __('Your Name');\n        $elements_options[$_i]['elementSize'] = 6;\n        $_new_elements_options[2] = $elements_options[$_i];\n      }\n      if ( 'score' === $_option['elementName'] ) {\n        $elements_options[$_i]['elementLabel'] = __('Your Score');\n        $elements_options[$_i]['elementType'] = 'select';\n        $elements_options[$_i]['selectableList'] = '1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,9:9,10:10';\n        $elements_options[$_i]['defaultValue'] = '5';\n        $elements_options[$_i]['helperText'] = __('On a scale of one to ten, how would you rate that product?');\n        $_new_elements_options[1] = $elements_options[$_i];\n      }\n      if ( 'comment' === $_option['elementName'] ) {\n        $elements_options[$_i]['helperText'] = __('Please enter here if you have any comments.');\n        $elements_options[$_i]['elementExtras'] = array( 'rows' => 4 );\n        $_new_elements_options[3] = $elements_options[$_i];\n      }\n    }\n    $_new_orders = array( 1, 3, 2, 4 );\n    array_multisort( $_new_orders, $elements_options );\n  }\n  return $elements_options;\n}\nadd_filter( 'cdbt_shortcode_custom_forms', 'custom_wp_product_repute_cdbt_shortcode_custom_forms', 10, 3 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>このカスタマイズが反映されたショートコード\u003Cstrong>[cdbt-entry]\u003C\u002Fstrong>は下記のように表示されるはずだ。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ftutorial-screenshot-21.png\" alt=\"カスタマイズ後のcdbt-entry\" \u002F>\u003C\u002Fp>\n\u003Cp>これで製品管理／製品評価プロジェクトは完成だ。\u003Cbr \u002F>\nこのサンプルプロジェクトは、デモサイト「\u003Ca href=\"http:\u002F\u002Fdemo.ka2.org\">http:\u002F\u002Fdemo.ka2.org\u003C\u002Fa>」で公開中している。\u003Cbr \u002F>\n実際にそちらのデモで製品登録や製品評価が試せるので、やってみてほしい。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"http:\u002F\u002Fdemo.ka2.org\u002Fproduct-registration-page\u002F\">製品管理ページ（サンプル）\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"http:\u002F\u002Fdemo.ka2.org\u002Fproduct-evaluation-page\u002F\">製品評価ページ（サンプル）\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n",[276,279],{"slug":277,"name":278},"customdatabasetables","CustomDataBaseTables",{"slug":280,"name":280},"demo",[282,285,292,299],{"slug":6,"title":7,"date":8,"excerpt":9,"image":10,"categories":283},[284],{"slug":13,"name":7},{"slug":286,"title":287,"date":288,"excerpt":289,"image":42,"categories":290},"on-september-28-released-version-2-of-custom-database-tables-plugin","9月28日にCustomDataBaseTablesプラグインのバージョン2をリリースします","2015-09-24T14:05:18","長らくお待たせしました。 当初、6月とか7月頃のリリース予定だったのですが、ここまで延びる破目（はめ）になるとは…まさに、自分的にも予想外です。 いやはや、長かった…というのが率直な感想です。特に今月に入ってからの動作検…",[291],{"slug":13,"name":7},{"slug":293,"title":294,"date":295,"excerpt":296,"image":42,"categories":297},"custom-database-tables-version-2-demo-site-open","Custom DataBase Tables Version 2 デモサイト公開","2015-07-29T00:00:43","先月末に告知してから1か月も遅くなってしまいましたが、「Custom DataBase Tables」プラグインの次期バージョンを体験できるデモサイトをようやく公開できました。7月は何気に色々忙しくて、ほとんど開発が進ま…",[298],{"slug":13,"name":7},{"slug":300,"title":301,"date":302,"excerpt":303,"image":42,"categories":304},"customdatabasetables-version-2-coming-soon","CustomDataBaseTables Version 2 coming soon!","2015-06-22T11:27:44","WordPress用データベース管理プラグイン「CustomDataBaseTables（以下CDBTと呼称）」のメジャーバージョンアップを近日行います。 いやはや、本当は6月上旬にもリリースしようと考えていたのですが、…",[305],{"slug":13,"name":7},{"slug":307,"title":308,"date":309,"excerpt":310,"image":311,"categories":312},"facebook-page-as-monaural-sound","お知らせ：Monaural Soundのfacebookページを公開","2016-04-08T14:34:03","このたび、facebookページを作成して公開しました（今更ですが…）。 facebook – Monaural Sound 今後、facebookページでは、主に各プラグインの最新情報などを随時発信していこ…","\u002Fassets\u002Fuploads\u002F2016\u002F04\u002Ffb_page_eyecatch.png",[313],{"slug":255,"name":256},{"slug":315,"title":316,"date":317,"excerpt":318,"image":319,"categories":320},"let-dye-gray-beard-by-color-shampoo","髭の白髪を染めるのは毛染めシャンプーが最適","2016-05-14T16:39:35","最近、髭を伸ばしているのだが、形を整えても白髪が多くていまいち決まらない。まだ40代になったばかりなのにかなり白髪が増えてしまったもんだ…それだけ、今まで苦労して来たのかなぁ…(苦笑) まぁ、歳と共に白髪が増えるのは仕方…","\u002Fassets\u002Fuploads\u002F2016\u002F05\u002Fshared-img-thumb-N811_higewoijirudansei_TP_V.jpg",[321],{"slug":255,"name":256},1793391397830]