ナム山

家最高 今年一年でサックスが吹けるようになるか観測中

オブジェクトの取得方法

前回REST APIを使い、Wordpressの投稿内容をJSONPで取得する方法について書いた。
オブジェクトで値にアクセスする際、無意識に記述を使い分けていたが、
今回も初めに手こずったので改めてメモすることにした。

オブジェクトのプロパティ取得方法

そもそもプロパティとは[オブジェクトの個々のデータのこと]をさす。
アクセスの方法には2つある

  • アクセス方法1. オブジェクト名.プロパティ名
  • アクセス方法2. オブジェクト名['プロパティ名']

取得方法1の場合、プロパティ名が数値であった場合、識別子の命名規則違反になってしまいエラーが返ってくる。
一方取得方法2のブラケット構文で取得する場合、文字列として扱われるので問題なく取得できる。

前回の記事
REST APIでWordpressの更新情報を別ドメインから取得する(JSONPを使用) - ナム山


前回のコードを見ても同様に、['wp:featuredmedia']など、
識別子としては命名規則違反なものでもこの構文であれば取得できる。

参考 : https://qiita.com/tomcky/items/0757348473873765432e

REST APIでWordpressの更新情報を別ドメインから取得する(JSONPを使用)

REST APIについては見聞きしていたが初めて触るので、とりあえず最新10件取得でもしてみるかと書いてみる。
_embedオプションでサムネ画像も含んだjsonを返してくれる。
参考:https://webtatan.com/blog/wordpress/wp-rest-api-v2-json

最初のコード

$(function(){
  var url = "//www.testsite/wp-json/wp/v2/posts?_embed";
  $.get(url, function(data){
    var html = '';
    for(var i = 0;i<data.length;i++){
      var id = data[i].id;
      var title = data[i].title.rendered;
      var url = data[i].link;
      var pic = data[i]._embedded['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url'];
      html += '<li><a href="' + url + '">';
      html += 'title:' + title + '/ id:' + id + '/ 写真:';
      html += '<img src="' + pic + '">'
      html += '</li>'
    }
    $('#div').append(html);
  });
});
error処理も適当に

結果
通常のajax通信だとクロスドメイン問題でエラーが出る。
(CODEPENで試していたけどCODEPENは問題ないのね)

やったこと - 学んだこと

  • JSONPで取得する方向へ変更 - JSONPの概要理解
  • エラー処理を検討する - 取得パラメータの調整
JSONPで取得する

お、これがクロスドメイン問題か、と調べてPHPで処理するかJSONPで取得する必要があるのは分かった。
参考:http://tsujimotter.info/2013/01/03/jsonp/
参考:https://debug-life.net/entry/1653

JSONPの仕組みをちゃんと理解していなかったので調べてみると、
そもそも仕組みが違って、データをcallbackの引数として渡してるとのこと。
先にfunctionが用意されてるのが気持ち悪かったけどscriptで処理されているということなのか。
CDNとほぼ同じということかと理解。

コードに戻る。
今回の仕様は「大カテゴリーごとに最新記事を1件出力する」というものだったので、
切り分ける条件ごとに、用意する関数の分だけ読み込みが必要になってしまった。
その分処理を少なくするために取得パラメータで調整を試みることにした。

エラー処理を検討する

エラー処理、と銘打ったのは上記と関係あるが、そもそもデフォルトで引っ張ってくるデータの量が多いので、
「最新1件」をそもそも「各大カテゴリーごとに最新1件だけ取得する」ことにしてフィルタリングした。
データが返ってこない=記事がないのでこれを条件分岐に利用することにした(*1)
JSONPを取得する条件をまとめると

  • _embedオプション付き(サムネ画像も必要なため)で
  • 該当大カテゴリー(つまり複数小カテゴリー)の記事を(categories=)
  • 最新1件だけ(per_page=)を
  • 各checkData関数へ渡すためにJSONPで(_jsonp)取得する。

カテゴリーはそのまま(categories)で良いみたいですが、
複数カテゴリーはコンマつなぎで問題なさそうでした。
参考:https://ja.wp-api.org/

最終的なコード

html - 末尾に追加

<script src="//www.testsite/wp-json/wp/v2/posts/?_jsonp=checkData01&_embed&categories=10,11&per_page=1"></script>
<script src="//www.testsite/wp-json/wp/v2/posts/?_jsonp=checkData02&_embed&categories=12,13&per_page=1"></script>

js

new_Array = [];

function checkData01( data ) {
  if(data.length){
    new_Array.push(data);
  }else{
    new_Array.push(null);//*1記事の情報が0
  }
}
function checkData02( data ) {
  if(data.length){
    new_Array.push(data);
  }else{
    new_Array.push(null);
  }
}

$(window).on('load', function(){
  if( new_Array.indexOf(null) == -1 ){
    var len = new_Array.length;
    for(var i=0; i<len; i++){
      var html = '';
      var catname = new_Array[i][0]._embedded['wp:term'][0][0]['name'];//カテゴリ名
      var title = new_Array[i][0].title.rendered;//タイトル
      var pl = new_Array[i][0].link;//パーマリンク
      var pic = new_Array[i][0]._embedded['wp:featuredmedia'][0]['media_details']['sizes']['medium']['source_url'];//サムネ画像

      html += '<li><a href="' + pl + '" target="_blank"><img src="' + pic + '"></a>'
      html += '<span>' + catname + '</span><span>' + title + '</span></li>';
      $(html).appendTo('#data');
    }
  }
});

コードの説明 - まとめ

  • 空の配列を用意する
  • 返ってきたJSONPの情報があれば配列へ、なければnull *1
  • loadが終わったら上記配列をチェックして、一つもnullがなければ
  • それぞれ解析したJSONから欲しい情報を取得して成型する

(親のdivとか差し込みたいulとか用意してある前提)

*1明示的にnullにした理由として、
data.lengthで判定すると、明らかにありえない小カテゴリーを入力しても配列自体は空で返ってきてしまうから。
そうなるとArray(0)でも処理が進んでしまい、いざjsonを掘っていく段階で[.titleってなに?]と怒られが発生した。
そのため明示的にnullを渡して、1つもnullがなければ、という条件で成形の関数を動かすことにした。

JSONPはscriptで、用意したコールバック関数に引数として渡している。
個人的に、成形を後回しにして最後に一気に組むようにしたのはちょっと成長を感じた。
ドラキーバブルスライムくらいにはなったんちゃいますか。

経過観測3 〜学習がはかどる仕組み〜

守れない締め切りと守れる締め切りの違い

人生で何度も「まあいいか」を発動してきた俺は自分の予定遂行能力を全く信用していない。
バッファ取りまくり、余裕持ちまくり。
なのに結局デッドラインギリギリ。
手をつけるのも手を動かすのも遅いくせにやり始めたらこだわるという最悪のシナリオのせいだ。
その自分がこと英語の学習に関しては毎日続いているし、自律して進められている。

  • 分かりやすく身につくから = 成果が目に見えるのでやる気が出る
  • 身についたら役立つから = 使い所が分かりやすい、具体的利益が分かりやすい

それは要するに目的がはっきりしていて、ワンステップが良い塩梅だから。
さらに前回考察した通り、勉強の方法が簡単で、ルーチンに組み込まれている(通勤中にスマホを触ったら英語日記をつける)からだ。
おまけに分かったのが、HDDの容量制限のため定期的に録画を消化していかないとアニメが録画できなくなる、という分かりやすい後押しがある。
マジ小学生。

しかしこれは全て新井リオさんがブログで書いていることと一致している。

  • 具体的な使い道を目的にする
  • 工程も配信して衆人環境に置く=引っ込みがつかなくする
  • そしてそれを毎日やる

独学フリーランスデザイナーへの道。本→勉強→仕事の取り方まで全て


特に二番目はこういう退屈な自学自習をコンテンツにしにくいので、
何か自分なりにアレンジできないかなと思っていた。
これをギターやサックスの練習に結び付けられたら面白くなりそう。

今日はサボると不利益を被る(録画ができなくなる)ことで、だらけた自分でも自律的に学習できると分かって少し自信がついた。
何かを連綿と続けてきた分厚い経験が、毎日のささやかな肯定感に繋がるって実感している。
少しずつ毎日できることの量も質も増えていって、それが溢れる頃にはもっと面白いことができるようになりそうだ。

経過観測2 〜壁1:習慣化の可不可〜

何をやっているか

口だけの人間を脱出したいので、経過観測しながら今年一年いろんなことを頑張ろうと決意した。(小学生)

前回短期でPDCAを回せそうなプランを立ててみた。
ざっくり説明すると

  • 10日毎で簡単な目標設定をする
  • かつ簡単な基礎学習を毎日できるように習慣化を測る

といったやり方で以下4つの大きな目標に関して、日々の課題を立ててみた。

  1. 英語 - 簡単な日常会話ができるようになる + 観たい映画を字幕なしで鑑賞できるようになる
  2. プログラミング - jQueryを極める + 他の言語にも手を出す
  3. ギター - 難しい課題曲を弾けるようになる + スイープの習得
  4. サックス - ライブで使えるくらいになる(初心者脱出)

俺は何を目指してるのか。
が、やる気を起こすためにいまやりたいことをやることにした。

一ヶ月続けてどうなったか

面倒臭さに比例する。どういうことか

毎日続いていること

・英語日記

一日置きくらいにはできてる

・プログラミングの学習

ちょっとサボりがち

・ギターの練習

目も当てられない

・サックスの練習

単純に障壁のあるなしで明暗が分かれている。
英語日記なんて通勤中にスマホでできるし(その割にメキメキ語彙がついていくのがわかる)、
プログラミングの学習は休憩中にコーディングできるので思いついた時にやりやすい。
ところがギターは楽器がないとできないので自然と家にいる時(だらけがち)になってくるし、
サックスに至っては大きな音が出るのでスタジオか屋外にいないとできない。
習慣化しやすくするのと、実際に行動するときの障壁を取り除く方法を考える必要がある。

  • ギター - 洗濯などの待機時間を練習に充てる
  • サックス - 会社帰りにスタジオで個人練習してみる

練習場所? 金で解決だ!
山手線沿線には安い個人練習スタジオが点在している。
練習があるから、とダラダラ遅くまで仕事しなくなる効果も期待できそうな気がする(絵に描いた餅)。

それと自分は簡単なのでよくスパゲティを食べるんだが、
茹で時間の間によく筋トレをしている。
我ながら落ち着きがないと思うが、実際のところ自重トレーニングは(自分くらいのモヤシボディだと)毎日10分も時間を割けば十分効果がある。
短時間でそれなりに効果も得られるのはわかっているのだが、悲しいかなすぐにサボってしまう。
そこで台所にプッシュアップバーを置いて、茹でるだの煮るだの、時間がある時に運動することにしている。
これと同じ効果を家事の待ち時間に期待してみる。

まとめ

英語頑張っててえらいね。
実際のところ、どこぞの誰かが勉強と楽器頑張る記事を読む人もいないと思うけど、
「やりたいことをやれ」を実現する姿が誰かの後押しになればいいかなと思う。
俺も頑張るしみんなも今日がいい気分で眠れる日になったらいいじゃん。

経過観測1

2018年の8月からブログを始めて5ヶ月、当初スライムを自認していたけどスライムベスくらいにはなったかもしれない。
抽象的なので具体的に成果を並べる。

  • Wordpressの案件は4件こなした
  • CMSがわかる→ループ処理と関数のこと勉強し直した

ベス…?

わかったこと

「基礎学習の繰り返し+新しい知識の導入」を毎日続けるのが大事という、結局誰でもわかることを自覚した5ヶ月だった。自覚と実現は雲泥の差なので続けたい。矢沢永吉も「やるやつはやる」て言ってますし。
ところが意志の弱さが進行形で赤ちゃんなので、まずは習慣化できないか試行錯誤している。

  • 過去に「年始に目標掲げるだけじゃ効果低い」( about - ナム山 )と綴ったとおり、ある程度短期間で振り返りも必要。
  • 逆説的に「振り返りがあるからやらないといけなくなる」期待
  • それに目標も、具体的に使い道も含めて決めないと学習意欲も湧かない。

さらに短期集中型の性格も鑑みて今年のタスクを決めた。
俺はやるぞ。やるぞ。

人柱

ポイントは「短期・習慣化しやすい・基礎固め+新技術導入・具体的用途」
と、ガバガバ多動人間でもモチベーション維持しやすい方法に。
これで今年一年かけていろんな目標習得できるか人柱にでもなる。

  • 1つの目標を10日くらいでこなす。
  • つまり1年で36個目標クリアを目指す。

シンプル。飽きがこない。
コツはなるべく1つの難易度を簡単にする。
習慣化が目標だし、経験上いざやりはじめたら欲を出して想定以上にこなせるから。カッコつけが。

あとはコーディング技術だけじゃなくてギターも上手くなりたいし、サックスもはじめたし、英語も勉強したいので4つで分割した。欲張りさんめ。

  • 1ジャンルごと8個=80日割り振る。
  • 1ジャンルの目標は具体的な使い道を定めてモチベーションにする

これで3ヶ月弱割り振れる。サクッとひと技術触れてみるには振り返りやすい。
でも毎日触って続けないと意味ないでしょ、てことで4ジャンルごとに毎日やれる習慣も考える。
狙いとしては毎日この4ジャンルになにかしら触れること。そして1日分の目標、あわよくば複数をこなすこと。
つまり結果的に36個以上の目標をこなすこと。

何回でもいうけど一個一個は笑われるような簡単なことでもいい。
余裕が出たらレベルアップ・軌道修正すればいいし、別に誰かとの競争でもないから。
昔、いっつも変な作品作ってくる奴がいて俺も周りも失笑してたけど、俺たちがなんか理由つけて作品を作らなくなってもそいつは作ることだけはやめなくて、最終的には賞をもらっていた。
それに競争は疲れる、初めてギター触った時の楽しさが一番大事なんや…ピュアでいたいんや…
もう誰かを笑うような人間にはなりたくない。

具体的な目標

目標4ジャンル

  • サックスを吹けるようになる
  • 英語を話せるようになる
  • プログラミングの学習頑張る
  • ギターを上達させる

欲張りやな〜
もうちょい具体的に考えてみた。

サックス

【バンドで使えるようになりたい】
毎日の課題:リードだけで吹くのを続ける

各項目
  1. 音を安定して出せるようになる
  2. キラキラ星とか吹いてみる
  3. テキストを半分ほどこなす
  4. 2.3音使ってセッションしてみる
  5. テキストをさらに半分こなす
  6. 課題曲4つ練習
  7. セッションで自由度をあげてみる
  8. ライブで使えるように曲に取り入れる

バンドで新しいことしたいのでサックスやろうかなと。
まずは音出すのだけでも慣れないと難しいので、後半の課題は後々変更していけそう。
ギターと違って家で練習できないので、週末2時間使えば一年で100時間。
100時間で吹けるようになるのか見物ですな。

英語

インタビュー見聞き出来るようになりたい
毎日の課題:英語日記をつける

各項目
  1. 日常会話の10分番組を見る
  2. 言い回しを増やす
  3. 短い英語の番組を繰り返し聞いてみる
  4. 英会話をはじめる
  5. 簡単な洋書を読んでみる
  6. リスニングがわりに海外の番組を聴いて通勤してみる
  7. 海外のリファレンスとか読んでみる
  8. インタビュー動画見てみる

テクノのドキュメンタリーでmodulationという映画がある。それを観たい。
あとは海外ツアーした時英語力が足りずもどかしい思いをした。
けどみんな親切で、代わりに日本で困ってる人がいたら助けたいなと思うようになった。
悲しいかなよく海外の人に尋ねられるんだけど、気合い英語しか話せねえんだわこれが。 

プログラミング

jQueryレベルアップ+Ruby on Rails触る
毎日の課題:10行コードを書く+1記事読む

各項目
  1. jsのdotinstallを一周
  2. jQueryのprogateを一周
  3. jQueryのテキストを1冊再読
  4. Ruby on Railsのprogateを二周
  5. jQueryのprogateをもう一周
  6. jQueryのコードを簡素に書けないかレベルアップさせる
  7. Ruby on Railsのテキストを1冊こなす
  8. 簡単でいいので1つ成果物をつくる

読めるのと書けるのは違うし、さらにいうと調べればできるのとサラサラ書けるのはもっと違う。
仕事でjsに関して困ることは減ってきたけど、Web屋を名乗るならかっちりひと言語くらい自信持てるようになりたい。
なんだかんだ根性論というか、やることはやらないと器用貧乏で終わるなと実感した。
Ruby on RailsなのはアホみたいなWebアプリ作りたいから。

ギター

スイープできるようになりたい、課題曲弾けるようになりたい
毎日の課題:運指フレーズ5分だけ弾く

各項目
  1. 課題曲を85%のスピードで弾く
  2. スイープの基礎動画こなす
  3. 音楽理論のテキスト半分
  4. 課題曲 90%にチャレンジ
  5. テキスト残り半分
  6. YouTubeにある運指フレーズとかこなしつつバッファ
  7. スイープのレベルアップ
  8. 課題曲 100%のスピードでチャレンジ

Finchのregister magisterって曲があるんですがクソむずい。
そこにさらっとスイープが入っていて今年一年かけて弾けるようになれたらいいなと。
www.youtube.com
 



シンプル、志の控えめさが素晴らしい。
すでに20日経ってそれぞれ感じることもあるので別の記事で書きたい。
結果的に広範囲のことが高レベルで出来るようになれたらいいかなと。

特にサックスは人柱になってノウハウ共有したいと思う。
こと音楽に関しては憧れを手に入れることは難しくないと声を大にして言いたい。
音楽に救われている身としても。

Wordpressでインポートするデータをいじったらどうなるのか

Wordpressの引越しやリニューアルなどで投稿のカテゴリを一気に見直す機会があった。
その際にエクスポートやインポートでDBの挙動がどういったものになるのか不安だったので実験したメモ。

やることは至ってシンプル。
実験用に同じテーマを読み込んだダミーサイトに、本番サイトのバックアップデータをインポートしていくだけ。
その際、手を加えたらどんな影響が出るか確認するだけ。

1.普通のインポート(1->0)
2.追加・変更がどのくらい反映されるか(1'->1)
3.まったく別物をインポートする(1->2)
※本番->ダミーサイト

結論から言うと投稿を全部ゴミ箱から削除してインポートすれば一番安全だしわかりやすい。
元も子もないがな。
それでは各項目確認していく。

1.
まっさらなDBにインポートする。
問題なくインポートされる。
カテゴリーもタグも設定されるが、挙動は【追加】なので「未分類」カテゴリーとかは残る。
あとは言われているようにメディアやプラグインの設定は追加されないので各種追加読み込みは必要。

2.
特定の記事の「タグを追加」、「カテゴリーを変更」した上で書き出したものを読み込んでみたらうまくいった。

2+α.
しかし本文の内容をごっそり削除して読み込んでみたけどうまくいかなかった。
先述の通り追加していく挙動らしく、新しい内容で取って代わることはなさそう。

3.
同じく本番データを1記事以外ごっそり消してタイトルも変えてインポートしてみた。
残念ながらダミーサイトのもともと登録されていた他の記事はがっつり残っていた。
細やかに該当記事のタイトルが差し代わっただけ。

わかったこと

DBの挙動は【追加】
もともと登録されていたものを消す、といったことはDBの上書きではできない。
つまりバックアップデータを読み込み直して、まっさらな内容に取って代わることはない。
代わりにカテゴリーとか、タイトルとか、単一項目は差し代わった。
A,B,Cの記事が読まれているサイトに、Dの記事だけのデータを読み込んでもABCは残ったまま。

・投稿内容程度なら全部捨て去って読み込み直した方が確実
いや元も子もないがな!

おまけ

バックアップデータのxmlはざっくりダッシュボードの設定順に並んでいる。
siteの内容、authorの配列、カテゴリーの配列、タグの配列、記事の内容...etc
試しに「お知らせ」のようなカテゴリーの名前を一番最初の設定部分で変更してみる
「記事の種類(kind)」>「お知らせ(info)」みたいなカテゴリーだとする。

<wp:category>
	<wp:term_id>555</wp:term_id>
	<wp:category_nicename><![CDATA[info]]></wp:category_nicename>
	<wp:category_parent><![CDATA[kind]]></wp:category_parent>
	<wp:cat_name><![CDATA[お知らせ]]></wp:cat_name>
</wp:category>

phpで配列返してやると返してくれる内容と同じ。

ここでcat_name「お知らせtest」とかに変更すると、インポートあと確認すると該当記事のカテゴリ名前は全部差し代わっていた。
まあダッシュボードでやればええと言う話。
元も子もないがな!

しかしリニューアルとかでごっそり差し替える時は、データの方で一括置換してあげれば良いのでわかりやすそう。

Wordpressを移行した時のメモ

構築はある程度できるようになったので、次にパーマリンクを自由自在にできるように勉強することにした。
自前のサーバーなので、DBぶっ壊し放題だしいざとなったらマダンテかませばよいので気楽に実験する。
そこでまずは試しに作ったWordpressのサイトを、テスト用の別サーバーに移行する。

手順

1.Wordpressのエクスポート(移行元)
2.Wordpressのインポート(移行先)
----------
カテゴリーやタグ、記事内容はこれで移行できる。
ここでエラーが出る。
プラグイン周りとメディアがないせいかなと思い、プラグインFTPして
設定類も各々インポートする。
----------
3.プラグインのアップロード(移行先)
4.プラグインの設定をインポートor再設定(移行先)
5.メディアのエクスポート(移行元)
6.メディアのインポート(移行先)

メディアのインポートはこちらを参考にした。
https://web.plus-idea.net/2018/04/wordpress-eye-catch-move/
ありがとうございます。

という事で移行は完了した。
テストサイトで量も少なかったので15分くらいで終わってしまった。
さっくり行きすぎてやることもなくなったのでパンプアップでもするか...。