laradockにvue-cliをいれて動かしてみた
こんにちは！株式会社スマレジ、開発部のmasaです。
通勤中、あちらこちらでクリスマスソングが流れてきて、時間の流れるのを早く感じます。。。そうか、もうすぐ入社１年なんだな。
さて、今日は前回の続きで、laradockにVueを入れた時の備忘録です。
Vue-cliとバックエンド
masaは基本、仕事はバックエンド中心で、フロントはスマレジの古いページにjQueryを入れたりするくらいだったのですが、最近Vueを触るお仕事があり、それ以来個人的な範囲でVue.jsを触ってみています。
それで、前回Laravelを入れたので、その環境でVueを触ろうとしたのですが。。。
Laravelはフロントエンドも開発しやすい仕組み(Laravel-mix)が入っているのですが、それはVue-cliとは別になっているものです。しかし、Laravel-mixベースで開発してしまうと複数のプロダクトで複数のフレームワークを利用してサービスを提供している環境だと、フロントエンドの成果物を使いまわす際に他のフレームワークへの移植時の作業が増えてしまいます。
「せっかくVue-cliという共通で使えるツールがあるのだから、バックエンドフレームワーク側でVue-cliを導入できるようにしたい」という発想から、今回はLaradockにVue-cliを入れることに。
ちなみにVue-cliの導入に参考にしたサイト様
というわけで、Vue-cliを覗いたのですが...
Vueのソース自体はわかるのですが、
1. buildファイルの生成場所の指定
2. LaravelのViewファイルとの紐づけ
この辺りがわかんねえええ！となり、ググってみることに。
お世話になったサイト様
↑の疑問がこの記事でまるっと解決しました。
ポイントは紐づけ用のコントローラ（記事でいうところのSpaController）とvue側の設定ファイル(vue.config.js)を追加してやらなければならないという点です。
使用している開発環境が違いますが、Laradockでも問題なく動作しました。
Laradockを触ってみた！
こんにちは！株式会社スマレジ、開発部のマサです。
世間的にはポッキーの日な今日ですが、レトロゲームが好きなマサにとっては、
↓のほうが大イベントです！
今日は1995年11月11日に発売されたロマンシングサガ3のリマスター版の発売日なんです！
もし、「小さいころ遊んだ！」なんて方がいらっしゃったら、ダウンロードして遊んでみては？最近のゲームらしくマルチプラットフォーム対応ですので、スマホで、switchで、PCで遊べちゃいます！
で、話がそれましたが、今日はLaradockを触ってみたので、そのお話（というか備忘録）をしたいと思います。
Laradockとは
Laravel + Docker = Laradock. つまり、Laravelの開発環境をDockerにまとめたもの・・・なんですが、その実態はWeb開発でよく使うミドルウェアのイメージを詰め込んだ汎用開発コンテナ群としての意味合いが強いものです。
なぜ、そんなことを思うのかというと、githabからcloneして、docker-composeを見てみたのですがすさまじい数のミドルウェアコンテナの定義が。
ごくごく一部の抜粋ですが、DB系でもRDB系はもちろん。Neo4jのようなグラフDB、MongoDBのようなNoSQLも入ってます。（ちらほらしらんやつも・・・）
これだけあるとどのフレームワーク使うにしても便利ですね。
実際、Laradockに後乗せでCakePHP3を入れている人もいるみたいです。
実際に触ってみた。
動作に当たっては、下記のサイト様を参考にしました。
ちなみに、自宅環境をVSCodeからPHPStormに変えました。（便利なんだもん。個人ライセンス、月額1000円ちょいだし）
1. SourceTreeからgit clone.(割愛)
好みもありますが、私はDドライブ直下に配置。フォルダ名はlaradock.
2. XDebug用の設定
上の参考サイトにも載っていますが、注意点はXDebugのデフォルトポートの9000はphp-fpmとバッティングするみたいなので、9001あたりを使うのと、設定するxdebug.iniは２か所(私の環境だと`D:/laradock/workspace`と`D:/laradock/php-fpm`)あるところです。
3. コマンドプロンプトでdocker-compose実行
```
d:
cd laradock
docker-compose up -d --build nginx mysql phpmyadmin redis workspace
```
そこそこ時間がかかります。
4. PHPSTORM側の設定
これは完全に上のサイト様の操作と同じなので割愛。
ざっくり手順を書くとこんな感じでした。
Laravel以外にもPhalconとかこれに乗せて楽できないかなとか、実験してみたいと思っているので、やったらそのうち書きます。
非常に横着にCakePHP2でOAuthを触ってみた
こんにちは！株式会社スマレジ、開発部のmasaです。
本格的に寒くなってきましたねー。僕はめんどくさがって今週は長袖のシャツで通しましたが、そろそろ衣替えしないとだめな感じです。(服かわんと・・・）
今日は、OAuthに触ってみたので、そのまとめです。
OAuthって？
簡単に言うと、SNSのアカウント情報をほかのアプリに共有するときに走る認証です。
↓みたいな画面がでてくるのが、OAuth認証です。
OAuth認証はいわゆる国際規格ではなく、SNS事業者から提供されている業界標準的な方式なので、コロコロ・・・とまではいいませんが、不定期に認証方式やSNS事業者ごとの連携方法が変わります。
僕はTwitterアカウントでSSOしたくて、上の記事を今回は利用しましたが、いわゆるBOT対策なのか、認証に必要な入力情報が異様に多く(しかも全部英語入力）、開発者用アカウントを取得するだけで結構疲れました。。。
CakePHP2.xでOAuthを横着に動かす
弊社プロダクトが一部CakePHP2.x系を利用しているので、勉強もかねて軽く触ってみているのですが、それを使って認証をしてみました。
ただ、「とりあえず、ローカルでtwitterの認証画面がでてきて、OKしたらどんなのがとれるんかなー」くらいのノリでやっただけなので、非常に雑な方法です。
ちなみにトークンの取得やらは上のリンクを見てください。ここでは書きません。
1. twitterのOAuth認証のサンプルプログラムを取得
僕がやったときは、以下のサイトを参考にしました。
サンプルプログラムのgithabは↓
2. ダウンロードしたサンプルをapp/webrootに直置き
自分でやっておいてアレですが、これはひどい。
ちゃんと作るなら、サンプル見ながら、componentに焼き直して、エンドポイント作成・・・というのが真っ当なんだろうけど、さくっと動かすにはめんどくさかったんです、はい。
webroot直下に置けば、ルーティングされないため、直接そのURLをたたくことで簡易エンドポイントになります。サンプルプログラムでいうところのlogin.phpがそれにあたります。
3. Twitter Developerで認証後のリダイレクト先を設定
上記のサンプルプログラムや解説にも載ってますが、リダイレクト先をサンプルプログラム内のmember.phpに向けます。
以上のステップを完了して、エンドポイントをたたいて、許可をすると・・・
こんな感じで取れます。(member.phpは帰ってきた内容をvar_dumpしているページ）
このほかにも最近の自分のつぶやきなんかも一緒に撮れているのが確認できます。
というわけで、簡単OAuthでした。
docker-composeでローカルでhttpsを試す
こんにちは！株式会社スマレジ、開発部のマサです。
秋も深くなってきましたねー。キンモクセイの甘い香りが通勤中に漂ってきて、季節を感じます。
今日は備忘録的な内容です。
DockerでHTTPSをローカルで利用する
ローカルでHTTPSで動作確認をしたいと思った時に調べた方法です。
以下の記事を参考にしました。
Dockerにはhttps-portalというコンテナが提供されています。
これをdocker-compose.ymlに記載すると、dockerで構築したコンテナをhttps可させてくれるという優れものです！ しかも証明書の取得なども全部自動で！
実際に書いたものを一部改変したdocker-composeはこちらです。
services:
https-portal:
image: steveltn/https-portal:1
ports:
- "80:80"
- "443:443"
depends_on:
- web
restart: always
environment:
DOMAINS: 'localhost.example.com -> http://web'
STAGE: local
volumes:
- ./org-chimata-ssl-certs:/var/lib/https-portal
web:
build: ./v1
volumes:
- ./v1:/var/www/html
- ./docker/php.ini:/usr/local/etc/php/php.ini
記載の仕方はフーンこんなもんかと思っていただければ。
ポイントはSTAGE: localの指定です。
これ、STAGE: productionに変更すると、さっき言った証明書取得をして、localだとオレオレ証明書に切り替えてくれるんです。
頭いい・・・！
ドメインの指定もできるので、複数コンテナを立ち上げて、ドメインを切り替えて開発している人も対応できるのがうれしいですね。
というわけで、備忘録とちょっと感動したので書いてみました。
SQLでValidation
こんにちは！株式会社スマレジ、エンジニアのmasaです。
ぐっと気温が下がってきましたねー。つい２週間くらい前までは半袖の社員さんも多かったですが、今週はブレザー姿も増えてきました。気温の差が大きい時期なので皆様も体調にはお気を付けください。 今日は仕事中に教えてもらったテクニックを一つご紹介したいと思います。
MySQLでValidation
Validationとはソフトウェア開発では入力値チェックのことを指します。 フォーム、もしくはCSVやリクエストから入力される値が想定されたフォーマットになっているかを検証する処理を指すことが多いです。 CakePHP等のフレームワークを使って開発をしていると、Validation条件を記載するファイルやPHPがあると思います。 フォームの入力内容のValidationの場合はそれほど問題にはならないのですが、CSVやWebAPI連携の場合、大量のデータの検証を行うため、Validation処理に時間がかかってしまうことがあります。 これを高速化するために、ValidationをPHPではなくDBMSを使おうというのが今回のネタです。
考え方
例えば、「符号なし整数10桁以下のユーザID（必須）」について、「1以上で10桁以内の整数が渡ってきているか」を検証します。
- 送られてきたリクエストを一時テーブル(ここではtmp_users）に保存する。
- 保存した一時テーブルに下記のようなSELECT文を発行する。
SELECT id FROM tmp_users WHERE id = 0 OR --// MySQLでは文字列を数値比較すると0になるので CHAR_LENGTH(id) = 0 OR --//空文字チェック id > 10000000000 --// 10桁の整数かどうか。 ;
WHERE句の指定からわかるようにここでヒットしたリクエストはバリデーションエラーになります。 実際にシステムに組み込むなら、別に検証結果用の一時テーブルを用意しておいてやることになると思います。 ちょっとした発想の転換ですが、こうすることで、DBMS側で検証処理を行うことができるので、 Webサーバ側でやるよりも格段に高速化できる場合があります。
ちょっとしたUMLを書くのに便利なツール, "Lucid Chart"の紹介
こんにちは！株式会社スマレジ, 開発部のmasaです。
今日は Brooklyn Roasting Company 北浜店にきています.
いつもは以前ブログでも紹介した難波店に休日はいることが多いのですが, 今日は北浜で用事があったのでよってみました.
店内の様子.（観葉植物がぎっしり置かれているのが印象的）
ひかえめなロゴ（そして安定のピンボケ）
テラス席からは中之島を一望できます.
コーヒーの味は僕が飲んだ分には難波店の変わらないおいしさでした.
北浜店も規模は小さいですがコンセント付きのテーブルもありますので, カフェで作業されたい方にはおすすめです.
こういうおしゃれなカフェでMac Book Proを開いて, darkテーマのIDEでエスプレッソ片手に開発作業…とてもよく見る光景ですが, 今日紹介するのは, IDEでもコーディングツールでもありません. 開発ツールでも設計書でよく使うUMLを書くおしゃれツール, "Lucid Chart"をご紹介します.
Lucid Chart
皆さんはUMLを書かなきゃいけないとき、何を使いますか？ Windowsユーザの僕は大体Power Pointで作成→Excelに張り付けが多かったです.
あとはUMLの種類によりますよね. ER図はMySQL WorkBenchのER図生成機能をつかったりもしましたし。
ただ、やっぱりOfficeツールで書くとめんどくさいし、矢印の整理が大変だし、masaスキルでつくるとみた目がもっさりしてしまう。
↑みたいな感想を抱いている方がもしいらっしゃったら、"Lucid Chart"がおすすめです。
こんなのがさくっと書けます
さくっとってどれくらいかというと、20分くらいでした。
使い方をあれこれここで書くよりも、↑の画面を見ていただいたほうがイメージは沸くと思います。
これの使いやすいところは、「矢印」ですね。
この中間の青い点以外にも自由に分岐をワンクリックでつくることができるので、迂回させたり、整理させるのがとても楽でした。
ちなみに矢印の起点と終点も同じ感覚で、「矢印の形を変えることなく」（これが大事）アナログにずらすことができます。
僕もまだ使いだしたばかりなので、ほかにも便利機能はまだまだあると思います。
パワポにうんざりしている方は一度お試しください。
社内イベントでもキャッシュレス
こんにちは！株式会社スマレジ、開発部のマサです！
ついに増税が始まっちゃいましたねー。。。
軽減税率対応でスマレジを導入していただいたお客様がたくさんいらっしゃって、
仕事のやりがいは増える一方で、１消費者としては素直に萎えます(笑)
今回は、増税がらみで最近よく聞く「キャッシュレス」を僕が体験した話です。
ある日のおおきにデリバリー
何度か紹介していますが、スマレジ大阪本社では希望者を募って週に１回、おおきにコーヒー様のデリバリーサービスを利用しています。
過去のブログは↓
このイベント、今では人が人を呼び、多いときで20点以上の注文が来るくらい盛況です。
そして、それらの集金を現金でやっていたのですが、案の定、机の中に簡易コインケースが必要になったり、小銭が足りなくおつりが出せなかったりと、不便がありました。
そこで、よく注文される先輩社員さんが音頭をとってくださり、先週から一部の集金をPaypayで行ってます！
キャッシュレスは交通系マネーで自販機・コンビニで支払いくらいしか使ったことがなかった僕なのですが、入れてみるとめっちゃシンプルで便利でした！
QRコードやID指定など、支払いのインターフェースもいろいろあって便利です！
詳しい使い方は↓操作も直感的でわかりやすかったです！
そしてうれしいのが、キャッシュレス決済はポイントの還元があるところ。
それも、行政が推し進めているキャッシュレス消費者還元事業の影響ですね。
キャッシュレス消費者還元事業については↓
Paypayについては、わがままを言うと・・・API公開してほしいですねーーー。
支払い履歴をAPI取得できたりすると、家計簿アプリとか「使いすぎアラート機能」とかを自前で用意できるので(笑)
