最近、Termius という SSH クライアントを購入しました。
ちょっとお高いですが、Windows, Mac, Android, iOS とマルチプラットフォームなので、デスクトップ機(Windows)、スマホ(プライベート用の Xperia、仕事用の iPhone)にインストールしていろいろ遊んでます。

この Termius ですが、Authy という2段階認証アプリを使用します。Google Authenticator じゃダメなのかなーと思っていたら、Authy は完全互換性がある上にマルチデバイスでアカウント同期などもできます。iPhone でコードを表示させておいて Android でコード送信、なんてことも可能。

ここで気になり始めたのが、「そもそも2段階認証ってどういうことやってんの」という疑問。
実際に作ってみた。

続きを読む

仕事で Node.js を使う機会があり、勉強がてら自分でいろいろ動かしてみました。
以前から興味のあった Discord の bot 作りを始めて、

  • そのコードを動作させる場所がほしい
  • → Docker の環境で動かそうぜ
  • → ついでに Web サーバも立ち上げてみようぜ

と見事に目的と手段が逆転し、Docker 環境下で Node.js を使った Web サーバを立ち上げてみました。

続きを読む

Laravel 標準のログイン画面例

まずは謝罪を。
以前のエントリ「Vue.js と本気で戦ってみた ~ 第1章 : Laravel の RESTful API を使って管理画面を実装」の冒頭で

(略)「SEO 的には JavaScript による動的ページより、静的 HTML のほうがいい」って噂を耳にしたので、フロントは Laravel で普通に HTML を出力し、管理画面ではがっつり Vue.js で動的にしようと企み(略)

前言撤回します。フロントでも Vue 使いたくなりました。

さて、具体的にどこで Vue を使うかというと、なんとログイン
ま、まずは話を聞いてください!

ことの発端は、以前 FuelPHPCities History Project を実装していた頃のこと。
ページ上部に常にログインボタンがあり、「ログイン完了後、ボタンを押したページに戻ってくる」という仕組みを実装していました。
具体的にはログインページに GET パラメータを付け、ログインが完了したらそのパラメータが示す URL にリダイレクトするという方法で実装していました。
今回 Laravel で実装するにあたり、標準搭載されている Auth でログインを作成してたのですが、同様の機能を実装できないかと思い悩んだ末、

ログインしたらそのままリロードすればいいじゃん

というよく分からん結論に達しました。Auth コントローラをいじくり回せば同様の実装はできると思うのですが、API や Auth コントローラの仕組みを理解するためにも、勉強がてらログインを独自実装してみました。
まあそもそも REST っていう概念自体がステートレス=セッション管理を行なわないっていうものなので、RESTful ログインっていう用語自体が矛盾してるんですけどね……

続きを読む

Vue.js と RESTful API でバリデーション

で Vue コンポーネントを分割し、ソースコードの見通しがよくなりました。
しかしまだ大事な機能を実装していません。
今回作った固定ページ管理は「タイトル」「スラッグ(URL に使う ID みたいなやつ)」「本文」の3つのパラメータからできていますが、すべて入力必須、さらにスラッグは一意でないといけません。
Laravel の API にバリデーションの機能を組み込むとともに、モーダルの編集フォームにエラー表示を追加していきましょう。

続きを読む

Vue.js で 管理画面を実装

Cities History Project を勢いに任せて Laravel 化してます。

「SEO 的には JavaScript による動的ページより、静的 HTML のほうがいい」って噂を耳にしたので、フロントは Laravel で普通に HTML を出力し、管理画面ではがっつり Vue.js で動的にしようと企み、まんまとハマりました。

やりたいことは、固定ページの管理画面
フロントで /page/{slug} でアクセスすると固定ページが表示され、ユーザ認証すると /admin/pageページの管理画面が開きます。
管理画面内では RESTful API で

  • GET /api/admin/page : ページ一覧
  • GET /api/admin/page/{id} : ページ詳細
  • PUT /api/admin/page/{id} : ページ更新

という定義をしました。(なお API はトークン認証をしないと使えないようにしています)
これを Vue.jsAxios で組んだのですが、まぁ Vue のコンポーネントとかイベントの伝播とかで苦労した……
結局、どうしても分からなかった箇所は jQuery に逃げました。(特にモーダルダイアログの表示/非表示を切り替えるところ)

続きを読む