hkのweblogスマートフォン用の表示で見るhkのweblogひよっこエンジニアがにわとりになるまでの軌跡この広告は、90日以上更新していないブログに表示しています。Vue.js少し間が空きましたが、前回の記事の続きです。前回は複数のモデルのリレーションを設定して、jsonを返してやるところまで進めました。}}今回は返ってきたjsonを展開してみます。Applicationは文字通り最初のリクエスト時に1つのページを返しますが、以降はhtmlを返さず同じページを使いまわします。APIにリクエストを投げて、返ってきたjsonを基にページを書き換えていくようなイメージになります。今回の場合、最初のリクエスト時にベースとなるページを返したり、モデル周りなどサーバーサイドの処理を司るのがLaravel、以降ページを書き換えたりルーティングをしたりするのはVue側の役割になります。いうわけでまずはweb.phpに最初に読み込むページを設定します。'.*');ざっくり言うと、「スラーの後に何が来ようとapp.blade.phpを返すよ」ということを書いています。次に読み込まれるapp.blade.phpが以下です。src="{{mix('js/app.js')}}"></script></html>静的ファイルの読み込み方とかcsrfがどうだとか細かく説明すべき箇所はたくさんあるのですが、今回は端折ります。重要な役割を担うのは最後のほうで読み込んでいるapp.jsです。id="app">の中を書き換えます。router}).$mount('#app');私自身、SPAについて何も知らなかった頃は「SPAってURL固定でどうやってAPIリクエストするんだろう...」と思っていましたが、当然ルーティングはあります。installしておきましょう。今回は'/'を叩くとIndex.vueを読み込み、'/about'を叩くとAbout.vueを読み込む...という構造にしています。3つめだけ少し勝手が違いますが、'/detail/1'を叩くとsento_code=1というパラメータを渡しつつDetail.vueを読み込みます。この他にコンポーネントを作っている部分があります。こんな書き方で<navbar></navbar>のところにNavbar.vueを読み込むことができます。説明の順番がおかしい感じもしますが、最後の3行でVueインスタンスを生成しています。id="app">の中を書き換えることができます。Vueのテンプレートの中でjsonを読み込むさて、ようやく本題。Vueのテンプレートの中でjsonを読み込みます。いくつかvueを読み込んでいますが、今回はこの中でDetail.vueについて書きます。先程のjsonを読み込んで銭湯の情報の詳細ページを作るイメージです。}}</script>まず、<script>以下から見ていきます。defaultはimportする際に特に指定がなければそのクラスや関数を呼ぶということのようです。今回はgetSentoを呼んでいます。下の方にgetSentoを書いています。'/api/sento/'のうしろにthis.$route.params.sento_codeとありますが、これが先ほどvue-routerで書いたパラメータです。jQueryなんかと似ていますが、帰ってくるres.dataをsentoに渡してやって、これをテンプレートの中で展開していきます。dataの部分では帰ってくるオブジェクトの型を書いています。苦労したのはここの構造だったりします。cssを全く書いていないので表示はぐちゃぐちゃですが、表示されてほしいものはこれで表示されるはずです。Vue.jsはまだまだ勉強中ですが、シンプルかつ便利な機能が豊富に準備されていて、おしゃれなアニメーションとかも作りやすそうです。全体的に駆け足になりましたが、今日はこんなところで。PHP月2回更新を目標としながら丸1ヶ月ブログの更新をサボってしまいました...気を取り直して更新を再開していきます...最近、個人的にLaravelとVue.jsを組み合わせてSPA的なサイトを作っています。LaravelもVue.jsも初めて扱うのでそこそこ苦労していますが、新しい技術を学ぶのはやっぱり楽しいものです。以前、「Vagrant上にLaravelの開発環境を作る」という記事を書きましたが、これからしばらくはLaravelとVue.jsでサイトを作りながら気付いたことや学んだことを書いていこうと思います(たぶん他のことも書くけど)。今日は手始めにLaravelのmodelのリレーションあたりについて書いてみようと思います。modelの生成まずはmodelを作るところからスタートです。DBにあらかじめ以下のような2つのtableが用意されているとします。銭湯の基本情報と銭湯の位置情報の2つのテーブルです。1件のレコードに対して1件のレコードが対応する最もシンプルなhasOneのパターンです。139.705160これもLaravelのmigrateで作ればOKですが、長くなるので今回は割愛します。モデルは職人さんが作ってくれます。SentoInfo同様にSentoMapも作ります。デフォルトではappのすぐ下にmodelが生成されるのですが、以下のようにパスを追加してやるとちゃんとフォルダの下に入れてくれます。次に生成したモデルをDBと紐付ける必要があります。'sento_code';}鍵となるのは最後の2行です。Laravelはデフォルトではテーブル名としてmodel名の複数形(この場合はsento_infos)、primaryKeyとしてidを指定してくれます。今回のように別名を付けている場合は必ずこのように明示してやる必要があります。SentoMap.phpの方も同じようにDBと紐付けておきます。}}リレーションを設定するようやく本題のリレーションの設定です。hasOneの第1引数に紐付けるモデルのパス、第2引数にforeignKeyを設定します。foreignKeyの方を忘れるとControllerから引っ張る時に正しいクエリを生成してくれなくてエラーになります。Controllerから呼び出してみるまずはapi.phpの方にルーティング情報を書いてみます。叩くとsento_code=2でAPIが返ってきます。このAPIをVue側で取得してテンプレートに埋め込んで表示するわけですが、そのあたりはまた次回にでも書こうと思います。次にSentoController.phpです。コントローラーも職人さんが生成してくれます。SentoControllerで、生成されたSentoController.phpにdetailメソッドを書き加えます。loadingと呼ばれるもので、SentoInfoをロードする段階でSentoMapも先に取得してしまう処理を指しています。このやり方をしないとsento_mapの列の数だけクエリが発行されることになるため無駄な負荷がかかってしまうようです。今回は1対1のhasOneなのでこだわる必要性は薄いかもしれませんが、スピード面やクエリの発行回数で課金されるような状況を考えると、このやり方をしておいた方が良さそうです。find(primaryKey)でそのprimaryKeyを持ったレコード1件を取得できます。}}こんな感じでjsonが返ってくれば成功です。今日はとりあえずこんなところで。次回は返ってきたjsonをVue.jsの方で扱う記事でも書きたいと思います。jQuery1つのCookieに複数の値を入れたい、配列を入れたい、そんな時に使える便利な方法をメモしておきます。連想配列をCookieに格納する場合を想定してみます。apple実にシンプルです。1つのサイトで持てるCookieの数には上限があるので、使い所はあるのかなと思います。その一方で1つのCookieの容量は4096byteが上限となっているので、いたずらにCookieを膨らませていくとオーバーしてしまうので注意が必要です。短いですが今日はこんなところで。14:43Cookieに複数の値を格納したい時にTweet広告を非表示にするもっと読むコメントを書く2017-10-12awkコマンドを使ってログを調べるLinux先日、自分のリリースしたものが派手に障害を起こしてしまい、影響範囲を調べるためにエラーログをあれこれいじる機会がありました。いう機会は無いに越したことはないのですが、その時に活躍したawkコマンドについて簡単にまとめておきます。awkとはawkは厳密にはコマンドではなく、それ自体がスクリプト言語のようです。単一のテキスト(ファイル)を整形したりするのに便利なツールです。シェルスクリプトといえばPerlが思い浮かびますが、そこまでの学習コストを必要とせず、簡単にフィルタリング処理を書けるのがawkの特長です。以下のようなテキストファイルがあるとします。barとりあえず、sample.txtからfugaを取り出してみます。fugaこのコマンドでスペース区切りの2番目の要素を取り出すことができます。正規表現を使ってみます。こんなテキストファイルがあるとします。dayoこの中からhが含まれる行だけを取り出してみます。world第1引数に$0を指定していますが、これで全要素を指定することができます。第2引数は見ての通りhから始まる要素を取り出す正規表現です(hは途中でもOKです)。awkの使い方は他にも色々あるのですが、キリがないのでこの記事では割愛します。ログから会員番号を抽出してみるどのようなデータをログに残しているかはシステムやサービスによって当然異なるとは思うのですが、ログをちょっと眺めてawkコマンドを活用すれば、膨大なログの中から必要な情報を抜き出すことができます。自分の場合、障害にかかって画面を表示できなかったサイト会員がどれくらいいるのか調べる必要がありました。出力されていたエラーログは大体こんな感じでした。/error/no/genninn.jspが存在しません。~~~(中略)~~~memberCode=213122~~~(中略)だいぶ端折ってしまいましたが、こんなログ大量に出力されていました。この中には今回の障害には関係ないものも含まれているので、今回の障害に関連したものだけを抽出してみます。memberCode=111133...awkも他のコマンド同様、パイプで繋いで使うことができます。最初にgrepコマンドで対象ファイルの中で「ERROR」を含む行を取得。対象ファイルの名前を含む行を抽出します。ここでようやくawkが登場。各行の中からmemberCodeを含む要素を抽出しています(memberCodeはスペース区切りで15番目でした)。sortは文字通りのソート、繰り返しエラーにはまっている会員の重複を排除するのにuniqを使っています。当時の稼働系サーバーは一桁の台数だったので、各サーバーに入って同じコマンドを叩き、出てきたものをsort|uniqしてまとめました。ここでさらにawkを活用してやれば「memberCode=」の部分を削るなんてこともできそうですね。結果...実に100以上の会員がgenninn.jspを表示できずに困っていたことが判明しました。我ながら本当に酷いですね...悔い改めつつ今日はこんなところで。vagrant2年以上前にフレームワークを使わずにPHPで書いたサイトがあるのですが、久しぶりにAnalyticsを見たらまだ日に30PVくらいのアクセスがありました。今ならもっと良いサイトにできそうな気がしたので大規模改修をしようと思い立ち、Laravelベースで再実装することにしました。いうわけで早速Laravelの開発環境を作ったので、経過をまとめておきます。boxを追加そもそもHomesteadとはざっくり言えば、Laravelの開発環境をまとめたBoxです。Webサーバー、PHP7.0、MySQL、Postgres、Redis、Memcached、Nodeやその他、素晴らしいLaravelアプリケーションを開発するために必要な、クールなツールを全部含んでいます。これさえ入れておけば大体は事足りそうです。laravel/homestead途中でどの環境に入れるのか聞かれるので、virtualboxを選択します。