Blogブログ

Month: October 2018

Laravelで管理画面作成メモ

Laravelの管理者用の画面作成。 利用ライブラリ このライブラリを使ってみます。 https://github.com/z-song/laravel-admin インストール Vagrant環境なので、sshでログイン。 vagrant ssh cd code/laravel/ パッケージをインストールします。 composer require encore/laravel-admin php artisan vendor:publish –provider=”Encore\Admin\AdminServiceProvider” 管理者テーブルの作成 これで、/config/admin.phpができているはず。 このファイルで、インストールディレクトリ、DBのテーブル名などを定義できる模様。 今回は特に変更せず、そのままテーブルの作成。 php artisan admin:install おっと、エラー。 Syntax error or access violation: 1103 Incorrect table name ” (SQL: create table “ (`id` int unsigned not null auto_increment primary key, `username` varchar(190) not null, `password` varchar(60) not […]

Vagrant centos上のLaravelからメール送信設定

vagrant上のLaravelでメール送信したところ、 530 5.7.1 Authentication required というエラーが返ってきた。。。 そこからメールを送れるようにするまでのログ。 まず、postfixはインストールされているか? whereis sendmail 次の様に表示されれば、パスが通りインストールされている。 sendmail: /usr/sbin/sendmail 次に、postfixのconfファイルを修正 $ sudo vim /etc/postfix/main.cf # localhost -> all inet_interfaces = all # all -> ipv4 inet_protocols = ipv4 # 以下は追加分 relayhost = [smtp.gmail.com]:587 smtp_use_tls = yes smtp_sasl_auth_enable = yes smtp_sasl_password_maps = hash:/etc/postfix/sasl_passwd smtp_sasl_tls_security_options = noanonymous smtp_sasl_mechanism_filter = plain smtp_sasl_security_options = noanonymous […]

Vue.js 3分でHot reloadつき開発環境構築

Vue CLI を使う。 Make devenv by Vue CLI 3 https://cli.vuejs.org/ Install cli. $ npm install -g @vue/cli Create vue project. $ vue create vuetest $ cd vuetest Hot reload setting. $ npm i –only=dev –no-audit && npm i –only=prod && cross-env NODE_ENV=development vue-cli-service serve –open Have a fun! $ npm run serve

VB内Ubuntuとのファイル共有メモ

デフォルトでは sf_~ というprefixのついたフォルダが共有対象となるが、 独自指定したい場合のメモ。 1 ホストマシンで、共有用のフォルダ作成 例: $ mkdir /Users/dev/localFiles 2 上のフォルダを、VBで共有フォルダとして登録 設定ー>共有フォルダーー>その他 自動マウントと永続化するにチェックする。 ※永続化オプションがないが何故? 3 VB Ubuntu立上げ 4 VB内に共有用ディレクトリを作成しておく $ mkdir /home/shareWithLocal 5 共有フォルダのマウント 以下、VMで行う。 mount.vboxsf のシンボリックリンクを作成。 $ sudo ln -s /opt/VBoxGuestAdditions-4.3.10/lib/VBoxGuestAdditions /usr/lib/VBoxGuestAdditions スクリプトを事項可能に。 $ sudo chmod u+x /etc/rc.local rc.localを編集。 $ sudo vim /etc/rc.local 以下の様に編集する。 mount -t vboxsf /home/shareWithLocal localFiles 参考:https://qiita.com/SUZUKI_Masaya/items/3444a010cf9903a088b3 6. Ubuntuを再起動 7. […]

多言語ページ指定メモ

language code 指定 各種lang codeについて。 https://www.w3schools.com/tags/ref_language_codes.asp 中国語のlanguage code https://www.w3.org/International/articles/language-tags/index.ja Chinese(簡体)(Simplified) zh-Hans Chinese(繁体)(Traditional) zh-Hant 正しい書き方は違うという説も? 中国語簡体字サイト:html lang=”zh-cmn-Hans” 中国語繁体字サイト:html lang=”zh-cmn-Hant” https://www.export-japan.co.jp/blog/%E4%B8%AD%E5%9B%BD%E8%AA%9E%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E8%A8%80%E8%AA%9E%E3%82%B3%E3%83%BC%E3%83%89%E6%8C%87%E5%AE%9A%EF%BC%88lang%E5%B1%9E%E6%80%A7%EF%BC%89/ ただ、Googleはhtmlのlang指定はみていないっぽい。 https://seopack.jp/seoblog/20161111-use-hreflang/ hreflangについて alternate タグでhreflangを指定する。 参考: https://support.google.com/webmasters/answer/189077?hl=ja 例: <link rel=”alternate” hreflang=”en-gb” href=”http://en-gb.example.com/page.html” /> <link rel=”alternate” hreflang=”en-us” href=”http://en-us.example.com/page.html” /> <link rel=”alternate” hreflang=”en” href=”http://en.example.com/page.html” /> <link rel=”alternate” hreflang=”ja” href=”http://ja.example.com/page.html” /> <link rel=”alternate” hreflang=”x-default” href=”http://www.example.com/” />

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画面構築

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [4] Oauthサーバの実装

以下を参考に、実装を進めます。 https://readouble.com/laravel/5.7/ja/passport.html Laravel Passportを使ってみます。 このライブラリはOAuthサーバーとして有名なleague上に構築されているとのこと。 https://oauth2.thephpleague.com/ なお、Laravelのインストールとデフォルトのユーザー認証構築済みの前提。 インストール composerでインストール composer require laravel/passport client, accessTokenを格納するテーブル作成 php artisan migrate accessToken生成のためのキーを作成 php artisan passport:install Userモデルへ、traitの追加。 namespace App; use Laravel\Passport\HasApiTokens; use Illuminate\Notifications\Notifiable; use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Foundation\Auth\User as Authenticatable; class User extends Authenticatable { use HasApiTokens, Notifiable; AuthServiceProviderへメソッドを追加。 AccessTokenの発行・失効をこれで管理するよう。 /oauth/authorizeなど一通り使えるURLがこれで設定されるとのこと。 AuthServiceProvider.php use Laravel\Passport\Passport; public function boot() { Passport::routes(); } 設定ファイルで、認証APIリクエストの方式を変更。 […]

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [3] 簡易CRUDの作成と認証機能の実装

ここでは公式サイトの中級チュートリアルを参考に。 https://laravel.com/docs/5.1/quickstart-intermediate 認証が手早く実装出来るのはとても楽。 データベース セットアップ データベースを作ったら、.envの編集をして接続確認をしておく。 ※MAMPの場合は、/config/database.phpでunix_socket の調整が必要。 ‘unix_socket’ => ‘/Applications/MAMP/tmp/mysql/mysql.sock’, テーブル作成 今回はUsers, Tasksが必要となる。 Usersは既にデフォルトでLaravel migrationsファイルが存在するのでそれを使う。 Tasksは下記の様にmigrationする。 php artisan make:migration create_tasks_table –create=tasks テーブルは、以下のように定義。 CreateTasksTable.php public function up() { Schema::create(‘tasks’, function (Blueprint $table) { $table->increments(‘id’); $table->integer(‘user_id’)->index(); $table->string(‘name’); $table->timestamps(); }); } 編集したら、migration. php artisan migrate show tablesして, Tableが出来ていることを確認。 認証 Laravelでの認証は超簡単 php artisan make:auth としたあとに、 php artisan migrate […]

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にも反応。 しかも早いくて快適!

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: […]

12