Blogブログ

Category: Uncategorized

Uncategorized

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築

タイトルの通り、Laravel + Vue.js でOauth認証を利用したサンプルSPAシステムの構築を行いました。 github https://github.com/shnr/laravel_oauth VM立ち上げ、Laravelインストール Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [1] VM立ち上げ、Laravelインストール BrowserSync連携 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [2] BrowserSync連携 簡易CRUDの作成と認証機能の実装 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [3] 簡易CRUDの作成と認証機能の実装 Oauthサーバの実装 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [4] Oauthサーバの実装 Vue画面構築 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [5] Vue画面構築

Uncategorized

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [2] BrowserSync連携

Laravelに同梱されてるlaravel mixの設定まで。 まずはVM内で走らせてみる vagrant ssh cd /home/vagrant/code/myproject/ npm install npm run dev コンパイルはOK。 npm run watch このままだとエラーを吐く。cross-envが無いらしいのでインストール。 npm install –save-dev cross-env そしてwatch。 VM上だとwatch-pollとする必要があるそう。 npm run watch-poll 成功。VM上なのでブラウザを開かないため、手動で、、 なおbrowsersyncにはポートが必要になる。 http://myproject.test:3000/ 一見成功。 しかし、コンパイルに時間かかる。。。 さらに、viewsの変更には反応しない。。。 これではちょっと使えない。 VMに入らず、ローカルのディレクトリ上で走らせてみる node_modulesは再度インストールしなおす exit cd myproject rm -R node_modules/ npm install そして実行。 npm run watch ちゃんとviesにも反応。 しかも早いくて快適！

Uncategorized

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [1] VM立ち上げ、Laravelインストール

Laravelでの開発環境をHomesteadで構築する備忘録。 VirtualBoxはインストール済みの前提。 Laravel開発環境を整える 複数のプロジェクト管理と共有を考慮し、各ディレクトリごとにHomesteadをインストール。 Homesteadのインストール プロジェクトディレクトリを作成 $ cd my/projects/ $ mkdir project/ composer install $ composer require laravel/homestead –dev homesteadの設定 Vagrantfile, Homesteadをmakeする $ php vendor/bin/homestead make Homestead.yamlを編集。 $ vim Homestead.yaml foldersのmapは初期設定で作成したディレクトリとなっている。 あとでmyapiというディレクトリ名でlaravelをインストールすると想定し、sitesを変更。 また，node_modulesは同期しない。 Homestead.yaml folders: – map: /my/projects to: /home/vagrant/code sites: – map: myapi.test to: /home/vagrant/code/myapi/public type: “apache” options: rsync__args: [“–verbose”, “–archive”, “–delete”, “-zz”] rsync__exclude: […]

Uncategorized

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [5] Vue画面構築

Laravelのルーティング api.phpを編集。 リソースコントローラを一度に登録する方法。 Crudメソッドが全て登録される。 URLやパラメータは、以下が詳しい。 https://readouble.com/laravel/5.7/ja/controllers.html#resource-controllers api.php // task全体を設定 Route::group([‘middleware’ => ‘auth:api’], function () { Route::resource(‘task’, ‘TaskController’); }); webはSPAにするので、 app.blade.phpを表示させるようにしておく。 web.php Route::get(‘/’, function () { return view(‘app’); }); Auth::routes(); // Route::get(‘/home’, ‘HomeController@index’)->name(‘home’); // Route::get(‘/tasks’, ‘TaskController@index’); // Route::post(‘/task’, ‘TaskController@store’); // Route::delete(‘/task/{task}’, ‘TaskController@destroy’); Vue開発 Topをvueに TOPページからSPAとなるので、Laravel テンプレートの修正。 app.blade.php <!doctype html> <html lang=”{{ app()->getLocale() }}”> <head> <meta charset=”utf-8″> […]

Uncategorized

PWA

PWAとは PWA = Progressive Web Apps モバイル端末のブラウザで、アプリを使うようなUXを提供するための技術。 これまでネイティブアプリでしか実装できなかった、プッシュ通知、端末の情報センサーを利用する、端末の支払い機能を利用する、などが可能になる。 敷居の高いアプリ公開・審査などが不要になるので、工数を掛けずユーザーのエンゲージメントや利用満足度を高める事が狙い（だと思う） PWA参考・活用事例 https://pwa.rocks/ 海外では緩やかに増加傾向。しかしまだ実用的とは言い難い。 現状、Androidでの実装が積極的に進められている。 主に以下の実装が可能。 データの保存 Bluetoothアクセス 音声認識 バックグランドでの稼働 プッシュ通知 Web App Bannerの表示（ユーザーにPWAのインストールを促す） Splash Screenの設置   iOSでも11.3でPWAが強化された。 ただしプッシュ通知ができないなど、実装は限定的。 テスト的な実装となりそう。 iOSで現状可能な事は、 ・geolocation ・ジャイロなどのセンサー関連情報の取得 ・音声出力 ・音声合成 ・Apple Pay ・Payment Request APIの利用 – Service workerとは リッチなオフライン体験、定期的なバックグラウンド同期、プッシュ通知など、これまでネイティブアプリを必要としていた機能が Web にもやってきます。Service Worker はそれらの機能を提供する基盤技術 https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja デモサイト：https://simple-push-demo.appspot.com/ 今後の考察 iOSは基本的にクローズドにすることにより安全性や品質を保っている印象。 そのためAndroid並にPWA機能を許可することはないかもしれない。 とはいえプッシュ通知のためにアプリを作るなどの事例もあるので、このあたりの許可はするかもしれない（アプリの品質維持という意味で）

design

Photoshopのスライス時、色味が変わる問題

原因 カラープロファイルが違うこと。 DTPとWEBで設定が違うため、まれにこの様なファイルがある場合があるらしい。 WEBで書きだす場合には、sRGB(Standard RGB)に変換すればOK。 解決策 ・まず、現在のカラープロファイルを確認 Photoshopの左下あたりにある▶をクリック、”Document Profile”を選択。 sRGBになっていればOK。 違う場合は、 Edit -> Convert to Profile で　sRGBに変換する。 ・Photoshopのカラー設定を確認 Edit -> Color setting で、Settingを”Japan Web/Internet”に変換します ・その状態でスライス（Web用に保存） 以下にチェックを入れる ・Optimized ・Enbed Color Profile ・Convert to sRGB Previewは下を選択（これは関係ないかも） Use Document Profile ■参考 http://mizyupon-rpg.com/posts/612.html http://tokyo-d-plex.com/~tomokotamamura/myblog/?p=115 http://ameblo.jp/honeybunnybaby017xxx/entry-10223660081.html http://noir.mods.jp/web/?p=10

git

gitで差分のエクスポート

差分抽出にはgitは欠かせません。手動でやるなんてもってのほか。間違いが起こりやすい上に面倒です。 今回ちょっと悩むところがあったのですが、この機会によく使う部分をまとめておきます。 基本の使い方 まず定番の、最新コミットの差分抽出。 git archive –format=zip –prefix=_diff/ HEAD `git diff –name-only HEAD HEAD^` -o _diff.zip コマンドを説明すると、 ・git archive -> archiveコマンド命令 ・–format=zip -> zipに固めてね、という事 ・–prefix=_diff/ -> エクスポート先のディレクトリ名 ・HEAD -> 抽出元となるコミット ・`git diff –name-only HEAD HEAD^` -> HEAD と HEAD^ の差分のファイル一覧を返して、ということ。 ※補足 特定のコミットを指定するときは、^n　と、~n　というように指定します ^n -> n番目の親 ~n -> n世代目の親 ということですが、普通に使う分には~nで良さそう。 なので、例えば4つ前のコミットと3つ前のコミットの差分が欲しい時は、 git archive –format=zip –prefix=_diff/ HEAD […]

Uncategorized

SSH on Mac

mac でterminalを使ったssh接続の備忘録。 LINUX １　サーバOSとバージョン確認 cat /etc/`ls /etc -F | grep “release$\|version$”` ２　パスワード認証の接続を許可。 vim /etc/ssh/sshd_config /PasswordAuthentication　で検索し、yesに。 これでパスワード接続が可能に ssh再起動。 /etc/init.d/sshd reload ３　.sshディレクトリの作成 ※所有者がssh接続するユーザーである必要があるので、そのユーザでなければ、ログインしなおす mkdir ~/.ssh chmod 700 ~/.ssh MAC OS X ４　ターミナルでRSA鍵作成 ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which to save the key (/Users/yyyyyyy/.ssh/id_rsa): （リターンを入力） Enter passphrase (empty for no passphrase): （リターンを入力） […]

Uncategorized

備忘録：phpmyadminで大きめデータのアップロード

xamppのphpmyadminで、up_load_filesizeが変更できなかったので探したところ、 ローカルからアップロードする手法を知ったのでメモ。 １．xampp/phpmyadmin/config.inc.phpに以下を追記 $cfg[‘UploadDir’] = './upload'; 同ディレクトリ内に、config.sample.incみたいな名前のファイルがあるので、記述方法は参考になる。 ここでそのた設定も変更できそう。   ２．上記で記述したディレクトリを作成、その後アップロードしたいデータを放り込む。 ３．するとimport画面で、ファイル選択が出来る画面が出てくる。   自分の場合はこれで上手く行きました。