[{"data":1,"prerenderedAt":317},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f1erm5qmutia8k":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":203,"categories":270,"modified":272,"html":273,"tags":274,"related":290,"prev":303,"next":310},"mhrise-skill-simulator-creation-chapter-4","モンスターハンターライズのスキルシミュレータを作ってみる！ 第4回","2021-04-14T18:34:50","さて、この回から実際の開発に入っていくのだが、まずはローカルPCなどに開発環境を準備する必要がある。開発環境用のサーバを利用しても良いのだが、今回はVue.jsを利用するために、都度ソースのトランスパイル・ビルドが発生…",[271],{"slug":22,"name":23},"2021-04-26T16:18:01","\u003Cp>　さて、この回から実際の開発に入っていくのだが、まずはローカルPCなどに開発環境を準備する必要がある。開発環境用のサーバを利用しても良いのだが、今回はVue.jsを利用するために、都度ソースのトランスパイル・ビルドが発生することになる。このビルドはPC側に結構なパフォーマンスを求めるので、比較的搭載メモリが多いローカルPCの方がビルド時間の短縮になり、開発効率が上がる。\u003Cbr \u002F>\n　各社クラウドプラットフォームの無料枠等で準備した最小構成のサーバ・インスタンス等の場合、トランスパイルするソース量にもよるが、ビルドに1分以上かかることもある。その場合、軽微なソース修正のたびに待ち時間が発生してしまい、効率がかなり悪いのだ。ある程度のメモリ（8GB以上は欲しいかも）が搭載されたPCであれば、アプリケーション開発用のマシンとして、ストレスなく稼働してくれるはずだ。\u003Cbr \u002F>\n　ちなみに、私の開発環境および公開環境は下記のようになっている。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>デスクトップ（メインPC）\u003C\u002Fth>\n\u003Cth>ラップトップ（サブPC）\u003C\u002Fth>\n\u003Cth>公開環境\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>OS\u003C\u002Ftd>\n\u003Ctd>Windows 10\u003C\u002Ftd>\n\u003Ctd>macOS Catalina\u003C\u002Ftd>\n\u003Ctd>Cent OS 7\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>CPU\u003C\u002Ftd>\n\u003Ctd>4コア（Core i7） 3.40GHz\u003C\u002Ftd>\n\u003Ctd>4コア（Core i5） 2.3GHz\u003C\u002Ftd>\n\u003Ctd>共用（最大28コア）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>メモリ\u003C\u002Ftd>\n\u003Ctd>20GB\u003C\u002Ftd>\n\u003Ctd>8GB\u003C\u002Ftd>\n\u003Ctd>共用（最大384GB）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>仮想環境\u003C\u002Ftd>\n\u003Ctd>XAMPP 8.0.3\u003C\u002Ftd>\n\u003Ctd>MANP\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>PHP\u003C\u002Ftd>\n\u003Ctd>8.0.3\u003C\u002Ftd>\n\u003Ctd>8.0.0\u003C\u002Ftd>\n\u003Ctd>8.0.0\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>MySQL\u003C\u002Ftd>\n\u003Ctd>5.7.33\u002F8.0.23（スイッチ可能）\u003C\u002Ftd>\n\u003Ctd>5.7.32\u003C\u002Ftd>\n\u003Ctd>5.7.32\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Apache\u003C\u002Ftd>\n\u003Ctd>2.4.46（XAMPPバンドル版）\u003C\u002Ftd>\n\u003Ctd>2.4.46\u003C\u002Ftd>\n\u003Ctd>2.4.46\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Node.js\u003C\u002Ftd>\n\u003Ctd>12.16.3\u003C\u002Ftd>\n\u003Ctd>12.6.0\u003C\u002Ftd>\n\u003Ctd>14.15.5\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>npm\u003C\u002Ftd>\n\u003Ctd>6.14.4\u003C\u002Ftd>\n\u003Ctd>6.14.5\u003C\u002Ftd>\n\u003Ctd>6.14.11\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>yarn\u003C\u002Ftd>\n\u003Ctd>1.17.3\u003C\u002Ftd>\n\u003Ctd>1.17.3\u003C\u002Ftd>\n\u003Ctd>1.22.10\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>git\u003C\u002Ftd>\n\u003Ctd>2.31.1.windows.1\u003C\u002Ftd>\n\u003Ctd>2.21.0\u003C\u002Ftd>\n\u003Ctd>1.8.3.1\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Composer\u003C\u002Ftd>\n\u003Ctd>2.0.12\u003C\u002Ftd>\n\u003Ctd>2.0.12\u003C\u002Ftd>\n\u003Ctd>2.0.12\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>　※ XAMPPはバージョン8以降で、MANPなら最新の6.3で、PHP 8が使用できる。\u003Cbr \u002F>\n　※ XAMPPにバンドルされているデータベースはMySQL互換の「MariaDB」となる。MariaDBでもJSON型は取り扱えるが、内部的にBlob型のバイナリデータとして扱われるため、応答値がエスケープされていたりして、カラムに投入されたJSONデータの正当性を担保できないケースが生じる。正しいJSONデータのやり取りを担保するには、MySQL 5.7以降のバージョンを使うのが望ましい。XAMPP環境下でMySQL 5.7を利用する方法は、下記の記事を参考にして欲しい。\u003C\u002Fp>\n\u003Cblockquote>\u003Cp>\n  \u003Ca href=\"\u002Frunning-mysql57-in-xampp\">XAMPP環境で MySQL 5.7 を動かす\u003C\u002Fa>\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Cp>　ちなみに、私の主力機のデスクトップは10年前（2011年）に発売された「DELL XPS8300」で、だいぶ年季の入った機体なんだが、メモリ増強してストレージをSSDに換装してあるので、全くストレスを感じることなく稼働している。\u003C\u002Fp>\n\u003Ch2>プロジェクトを作る\u003C\u002Fh2>\n\u003Cp>　では、今回の開発用にローカルPCの仮想環境下にプロジェクト用のディレクトリを作成する。今回はフロントエンドをVue.jsで開発するので、Vueプロジェクトのアプリケーションとして始動させることにする。まずVue.jsのコマンドラインツールをインストールする。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> global\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> @vue\u002Fcli\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>──そして、vueコマンドからプロジェクトを作成する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">vue\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> create\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> mhr-simulator\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　すると、プロジェクトのVue環境を聞かれるので、\u003Ccode>Default ([Vue 2] babel, eslint)\u003C\u002Fcode>を選ぶ。今回はフロントエンドにVuetifyを使うので、Vueのバージョンは2にしておく必要があるのだ。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">Vue\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> CLI\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> v4.5.12\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Please pick a preset: (\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">Use\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> arrow\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> keys\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> Default ([Vue 2] babel, eslint)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  Default\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (Vue \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">3\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> Preview\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) ([Vue 3] babel, eslint)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">  Manually\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> select\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> features\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">   \u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　少し待てば、基本ファイルセットが含まれたプロジェクト用のディレクトリ\u003Ccode>mhr-simulator\u003C\u002Fcode>が生成される。なお、この段階では、これ以上Vue.js側に手を加えない。\u003Cbr \u002F>\n　次に、このプロジェクト用ディレクトリ内にPHPの環境を追加していく。ディレクトリ内に移動して、Composerインストール用にJSONファイルを作る。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> mhr-simulator\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">touch\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> composer.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　出来上がった空ファイルの\u003Ccode>composer.json\u003C\u002Fcode>に、PHPクラスのオートローダをインストールするように設定を追加する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"autoload\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"psr-4\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">            \"MHRise\\\\SkillSimulator\\\\\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"apps\u002F\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　あとは、下記のコマンドでオートローダをインストールするだけだ。もしComposer本体をインストールしていないならば、そちらを先にやる必要がある。Composer自体のインストール方法はいたるところで紹介されているので、ここでは省略する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">composer\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> install\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　\u003Ccode>vendor\u003C\u002Fcode>ディレクトリが作成されて、その中にオートローダスクリプトがインストールされているはずだ。これでPHP側の準備も完了だ。\u003C\u002Fp>\n\u003Ch2>アプリケーションのエンドポイントを決める\u003C\u002Fh2>\n\u003Cp>　今回のアプリケーションに対するユーザー導線を考えてみると、3つの経路が想定される。\u003C\u002Fp>\n\u003Cfigure class=\"wp-block-image size-large\">\n\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"\u002Fassets\u002Fuploads\u002F2021\u002F04\u002Fmhr_scheme_2.png\" alt=\"END POINT\" \u002F>\u003Cfigcaption style=\"text-align: right;\">\u003Ca href=\"https:\u002F\u002Fwww.freepik.com\u002Fvectors\u002Fpeople\">People vector created by muammark – www.freepik.com\u003C\u002Fa>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\n\u003Cp>　エンドポイントとは、ユーザーが直接アクセスするアプリケーションの出入口のことだ。WEBサイトで云えば、エントリーページとなる\u003Ccode>index.html\u003C\u002Fcode>や\u003Ccode>home.html\u003C\u002Fcode>等がエンドポイントと云えるだろう。今回のアプリケーションでは、アプリケーションの利用者となるエンドユーザ用のエンドポイントとして\u003Ccode>index.php\u003C\u002Fcode>を準備し、データ管理者用に\u003Ccode>admin.php\u003C\u002Fcode>を、一括データ投入用に\u003Ccode>bulk.php\u003C\u002Fcode>をそれぞれ設置する。\u003Ccode>admin.php\u003C\u002Fcode>や\u003Ccode>bulk.php\u003C\u002Fcode>はいわゆる管理画面的な位置づけになり、エンドユーザからのアクセスを許可しない制限されたエンドポイントとなる想定だ。なお、\u003Ccode>bulk.php\u003C\u002Fcode>については、特にGUIを準備する必要性が乏しいので、コマンドラインから直接データを一括投入できるようなもので事足りると考えている。\u003C\u002Fp>\n\u003Ch2>コアクラスの製造\u003C\u002Fh2>\n\u003Cp>　エンドポイントが決まったら、まずはバルクユーザ向けの経路を作って行くことにする。この経路が動くようになれば、データベースに初期データを投入するのが楽になり、その後の開発がしやすくなるからだ。\u003Cbr \u002F>\n　そのために真っ先にやらなければならないのが、PHPでデータベースと接続して、PHPからデータベースを操作できるようにすることだ。そこで、アプリケーションの中核として、コアクラスを作り、そのメソッドとしてデータベースハンドラを準備する。\u003C\u002Fp>\n\u003Ch3>抽象クラスを使う\u003C\u002Fh3>\n\u003Cp>　アプリケ―ションのコアクラスを作る前に、前段として抽象クラス（Abstract Class）を準備する。抽象クラスとはそれを継承するクラスのひな形となるスキーマ的なクラスで、同様の機能を持っているインターフェースよりも縛りが緩いものだ、という解釈で大まかにはイイと思う。もっと詳しく云うと、抽象クラスやインターフェースで宣言されたメソッドは、継承先のクラスで実装が強制される。さらに抽象クラスでは、通常のメソッドも定義できるため、アプリケーション全体で共通的に使用するような処理をあらかじめ定義しておくことができる。一方で、インターフェースはメソッドの定義はできないが、複数のインターフェースを継承させる「多重継承」ができる。\u003Cbr \u002F>\n　アプリケーションの建付け的に、エンドポイントごとにファイナルクラスを準備する予定なので、それらで共通利用するデータベースハンドラについては抽象クラスに定義しておいた方が効率的なのである。他に、データベースハンドラ系の処理はトレイトにしてしまい、各クラスでそのトレイトを\u003Ccode>use\u003C\u002Fcode>するという手段もある。今回のアプリケーションの場合、抽象クラスを継承した方が、コードの見通しが良いだろうという判断だ。\u003C\u002Fp>\n\u003Cp>　前述のPHPクラスのオートローダ設定にて、PHPのクラスは\u003Ccode>apps\u003C\u002Fcode>ディレクトリから読み込まれるようになっているので、\u003Ccode>apps\u003C\u002Fcode>ディレクトリを作り、抽象クラスとバルクユーザ用のコアクラスのファイルを作成しよう。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">mkdir\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> apps\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> apps\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">touch abstractClass.php bulkCore.php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　とりあえず、実践あるのみだ。抽象クラスとコアクラスを使ったDB接続の試験をしてみよう。最初に抽象クラス側を下記のようにする。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>abstractClass.php:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">namespace\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> MHRise\\SkillSimulator\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">class_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'abstractClass'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">abstract\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> abstractClass\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    protected\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $cmd;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    public\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> __construct\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        private\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $dbname,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        private\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $dbuser,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        private\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> string\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $dbpass,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">        private\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> int\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">    $dbport \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> 3306\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">cmd \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> sprintf\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'mysql -u %s -p%s -P %d -D %s'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">dbuser, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">dbpass, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">dbport, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">$this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">dbname );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    abstract\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> public\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> execute\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">string\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $query );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">endif\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　ちょっとだけ解説しておこう。コンストラクタの部分は、PHP 8で導入されたプロパティ・プロモーションで書いているので、PHP7以前のバージョンではエラーになる。抽象クラスでは、コンストラクタとしてデータベースの接続情報（DSN: Data Source Name）を引数で受けてクラスのプロパティに展開している。抽象メソッドとして、データベースクエリを実行するための\u003Ccode>execute()\u003C\u002Fcode>が宣言されているので、継承先のクラスではこのメソッドの定義が強制される。\u003C\u002Fp>\n\u003Ch3>抽象クラスを継承するコアクラス\u003C\u002Fh3>\n\u003Cp>　次に、抽象メソッドを継承するコアクラス側のサンプルをコーディングする。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>bulkCore.php:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">namespace\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> MHRise\\SkillSimulator\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">class_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'bulkCore'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">class\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> bulkCore\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> extends\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> abstractClass\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    public\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> execute\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">string\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> $query ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        $fixed_cmd \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> $this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">cmd \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">.\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> sprintf\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">' -t -e \"%s\"'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, $query );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        system\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( $fixed_cmd );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">endif\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　コアクラスでは、抽象クラスで強制された抽象メソッド\u003Ccode>execute()\u003C\u002Fcode>を必ず定義しなければならない。その際、アクセス修飾子（\u003Ccode>public\u003C\u002Fcode>や\u003Ccode>protected\u003C\u002Fcode>、\u003Ccode>private\u003C\u002Fcode>）や、引数の数と型も抽象クラス側で定義されたものと一致させる必要がある。\u003Cbr \u002F>\n　このサンプルコードでは、文字列としてSQLクエリを受け取って、コマンドラインからSQLクエリを実行するためのコマンドを生成し実行する流れだ。あくまで動作テスト用のサンプル処理なので、値の検証や例外処理等は入れていない。\u003C\u002Fp>\n\u003Ch3>エンドポイント用ファイルの作成と実行\u003C\u002Fh3>\n\u003Cp>　そして最後に、エンドポイント用のファイルを準備する。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> ..\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">touch\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> bulk.php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　エンドポイントのファイルでは、コアクラスをインスタンス化して、必要なメソッドを実行することになる。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>bulk.php:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\"><?\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">require_once\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">__DIR__\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> .\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> '\u002Fvendor\u002Fautoload.php'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">use\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> MHRise\\SkillSimulator\\bulkCore\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">if\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ( \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">class_exists\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'MHRise\\SkillSimulator\\bulkCore'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> ) ) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $instance \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> bulkCore\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'mhr_simulator_db'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'username'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'password'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">3306\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    $instance\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">->\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">execute\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">( \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">'show tables'\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">} \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">else\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    exit\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　クラスをインスタンス化する際に、受け渡すデータベースに接続するためのユーザ名やパスワード、ポート番号等は稼働する環境に準じて変更する必要がある。この例では、接続したデータベースに存在するテーブルの一覧を表示するためのクエリ\u003Ccode>show tables\u003C\u002Fcode>を実行する想定だ。\u003Cbr \u002F>\n　では、実際にエンドポイントのPHPファイルをコマンドラインから実行してみよう。\u003C\u002Fp>\n\u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> php bulk.php\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">mysql:\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> [Warning] Using a password on the command line interface can be insecure.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">+----------------------------+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">|\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> Tables_in_mhr_simulator_db\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">+----------------------------+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">|\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> armors\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">                     |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">|\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> decorations\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">                |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">|\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> talismans\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">                  |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">|\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> weapons\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">                    |\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">+----------------------------+\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　無事に今回のアプリケーション用に作ったデータベースのテーブル一覧が表示された。なお、MySQLが警告を出しているのは、PHPが内部で実行しているコマンドライン上のmysqlコマンドにパスワードが直接引数で渡されているからだ。\u003C\u002Fp>\n\n\u003Cp>　この一連の処理の流れが、今回のアプリケーションのバックエンドの基本となる。どのエンドポイントを辿って来ても基本的に同じようなクラス連携を経て、データベースとのやり取りが行われるのだ。\u003Cbr \u002F>\n　ということで、今回はここまで。\u003C\u002Fp>\n\u003Cp>　\u003Ca href=\"\u002Fmhrise-skill-simulator-creation-chapter-5\">次回\u003C\u002Fa>は、バルクユーザ用のエンドポイント\u003Ccode>bulk.php\u003C\u002Fcode>を仕上げる。\u003C\u002Fp>\n",[275,278,281,284,287],{"slug":276,"name":277},"mhrise","MHRise",{"slug":279,"name":280},"%e3%82%b7%e3%83%9f%e3%83%a5%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc","シミュレーター",{"slug":282,"name":283},"%e3%82%b9%e3%82%ad%e3%83%ab","スキル",{"slug":285,"name":286},"%e3%83%a2%e3%83%b3%e3%82%b9%e3%82%bf%e3%83%bc%e3%83%8f%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%a9%e3%82%a4%e3%82%ba","モンスターハンターライズ",{"slug":288,"name":289},"%e3%83%a2%e3%83%b3%e3%83%8f%e3%83%b3%e3%83%a9%e3%82%a4%e3%82%ba","モンハンライズ",[291,294,297,300],{"slug":199,"title":200,"date":201,"excerpt":202,"image":203,"categories":292},[293],{"slug":22,"name":23},{"slug":207,"title":208,"date":209,"excerpt":210,"image":203,"categories":295},[296],{"slug":22,"name":23},{"slug":214,"title":215,"date":216,"excerpt":217,"image":203,"categories":298},[299],{"slug":22,"name":23},{"slug":221,"title":222,"date":223,"excerpt":224,"image":203,"categories":301},[302],{"slug":22,"name":23},{"slug":304,"title":305,"date":306,"excerpt":307,"image":203,"categories":308},"mhrise-skill-simulator-creation-chapter-3","モンスターハンターライズのスキルシミュレータを作ってみる！ 第3回","2021-04-11T17:29:43","今回はアプリケーションの基本設計を行っていく。 第1回でまとめた要件定義の内容を簡単な図にしてみると、 ──こんな感じになる。処理の流れとしては、フロントエンド側のページ（UI）は「Vue.js」と「Vuetify」…",[309],{"slug":22,"name":23},{"slug":311,"title":312,"date":313,"excerpt":314,"image":203,"categories":315},"mhrise-skill-simulator-creation-chapter-5","モンスターハンターライズのスキルシミュレータを作ってみる！ 第5回","2021-04-17T17:07:24","前回サンプル的に作成した一括データ投入用のエンドポイントbulk.phpでは、インスタンス化するクラスに直接データベースの接続情報を受け渡してDBに接続していたが、これはセキュリティ的に良くない。ソースコード内に機密情…",[316],{"slug":22,"name":23},1793391397027]