Tumblrから画像データを取得してサムネイル表示するアプリをLaravel + BootstrapVueで作ってみました【#np2020】

昨日から引き続いて。 Laravel + BootstrapVueの習作の一環として、Tumblrから画像データを取得してきてサムネイル表示するアプリケーションを作成してみました。このブログのトップにずっとあったやつですね。「umbls.com」というサイトで「Tumblr Thumbnails」として提供していたものとほぼ同じですが、テスト版なので機能面での互換性はありません(デザインのアレンジも出来ません)。

続きを読む

Amazonの検索を簡易に行うツールをLaravel + BootstrapVueで作ってみました【#np2020】

bootstrapvue

Amazon Search

Amazon Search

簡単な解説

前提として、特にWebサービスとしてリリースしたいということではなくて、自分がブログに商品を貼り付ける時なんかに軽く使いたいツールであって、僕以外の人間が使うことは想定していないということがあります。なんで、あくまでデモであって動作は保証してません。ただ仕事でもBootstrapVueを使い始めたこともあって、一通り出来ることはやってみようじゃないかという方針で組み込んではいます。割と軽快に動くし、bookmarkletも使えるしいい感じです。 基本はLaravelがAmazon APIとの通信処理部分を担当しJSONで出力、それをVue.jsが受けて描画、装飾部分はBootstrapが担当するという感じです。 作成するに当たって苦労したところはデザインの調整ですかね。Bootstrap4の癖にはだいぶ慣れてきたんですが、細かい調整「こことここを合わせたい」だとか、「ここもう少しスペースを空けたい」とかそういうのをするのにいちいちビルドするのが面倒に感じました。デベロッパーツール使えば良いんですけど。まあ、ナビとかレスポンシブとかでかなり楽させてもらってるのでプラスマイナスゼロですかね。 Vueの処理部分についてはさほど大変なことはやっていないので、先日作った商品情報表示用のアプリの一部分を切り分けて共通化して、APIからのレスポンスをそれで処理して表示して終わり。このあたりはLaravelとVueのおかげでものすごく簡単です。ありがたい。

この後は

とりあえずここまででAmazon関連は終わりですね。十分なテストが出来、個人として十分実用的なものは作れたので。まあでも次も多分、Laravel + BootstrapVueで作るサンプル的な機能かな。

候補

  • RSSフィードを読み込んで指定したスタイル(リスト表示、サムネイル一覧、スライドショーなど)で書き出す機能
  • Chart.jsを使ったグラフ描画

続きを読む

WordPressのカスタマイズを(たぶん)初めてしている件【#np2020】

「お前ほんとにWebデザインやってたのか」と言われかねない(多分言われる)ようなことですが、仕事・プライベート通じて初めてWordPressをカスタマイズしています。いや昔一度、自社サイトのCMSフレームワークとしてWordPressを使おうとして触ったことはあったんですけど、当時はまだ複数ブログを扱うには不安定なオープンソース版を入れないといけないような時代、つまりごく初期のWordPressで今とは似ても似つかわしくない状態でした。今のWordPressはほんとWebの知識があまりない人でも触りやすく、カスタマイズしやすい良いプロダクトになりましたね。プライベートで使ってるのが古いMovableTypeだから余計に思うのかも知れませんけれども。

続きを読む

【今日のハマり処】コンポーネントのテンプレートをnew Vue のルートに入れて `Property is not defined on the instance.`

vue_logo.png 別々のページで開発していた機能を一つのファイルにまとめることとして、そのままだと全部のページで 他サービスのAPIにGETリクエストを投げてしまうからそこをコンポーネントに切り分けて、必要なときだけリクエストを投げるようにした……まではよかったんだけど、描画されない。コンソール見てみると、

Property or method “displayDate” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
と怒られている模様。displayDateがインスタンスに見つからないよ、といわれているんだけど、コンポーネントで確かに定義してるし、リアクティブになるように処理もしてる。で、これをコンポーネントではなくてnew Vue直下のルートのdataで定義するとエラーは出ない。 意味が解らなくてしばらくハマっていたんだけど、気を取り直してこちらのサイトをイチから読んでたら最後の項目に書いてありました。

初心者向:Vue.js コンポーネント作成がうまくいかないときにチェックする5つのこと – Qiita

new Vueでマウントしている要素(ルート)の中にテンプレートファイルをいれない コンポーネントのテンプレートを、script[type=text/x-template]で指定している場合、割とやりがちなミスだったりします。 以下、うまくいかない例です。 これを実行すると、ReferenceError: text is not defined と怒られます。

これだーーーー 「ちょっと試してみよう」と思って、挿入する場所のスグしたの行にテンプレートを書いてたんですけど、たしかにそれ、ルートの中だわ。 こうじゃなくて、
{{ displayDate }}
こう。
{{ displayDate }}
そりゃVueにしてみれば、displayDateがどこの値かはわからないよね。 わかってみれば当たり前のことなんだけど、初心者はやりがちなんだろうなあ。解決して良かった。

続きを読む