[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"$ft6jtkd6xhw3c":3,"$f9wm7xy4ogwj0":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":28,"title":29,"date":30,"excerpt":31,"image":32,"categories":266,"modified":268,"html":269,"tags":270,"related":285,"prev":307,"next":315},[267],{"slug":35,"name":36},"2019-03-04T20:40:14","\u003Cp>　現在開発しているサービスで利用するべく、横型タイムラインを生成できるjQueryプラグインを自作したので、そこだけ単独でリリースしてみた。\u003C\u002Fp>\n\u003Cp>　ソースコード等はGitHubの方にリリースしてあるので、興味のある方は、\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fjquery.timeline\">そちら\u003C\u002Fa>を見てください。\u003C\u002Fp>\n\u003Cp>　で、GitHubの方のマニュアルは英語版なので、日本語版のマニュアルはこちらのサイトに公開しておこうかと。以下がそのマニュアルになります。\u003C\u002Fp>\n\u003Chr \u002F>\n\u003Ch1>jQuery.Timeline\u003C\u002Fh1>\n\u003Cp>　このjQueryプラグインを使うことで、二種類の横型タイムラインを簡単に作成できます。\u003C\u002Fp>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\u002F\u002Fka215.github.io\u002Fjquery.timeline\u002Fimgs\u002Fjquery_timeline_image.png\" alt=\"プラグイン・イメージ\" \u002F>\u003C\u002Fp>\n\u003Ch2>対応ブラウザ\u003C\u002Fh2>\n\u003Cp>　jQuery.Timeline の対応ブラウザ状況は下記の通りです。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ci class=\"fa fa-chrome\">\u003C\u002Fi> \u003Cstrong>Chrome\u003C\u002Fstrong> :  \u003Ci class=\"fa fa-check text-success\">\u003C\u002Fi> 最新版で動作確認\u003C\u002Fli>\n\u003Cli>\u003Ci class=\"fa fa-firefox\">\u003C\u002Fi> \u003Cstrong>Firefox\u003C\u002Fstrong> :  \u003Ci class=\"fa fa-check text-success\">\u003C\u002Fi> 最新版で動作確認\u003C\u002Fli>\n\u003Cli>\u003Ci class=\"fa fa-safari\">\u003C\u002Fi> Safari : 未確認 \u003C\u002Fli>\n\u003Cli>\u003Ci class=\"fa fa-opera\">\u003C\u002Fi> \u003Cstrong>Opera\u003C\u002Fstrong> : \u003Ci class=\"fa fa-check text-success\">\u003C\u002Fi> 最新版で動作確認\u003C\u002Fli>\n\u003Cli>\u003Ci class=\"fa fa-edge\">\u003C\u002Fi> \u003Cstrong>Edge\u003C\u002Fstrong> : \u003Ci class=\"fa fa-check text-success\">\u003C\u002Fi> 最新版で動作確認\u003C\u002Fli>\n\u003Cli>\u003Ci class=\"fa fa-internet-explorer\">\u003C\u002Fi> IE : 未確認\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>対応jQueryバージョン\u003C\u002Fh2>\n\u003Cp>　JQuery.Timeline は jQuery \u003Cstrong>1.9.0\u003C\u002Fstrong> 以降での正常動作を確認済みです。なお、最新 \u003Cstrong>3.x\u003C\u002Fstrong> 系のバージョンでのご利用を推奨します。\u003C\u002Fp>\n\u003Ch2>使用方法\u003C\u002Fh2>\n\u003Cp>　下記、GitHubページから jQuery.Timeline の最新リソースをダウンロードしてください。\u003C\u002Fp>\n\u003Cblockquote>\u003Cp>\n  \u003Ci class=\"fa fa-github\">\u003C\u002Fi> \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fka215\u002Fjquery.timeline\u002Freleases\">https:\u002F\u002Fgithub.com\u002Fka215\u002Fjquery.timeline\u002Freleases\u003C\u002Fa>\n\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Cp>　展開したファイルの dist ディレクトリ内のリソースを使用します。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><link rel=\"stylesheet\" href=\".\u002Fdist\u002Ftimeline.min.css\">\n<script src=\".\u002Fdist\u002Ftimeline.min.js\"><\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　HTML内に上記のように jQuery.Timeline を読み込むことで準備完了です。\u003C\u002Fp>\n\u003Ch3>マークアップ:\u003C\u002Fh3>\n\u003Cp>　タイムラインブロックを表示する場所に、\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><div id=\"myTimeline\">\n  <ul class=\"timeline-events\">\n    <li data-timeline-node=\"{ start:'2017-05-26 10:00',end:'2017-05-26 13:00',content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }\">Event Label<\u002Fli>\n    <li data-timeline-node=\"{ start:'2017-05-26 23:10',end:'2017-05-27 1:30',content:'<p>In this way, you can include <em>HTML tags<\u002Fem> in the event body.<br>:<br>:<\u002Fp>' }\">Event Title<\u002Fli>\n  <\u002Ful>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　──のようにマークアップします。\u003C\u002Fp>\n\u003Cp>　\u003Cstrong>注意\u003C\u002Fstrong>: 上記の例ではタイムライン上のイベントリストを \u003Ccode><ul>\u003C\u002Fcode> タグでマークアップしていますが、使用タグは \u003Ccode><ul>\u003C\u002Fcode> 以外のタグも利用可能です。個々のイベントを定義したタグの親タグのクラス名が \u003Cstrong>timeline-events\u003C\u002Fstrong> であれば \u003Ccode><div>\u003C\u002Fcode> タグ等でマークアップしても構いません。\u003C\u002Fp>\n\u003Cp>　次に、タイムラインのイベントをクリックした際に、イベント詳細が表示される領域に下記のようにマークアップします。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><div class=\"timeline-event-view\"><\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　このイベント詳細領域が不要であれば、省略可能です。\u003C\u002Fp>\n\u003Cp>　最後に、マークアップしたタイムラインブロックに jQuery.Timeline プラグインを適用します。 \u003Ccode><\u002Fbody>\u003C\u002Fcode> の直前などに下記 JavaScript を追加してください。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><script>\n$(function () {\n  $(\"#myTimeline\").timeline();\n});\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　これで基本的なマークアップは完了です。\u003C\u002Fp>\n\u003Ch2>オプション\u003C\u002Fh2>\n\u003Cp>　プラグインが初期化される際に、タイムラインオブジェクトごとに個別のオプション設定を適用することができます。例えば、下記のように設定します。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js:\">$(\"#myTimeline\").timeline({\n  startDatetime: '2017-05-25',\n  rows: 6,\n  rangeAlign: 'center'\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　初期化オプションに設定可能なパラメータは下記の通りです。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>オプション名\u003C\u002Fth>\n\u003Cth>値タイプ\u003C\u002Fth>\n\u003Cth align=\"left\">初期値\u003C\u002Fth>\n\u003Cth align=\"left\">説明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>type\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd align=\"left\">bar\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン上のイベント表示を切り替えます。”\u003Cstrong>bar\u003C\u002Fstrong>” か “\u003Cstrong>point\u003C\u002Fstrong>” を指定可能で、”bar”の場合はイベント開始・終了を持つ期間表示型となり、”point”の場合はイベント開始のみを点描する表示形式となります。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>scale\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd align=\"left\">days\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムテーブルの最上位スケールを指定します。”\u003Cstrong>years\u003C\u002Fstrong>” か “\u003Cstrong>months\u003C\u002Fstrong>” か “\u003Cstrong>days\u003C\u002Fstrong>” が指定できます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>startDatetime\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd align=\"left\">currently\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムテーブルの表示開始日時を指定します。”YYYY-MM-DD HH:MM” もしくは “YYYY\u002FMM\u002FDD HH:MM” の形式か、現在日時を起点とする “\u003Cstrong>currently\u003C\u002Fstrong>” が指定可能です。なお、実際にレンダリングされる開始日時はscaleオプションの指定によって変化します\u003Csup id=\"fnref-122125-startDatetime\">\u003Ca href=\"#fn-122125-startDatetime\" class=\"jetpack-footnote\">1\u003C\u002Fa>\u003C\u002Fsup>。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>datetimePrefix\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインブロックの見出しとして表示される日時表示に接頭辞を付与する場合にその文字列を指定できます。例えば “西暦” などです。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>showHeadline\u003C\u002Ftd>\n\u003Ctd>真偽値\u003C\u002Ftd>\n\u003Ctd align=\"left\">true\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインブロックの見出しを表示するかどうかを指定します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>datetimeFormat\u003C\u002Ftd>\n\u003Ctd>オブジェクト\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>{full:\"j M Y\", year:\"Y\", month:\"M Y\", day:\"D, j M\", years:\"Y\", months:\"F\", days:\"j\" }\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">イベント詳細のメタ（”\u003Cstrong>full\u003C\u002Fstrong>“）や、タイムラインブロックの見出し（”\u003Cstrong>year\u003C\u002Fstrong>“,”\u003Cstrong>month\u003C\u002Fstrong>“,”\u003Cstrong>day\u003C\u002Fstrong>“）、タイムテーブルのスケール（”\u003Cstrong>years\u003C\u002Fstrong>“,”\u003Cstrong>months\u003C\u002Fstrong>“,”\u003Cstrong>days\u003C\u002Fstrong>“）に表示される日時表示の書式を定義できます。\u003Cbr \u002F>利用可能な書式はPHPのdate関数に準拠しています。詳しくは \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002Fka215\u002F20cbab58e4f7d4e5508a07cff8d64b00\">fn.date.js\u003C\u002Fa> を参照してください。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>minuteInterval\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd align=\"left\">30\u003C\u002Ftd>\n\u003Ctd align=\"left\">トップスケール（scale）が「日」の場合のみ有効な、分の区切り間隔を指定します。5分以上の指定を推奨します。（非推奨なパラメータのため、将来的に削除するかもしれません）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>zerofillYear\u003C\u002Ftd>\n\u003Ctd>真偽値\u003C\u002Ftd>\n\u003Ctd align=\"left\">false\u003C\u002Ftd>\n\u003Ctd align=\"left\">年表示が4桁に満たない場合に0埋めをするかどうかです。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>range\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd align=\"left\">3\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムテーブルの表示範囲を指定します。startDatetime からトップスケール換算で指定レンジ分、タイムテーブルがレンダリングされます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>rows\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd align=\"left\">5\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン・イベントエリアに出力される行数を指定します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>rowHeight\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd align=\"left\">40\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン・イベントエリアの縦方向の一行の高さを指定します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>height\u003C\u002Ftd>\n\u003Ctd>複合値\u003C\u002Ftd>\n\u003Ctd align=\"left\">auto\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン・イベントエリアの全体の高さを指定します。ピクセル値の固定値を指定することも可能です。初期値である “auto” の場合、rows * rowHeight で自動計算されます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>minGridPer\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd align=\"left\">2\u003C\u002Ftd>\n\u003Ctd align=\"left\">中位スケールの1目盛を何分割するかです。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>minGridSize\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd align=\"left\">30\u003C\u002Ftd>\n\u003Ctd align=\"left\">最下位スケールの1目盛の横幅をピクセル値で指定します。5ピクセル以上が必要です。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>rangeAlign\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd align=\"left\">current\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインブロックが出力された時の最初の表示位置を指定できます。有効な値は、 “\u003Cstrong>left\u003C\u002Fstrong>“, “\u003Cstrong>center\u003C\u002Fstrong>“, “\u003Cstrong>right\u003C\u002Fstrong>“, “\u003Cstrong>current\u003C\u002Fstrong>“, “\u003Cstrong>latest\u003C\u002Fstrong>” と、 \u003Cstrong>任意のイベントID\u003C\u002Fstrong> になります。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>naviIcon\u003C\u002Ftd>\n\u003Ctd>オブジェクト\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>{left:\"jqtl-circle-left\", right:\"jqtl-circle-right\"}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd align=\"left\">イベントエリアの左右に表示されるナビゲーション・アイコンのクラス名を指定できます。外部フォント利用時等に使います。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>showPointer\u003C\u002Ftd>\n\u003Ctd>真偽値\u003C\u002Ftd>\n\u003Ctd align=\"left\">true\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン内に現在日時が含まれている場合に表示される現在時刻ポインターを表示するかどうかです。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>i18n\u003C\u002Ftd>\n\u003Ctd>オブジェクト\u003C\u002Ftd>\n\u003Ctd align=\"left\">(省略)\u003C\u002Ftd>\n\u003Ctd align=\"left\">プラグイン全体で出力される日時書式を国際化するための、翻訳テキストを定義することができます。詳しくは\u003Ca href=\"#国際化\">国際化\u003C\u002Fa>にて説明します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch2>メソッド\u003C\u002Fh2>\n\u003Cp>　初期化されたタイムラインオブジェクトに対して、メソッドを使うことで様々な操作を行うことができます。また、各メソッドはチェーンすることで、同時に複数のメソッドを利用することも可能です。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js:\">$(\"#myTimeline\").timeline({\n  type  : \"bar\",\n  range : 5\n}).timeline(\"initialized\", function( self, data ){ \n  console.log([ \"user's callback\", self, data ]);\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　メソッドを利用する時は、基本的にタイムラインオブジェクトに対して、第1引数にメソッド名、第2引数にメソッド用のパラメータを指定します。メソッドによっては、第2引数または第3引数にコールバック関数を指定できるものもあります。\u003Cbr \u002F>\n　利用可能なメソッドは以下の通りです。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>メソッド名\u003C\u002Fth>\n\u003Cth align=\"left\">概要\u003C\u002Fth>\n\u003Cth>引数\u003C\u002Fth>\n\u003Cth align=\"left\">使用例\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>initialized\u003C\u002Ftd>\n\u003Ctd align=\"left\">プラグインの初期化後、タイムラインブロックのレンダリング直前に呼び出されます。コールバック関数を引数で渡すことができ、プラグイン初期化後に独自の処理を追加することができます。\u003C\u002Ftd>\n\u003Ctd>Callback Function\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('initialized', function( self, data ){ alert('initialization complete!'); });\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>destroy\u003C\u002Ftd>\n\u003Ctd align=\"left\">プラグインによって作成されたタイムラインオブジェクトをDOM上から破棄します。\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('destroy');\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>show\u003C\u002Ftd>\n\u003Ctd align=\"left\">非表示のタイムラインオブジェクトを表示します。\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('show');\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>hide\u003C\u002Ftd>\n\u003Ctd align=\"left\">表示されているタイムラインオブジェクトを非表示にします。\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('hide');\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>render\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインブロックを再レンダリングします。この際、初期化後にメソッドで操作されたイベントはすべて破棄され、初期マークアップ時のイベントのみが再配置されます。\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>dateback\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインを過去（左）方向へスクロールさせます。左ナビアイコンをクリックした際の動作と同じです。\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('dateback');\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>dateforth\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインを未来（右）方向へスクロールさせます。右ナビアイコンをクリックした際の動作と同じです。\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('dateforth');\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>alignment\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインの中央位置を任意の位置に移動します。rangeAlignオプションで有効な値を指定できます。\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('alignment', 'center');\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>getOptions\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムラインオブジェクトの現在のオプション値を取得して、JavaScriptオブジェクトとして返します。\u003C\u002Ftd>\n\u003Ctd>–\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>var tlOptions = $('#myTimeline').timeline('getOptions');\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>addEvent\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン上にイベントを追加します。第3引数にコールバック関数を指定することで、イベント追加後に独自の処理を実行することも可能です。\u003C\u002Ftd>\n\u003Ctd>配列, Callback Function (任意)\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('addEvent', [ {start:'2017-6-1 00:00',end:'2017-6-1 02:00',row:2,label:'Add Event',content:'test'} ], function( self, data ){ alert('Added Event!'); });\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>removeEvent\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン上の指定イベントを削除します。削除イベントの指定にはイベントIDを使い、複数のイベントを同時に削除できます。また、第3引数にコールバック関数を指定することで、イベント削除後に独自の処理を実行することも可能です。\u003C\u002Ftd>\n\u003Ctd>配列, Callback Function (任意)\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('removeEvent', [ 6, 7 ]);\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>updateEvent\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン上の特定のイベントの内容を更新します。同時に複数のイベントを更新することも可能です。第3引数にコールバック関数を指定することで、イベント更新後に独自の処理を実行することも可能です。\u003C\u002Ftd>\n\u003Ctd>配列, Callback Function (任意)\u003C\u002Ftd>\n\u003Ctd align=\"left\">\u003Ccode>$.timeline('updateEvent', [ {eventId:3, start:'2017-5-29 13:00',end:'2017-5-29 15:30', row:1, label:'Updated Event', bgColor:'#aaaab0', color:'#d70035'} ]);\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>openEvent\u003C\u002Ftd>\n\u003Ctd align=\"left\">タイムライン上のイベントがクリックされた時にコールバックされます。\u003C\u002Ftd>\n\u003Ctd>（オブジェクト）\u003C\u002Ftd>\n\u003Ctd align=\"left\">他のメソッドと異なり、後述する\u003Ca href=\"#イベント・パラメータ\">イベント・パラメータ\u003C\u002Fa>のcallbackで指定された処理が呼び出されます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch2>イベント・パラメータ\u003C\u002Fh2>\n\u003Cp>　タイムライン上に配置されるイベントは表示用のパラメータを持っています。このイベント・パラメータの指定方法には、HTMLに直接マークアップする方法と、メソッドを利用して指定する方法の2種類あります。\u003C\u002Fp>\n\u003Ch3>HTML\u003C\u002Fh3>\n\u003Cp>　HTMLに直接マークアップする場合、イベントリストをラップするクラス名”\u003Cstrong>timeline-events\u003C\u002Fstrong>“を持つ親タグの下に、子タグの属性として”\u003Cstrong>data-timeline-node\u003C\u002Fstrong>”を指定し、ここにパラメータを記入します。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><div class=\"timeline-events\">\n  <div>このイベントリストは無視されます<\u002Fdiv>\n  <div data-timeline-node=\"{ start:'2017-01-01 00:00',end:'2017-01-01 13:00',content:'イベント本文が入ります。' }\">有効なイベント<\u002Fdiv>\n  <div data-timeline-node=\"{ start:'2017-01-01 00:00',end:'2017-01-01 13:00',content:'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...' }\">Lorem Ipsum<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　\u003Cstrong>注意\u003C\u002Fstrong>: “data-timeline-node”属性を持たないイベントリストはタイムラインオブジェクト初期化時に無視され、タイムライン上に配置されません。\u003C\u002Fp>\n\u003Ch3>メソッド\u003C\u002Fh3>\n\u003Cp>　タイムラインオブジェクト初期化後にメソッドでイベントを指定する場合、イベントリストをJavaScriptの配列として渡します。配列の要素は、イベント・パラメータのJavaScriptオブジェクトになります。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js:\">$('myTimeline').timeline()\n.timeline( 'addEvent', [\n  {start:'2017-1-1 08:00',end:'2017-1-1 10:00',label:'イベント 1',content:'内容'},\n  {start:'2017-1-1 09:30',end:'2017-1-1 10:15',label:'イベント 2',content:'内容'}\n],\nfunction( self, data ){\n  console.log('Events addition successfully!');\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>イベント・パラメータ一覧\u003C\u002Fh3>\n\u003Cp>　イベント・パラメータとして利用可能な設定値は下記の通りです。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>パラメータ名\u003C\u002Fth>\n\u003Cth>値タイプ\u003C\u002Fth>\n\u003Cth>タイムラインタイプ\u003C\u002Fth>\n\u003Cth>説明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>eventId\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>イベントID。1以上の整数値をとり、イベントリスト中において一意な値である必要があります。パラメータとしては省略可能で、省略した場合はプラグイン初期化時に自動で発番されます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>start\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>イベント開始日時。\u003Ccode>2017-1-1 0:00\u003C\u002Fcode> や \u003Ccode>2017\u002F01\u002F02 01:23\u003C\u002Fcode> のように指定します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>end\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>bar\u003C\u002Ftd>\n\u003Ctd>イベント終了日時。タイムラインタイプがpointの場合は無視されます。指定書式は start と同じです。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>row\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>タイムライン上の表示行（縦位置）。1以上の整数値。指定しないと1行目（最上段）のイベントとなります。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>label\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>イベント表題。HTMLでマークアップ時はイベントリストタグのテキスト部がラベルとして使用されます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>content\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>イベント本文。イベント詳細表示領域がある場合、そこに表示されます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>bgColor\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>タイムライン上に表示されるイベントノードブロックの背景色です。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>color\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>タイムライン上に表示されるイベントノードブロックの文字色です。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>bdColor\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>point\u003C\u002Ftd>\n\u003Ctd>タイムラインタイプがpointの場合のみ有効です。タイムライン上に表示されるイベントノードブロックの外枠（ボーダー）色です。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>image\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>point\u003C\u002Ftd>\n\u003Ctd>タイムラインタイプがpointの場合のみ有効です。タイムライン上に表示されるイベントノードブロックのサムネイル画像になります。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>margin\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd>point\u003C\u002Ftd>\n\u003Ctd>タイムラインタイプがpointの場合のみ有効です。イベントノードブロックの余白（マージン）です。初期値は2ピクセルで、値を大きくすることでイベントノードブロックのサイズを小さくできます。オプションの rowHeight の半分の幅未満で指定可能です。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>extend\u003C\u002Ftd>\n\u003Ctd>オブジェクト\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>イベントノードブロックのユーザー拡張パラメータとして任意の値をキー・バリュー形式で設定できます。このパラメータ値はコールバックイベントで参照できます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>callback\u003C\u002Ftd>\n\u003Ctd>JavaScript\u003C\u002Ftd>\n\u003Ctd>bar\u002Fpoint\u003C\u002Ftd>\n\u003Ctd>イベントがクリックされた時の追加処理を定義できます。ここで定義された処理は “\u003Cstrong>openEvent\u003C\u002Fstrong>” メソッドの後続処理として扱われます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>relation\u003C\u002Ftd>\n\u003Ctd>オブジェクト\u003C\u002Ftd>\n\u003Ctd>point\u003C\u002Ftd>\n\u003Ctd>タイムラインタイプがpointの場合のみ有効です。自身の前後に連結するイベントがある場合、連結イベントを定義することでそのイベントと自身のイベントが線で連結されます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch3>リレーション・ライン\u003C\u002Fh3>\n\u003Cp>タイムラインタイプが”\u003Cstrong>point\u003C\u002Fstrong>”の場合、各イベントを線で連結することができます。連結線を設定するためには各イベントにて\u003Cstrong>relation\u003C\u002Fstrong>パラメータを使って、そのイベントに連結する前後のイベントIDを指定します。\u003Cbr \u002F>\nrelationパラメータで指定できる設定値は下記の通りです。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>プロパティ名\u003C\u002Fth>\n\u003Cth>タイプ\u003C\u002Fth>\n\u003Cth>値\u003C\u002Fth>\n\u003Cth>説明\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>before\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd>イベントID\u003C\u002Ftd>\n\u003Ctd>自身のイベントの前（左側）に連結するイベントIDを指定します。\u003Ccode>-1\u003C\u002Fcode> を指定することで、タイムライン領域外（表示領域の左端）から線を引くことができます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>after\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd>イベントID\u003C\u002Ftd>\n\u003Ctd>自身のイベントの後（右側）に連結するイベントIDを指定します。\u003Ccode>-1\u003C\u002Fcode> を指定することで、タイムライン領域外（表示領域の右側）へ線を引くことができます。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>linesize\u003C\u002Ftd>\n\u003Ctd>数値\u003C\u002Ftd>\n\u003Ctd>ピクセル値\u003C\u002Ftd>\n\u003Ctd>連結線の太さを指定します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>linecolor\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>カラーコード\u003C\u002Ftd>\n\u003Ctd>連結線の色を指定します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>curve\u003C\u002Ftd>\n\u003Ctd>文字列\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>lt\u003C\u002Fcode>,\u003Ccode>rt\u003C\u002Fcode>,\u003Ccode>rb\u003C\u002Fcode>,\u003Ccode>lb\u003C\u002Fcode> のいずれか\u003C\u002Ftd>\n\u003Ctd>自身のイベントと異なる行のイベントに連結する時に、線形を曲線化できます。その際の曲線化する方向を指定します。例えば、beforeで指定した左上のイベントに連結する場合は\u003Ccode>rb\u003C\u002Fcode>を指定します。\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Ch4>リレーション・ラインの例\u003C\u002Fh4>\n\u003Ch5>1. 基本（直線連結）\u003C\u002Fh5>\n\u003Cp>　自身（イベントID:2）から過去のイベント（イベントID:1）と連結する場合:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><ol class=\"timeline-events\">\n  <li data-timeline-node=\"{ eventId:1, start:'2017-5-25 12:00',row:2 }\">Event 1<\u002Fli>\n  <li data-timeline-node=\"{ eventId:2, start:'2017-5-27 20:00',row:2,relation:{before:1} }\">Event 2<\u002Fli>\n<\u002Fol>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\u002F\u002Fka215.github.io\u002Fjquery.timeline\u002Fimgs\u002Fjquery_timeline_point_type_relayline_basic.png\" alt=\"直線連結\" \u002F>\u003C\u002Fp>\n\u003Ch5>2. 曲線連結\u003C\u002Fh5>\n\u003Cp>　自身（イベントID:2）から異なる行の過去のイベント（イベントID:1）に曲線で連結する場合:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><dl class=\"timeline-events\">\n  <dd data-timeline-node=\"{ eventId:1, start:'2017-5-25 12:00',row:2 }\">Event 1<\u002Fdd>\n  <dd data-timeline-node=\"{ eventId:2, start:'2017-5-27 20:00',row:3,relation:{before:1,curve:'lb'} }\">Event 2<\u002Fdd>\n<\u002Fdl>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cimg data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\u002F\u002Fka215.github.io\u002Fjquery.timeline\u002Fimgs\u002Fjquery_timeline_point_type_relayline_curve.png\" alt=\"曲線連結\" \u002F>\u003C\u002Fp>\n\u003Cp>※ 曲線連結はタイムラインでの表示に準じて、\u003Ccode>└\u003C\u002Fcode>が”\u003Cstrong>rb\u003C\u002Fstrong>“、\u003Ccode>┘\u003C\u002Fcode>が”\u003Cstrong>lb\u003C\u002Fstrong>“、\u003Ccode>┌\u003C\u002Fcode> が”\u003Cstrong>lt\u003C\u002Fstrong>“、\u003Ccode>┐\u003C\u002Fcode> が”\u003Cstrong>rt\u003C\u002Fstrong>” となります。\u003C\u002Fp>\n\u003Ch2>国際化\u003C\u002Fh2>\n\u003Cp>　このプラグインでは出力される日時書式テキストを国際化して、利用する言語に応じて翻訳テキストを定義する機能を備えています。この機能を利用する場合、タイムラインオブジェクトの初期化時に下記のようなオプションを追加してください。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js:\">$(\"#myTimeline\").timeline({\n  i18n : {\n    month: { '一月': '睦月', '二月': '如月', '三月': '弥生', '四月': '卯月', '五月': '皐月', '六月': '水無月', '七月': '文月', '八月': '葉月', '九月': '長月', '十月': '神無月', '十一月': '霜月', '十二月': '師走' },\n    day: { '日': '日曜', '月': '月曜', '火': '火曜', '水': '水曜', '木': '木曜', '金': '金曜', '土': '土曜' },\n    ma: [ '午前', '午後' ]\n  }\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>※ 上記は、日本語への翻訳をする場合になります。\u003C\u002Fp>\n\u003Ch2>デモ\u003C\u002Fh2>\n\u003Cp>　このプラグインのデモページはこちらです：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fka215.github.io\u002Fjquery.timeline\u002Findex.html\">BARタイプタイムライン・デモ\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fka215.github.io\u002Fjquery.timeline\u002Findex2.html\">POINTタイプタイムライン・デモ\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>TIPS\u003C\u002Fh2>\n\u003Cp>　いくつか実践的なTIPSを紹介しておきます。\u003C\u002Fp>\n\u003Ch3>1. bootstrapのモーダルウィンドウにイベント詳細を表示する\u003C\u002Fh3>\n\u003Cp>　まず、モーダルウィンドウの本文ブロック（.modal-body）内に、イベント詳細エリアを設置しておきます。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><div class=\"modal fade\" id=\"myModal\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\"><\u002Fh5>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n          <span aria-hidden=\"true\">×<\u002Fspan>\n        <\u002Fbutton>\n      <\u002Fdiv>\n      <div class=\"modal-body\">\n        <div class=\"timeline-event-view\"><\u002Fdiv>\n      <\u002Fdiv>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close<\u002Fbutton>\n      <\u002Fdiv>\n    <\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　イベント・パラメータのコールバックにモーダルウィンドウの呼び出しを設定します。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><div id=\"myTimeline\">\n  <div class=\"timeline-events\">\n    <div data-timeline-node=\"{ start:'2017-05-26 12:45',end:'2017-05-26 13:45',callback:'$(\\'#myModal\\').modal()',content:'Show modal window via bootstrap' }\">Event having callback<\u002Fdiv>\n  <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　これで、タイムライン上のイベントがクリックされると、モーダルウィンドウにイベント詳細が表示されるようになります。\u003C\u002Fp>\n\u003Ch3>2. タイムライン上のイベントにbootstrapのツールチップを適用する\u003C\u002Fh3>\n\u003Cp>　イベント・パラメータの拡張設定にツールチップ制御用のオプションを定義しておきます。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html:\"><div id=\"myTimeline\">\n  <ul class=\"timeline-events\">\n    <li data-timeline-node=\"{ start:'2017-05-26 16:08',end:'2017-05-26 17:54',row:2,extend:{toggle:'popover',placement:'bottom',content:'Show popover via bootstrap'} }\">Event with popover<\u002Fli>\n  <\u002Ful>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　JavaScriptでレンダリングされたイベントノードブロックにツールチップをバインドさせます。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-js:\">$('.timeline-node').each(function(){\n  if ( $(this).data('toggle') === 'popover' ) {\n    $(this).attr( 'title', $(this).text() );\n    $(this).popover({\n      trigger: 'hover'\n    });\n  }\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>　これで、タイムライン上のイベントにマウスオーバーするとツールチップが表示されます\u003Csup id=\"fnref-122125-bootstrapTooltip\">\u003Ca href=\"#fn-122125-bootstrapTooltip\" class=\"jetpack-footnote\">2\u003C\u002Fa>\u003C\u002Fsup>。\u003C\u002Fp>\n\u003Ch2>ライセンス\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fopensource.org\u002Flicenses\u002Fmit-license.php\">the MIT license\u003C\u002Fa>\u003C\u002Fp>\n\u003Cdiv class=\"footnotes\">\n\u003Chr \u002F>\n\u003Col>\n\u003Cli id=\"fn-122125-startDatetime\">\nscaleに”years”を指定すると、月以下が切り捨てられ、年初が開始日時となります。また、scaleに”months”を指定すると、日以下が切り捨てられ、月初が開始日時となります。 \u003Ca href=\"#fnref-122125-startDatetime\">↩\u003C\u002Fa>\n\u003C\u002Fli>\n\u003Cli id=\"fn-122125-bootstrapTooltip\">\nBootstrapのバージョン4.xでは、ツールチップの使用時にエラーが発生する場合があります。その際、\u003Ca href=\"http:\u002F\u002Ftether.io\u002F\">tether\u003C\u002Fa>プラグインをインクルードすることで解決できるかもしれません。 \u003Ca href=\"#fnref-122125-bootstrapTooltip\">↩\u003C\u002Fa>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n",[271,273,276,279,282],{"slug":272,"name":272},"horizontal",{"slug":274,"name":275},"jquery","jQuery",{"slug":277,"name":278},"plugin","Plugin",{"slug":280,"name":281},"timeline","Timeline",{"slug":283,"name":284},"version1-x","Version1.x",[286,289,292,299],{"slug":49,"title":50,"date":51,"excerpt":52,"image":53,"categories":287},[288],{"slug":35,"name":36},{"slug":97,"title":98,"date":99,"excerpt":100,"image":101,"categories":290},[291],{"slug":104,"name":105},{"slug":293,"title":294,"date":295,"excerpt":296,"image":71,"categories":297},"part3-way-to-conceal-the-plugins","第3章 WordPressのプラグインを隠蔽せよ","2020-02-28T17:26:04","前章までの秘匿化によって、WebサイトからかなりWordPressの存在を匂わす要素がなくなって来たが、完全な秘匿化まではまだまだ足りない部分がある。その一つがプラグインだ。 基本的にWordPressはブログツール…",[298],{"slug":74,"name":75},{"slug":300,"title":301,"date":302,"excerpt":303,"image":42,"categories":304},"wordpress-emergency-tool","WordPressの管理画面にログインできなくなった時の緊急対処ツール","2017-06-17T00:13:27","WordPressのテーマとプラグインを開発していて、ログイン周りなどをカスタマイズしている時、ブラウザのセッションが切れて管理画面に入れなくなってしまう事などがまれにある。 私の例だと、WordPressの会員制サ…",[305,306],{"slug":74,"name":75},{"slug":45,"name":46},{"slug":308,"title":309,"date":310,"excerpt":311,"image":312,"categories":313},"lets-build-my-plugin-with-wp-rest-api-part-1-checking-the-rest-api-plugin","WP REST APIをプラグインに組み込む！：その１. REST APIの存在確認","2016-10-12T22:25:54","現在、私が開発している「Custom DataBase Tables」プラグインに「WordPress REST API」プラグインの RESTful な仕組みを取り込もうとしている。 「Custom DataBase…","\u002Fassets\u002Fuploads\u002F2016\u002F10\u002Fcdbt-with-wp-rest-api.png",[314],{"slug":74,"name":75},{"slug":316,"title":317,"date":318,"excerpt":319,"image":42,"categories":320},"running-mysql57-in-xampp","XAMPP環境で MySQL 5.7 を動かす","2017-06-02T00:42:25","MySQLのJSON型を使って開発をしたい。しかも、XAMPP環境で…！ ──Vagrant + VirtualBox 使えばええやん。 確かにその通りだ。その通りなのだが、私の非力なノートPC（メモリ4GBのWi…",[321],{"slug":25,"name":26},1793391397761]