react

React使ってSPAを作るよ(7)


React使ってSPAを作るよ目次

React使ってSPAを作るよ(6)の続きです。

これまでJSONファイルからデータを読み込んできましたが、これを、URLからOGPデータを取得しにいくように変えたいと思います。

OGPデータを取得してReactで描画する

まずは適当なURLのリスト、/data/list.jsonというファイルを用意。

そしてPHPはこんな感じ。
同僚がドラフト版として簡単なPHPファイルを用意してくれました。
opengraph-masterというライブラリを使っているようですね。

JSONのファイル名は自由に変えて大丈夫です。

最後のほうにある2行

ここだけ私のほうで書き換えました。
あちこちのサイトを参考にしてこの形に落ち着きました・・・

サンプルのPHPでは記事リンク部分のデータしかないので、とりあえずタグやコメントは無視して作りましょう。
ArticleListコンポーネントはそのまま変更なしでOK。
続いて、ArticleAreaコンポーネントでJSONを読み込みます。

今までarticle.jsonを読み込んでいましたが、PHPに変えたのでurlを修正します。
さらに、dataTypeにjsonpを指定。
jsonpCallbackで、PHP側のコールバックを指定します。

ところでこのsuccess/errorっていうのを、できればチェインメソッドで.doneとかしたいですね。でも下手なことして動かなくなっても困るのでとりあえず今は直さずにそのままにしておきますね(;´Д`)

なぜコールバックを使うのか、jsonpとはなんぞや?というのはこの記事が詳しくてわかりやすいです。

eval関数はあんまりよくないらしいっていう記事も見たのですが詳しくはわかりません・・・

OGPを取得するということは、異なるドメインの他サイトのデータを取ってこないといけないわけですね。
ローカルのJSONファイルを使うときも、Chromeではアクセスできないようになっていましたし、セキュリティの問題があるわけですね~。

クリックイベントがきかなくなった

これをブラウザで表示してみると、実際にlist.jsonに設定したURLの記事タイトルや画像などを表示することができました!

しかし・・・
記事をクリックしても、オーバーレイが表示されません!
ガ━━(;゚Д゚)━━ン!!

$.ajaxがいけないのか?と思いましたが、article.jsonから読み込んでいたときは、記事がクリックできてオーバーレイ表示もされていました。

じゃあ、PHPがいけないのか?と思いましたが、エラーがあるならそもそもOGPデータもとれないはず。

じゃあ、JSXがいけないのか?と思いましたが、エラーがあるならそもそもリストが表示されないはず。

じゃあ、HTML/CSSがいけないのか?と思いましたが、出力されたHTMLソースをindex.htmlに直接入れておくとそれはクリックできるしオーバーレイも表示されます。

ということは・・・?

答えは過去の記事、jsで追加した要素のclickイベントが発火しない!にありました。

となっていたところを、

こうすればOK。

しかし、PHPを使わずにJSONから読み込んだデータをレンダリングしていたときは大丈夫だったのに、PHPを通す方法にしたらこうなるんですね?DOM追加の仕組みや、もしくはタイミングなどが異なるのでしょうか・・・???ajaxでデータを取ってくるのに時間がかかるからとか・・・?

(´ε`;)ウーン…

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です