knight labs timelineJSという年表をつくる結構古いJavascriptのツールがあるのだが、今も無料でサービスを提供し、更新もされているようだ。
これで以前作ったことのある小説「リング」の年表をリプレースしてみようとか思ってしまったのが1か月ぐらい前だろうか
どうせなら、日付で追った出来事をWordpressの投稿としてポストすると、自動でデータ化し、上のTimelineで表示させられれば面白いかと
TimelineJSの作る年表は 自分のアカウントのGoogleSpredSheetを公開し、KnightLabのサーバで読み込んでもらい、生成してもらう、もしくはJSONデータを用意して、自前のサーバ側にjavascriptやcssをもらってきて配置し、自前のサーバ側で生成し表示させるの2つの方法があるらしく、Wordpressと連携させようと思えば後者になる。
同じようなことをやった人もおり、FeedをJSON形式で吐き出すプラグインを利用しているようだった。しかし、ソースを読んでも全くピンと来ない。
どうしようとググっているとWordpress REST APIというAPIが、一部か全部かよくわからんが、既にWordpress本体に組み込まれいるという。こいつはJSONを吐き出す事ができるようだ。
しかも、Wordpressの内部関数で拾えるものなら、何でもJSON形式で生成できる。
こいつはいいやと、CodeSnippetsプラグインで、function.phpで自分の条件でのエンドポイントを作るコードを追記するようにした。
サンプルはGoogleにいっぱいあるので、ここは普通にうまくいき、JSONデータも生成された。
でもTimelineJSが必要とするJSONデータと同じ構造にしないと、TimelineJS側はピクリとも動かない。しかも結構渋い。
そこで、Wordpressで用意したJSONファイルをjavascriptのfetchで拾ってきて加工し、ファイルではなくオブジェクトで渡してやろうとしたのだが、fetchの構文内からTimelineJS側にオブジェクトを渡すことができない。（Javascriptを書いてる人なら簡単だろうが）
以降試行錯誤をごそごそやっていたのだが、結果としてTimelineJSにファイル以外で渡しても動かないし、せっかくJSONになったものをわざわざfetchしてPromise形式にしてから加工するのもバカな話だった。それでもJSON.parseとかJSON.stringifyでのデータの変化が面白かった。
結局エンドポイントを作るPHPで文字列として加工し、ファイルに書き込んでやればいいだけの話だった。
ちなみにfunction.phpに追記したソースは以下
投稿を全件日付順に拾うようにしてるが、これが100件を超えると問題があるらしい。いまのところ過去につくったデータも100件までないから気にしないでおこう
function my_timeline_endpoint(){
register_rest_route('klab','timeline',array(
'methods' => WP_REST_SERVER::READABLE,
'callback' => 'timeline_results'
));
}
add_action('rest_api_init','my_timeline_endpoint');
function timeline_results(){
$my_query = new WP_Query(array(
'post_type' => 'post',
'orderby' => 'date',
'order' => 'ASC',
'posts_per_page' => -1
));
$my_query_results = array();
while($my_query->have_posts()){
$my_query->the_post();
array_push($my_query_results,array(
'start_date' => array(
'minute' => get_post_time('i'),
'hour' => get_post_time('H'),
'day' => get_post_time('j'),
'month' => get_post_time('n'),
'year' => get_post_time('Y')
),
'text' => array(
'headline' => get_the_title(),
'text' => get_the_content()
)
)
);
}
$jsonurl = "内緒.json";
$headjson = "{\"events\":";
$andjson = json_encode($my_query_results);
$endjson = "}";
file_put_contents($jsonurl,$headjson);
file_put_contents($jsonurl,$andjson,FILE_APPEND);
file_put_contents($jsonurl,$endjson,FILE_APPEND);
return $my_query_results;
}
コメント