Author: WEB制作

LaravelにTwitter、Facebook、Googleログイン用のパッケージsocialiteをインストールする(その2)

LaravelにTwitter、Facebook、Googleログイン用のパッケージsocialiteをインストールする(その2)

● ルータの修正 前回はソーシャルログインを提供しているプロバイダごとにルーターを指定しましたが、以下のようにまとめるとスッキリする上に新たにプロバイダが増えた場合も対処が楽です。 routes/web.php Route::get(‘auth/{provider}’, ‘Auth\AuthController@RedirectToProvider’); Route::get(‘auth/{provider}/callback’, ‘Auth\AuthController@CallbackFromProvider’); app/Http/Controllers/Auth/AuthController.php /** * ソーシャルログインのプロバイダへリダイレクトします * * @param string $provider (‘twitter’ or ‘google’ or ‘facebook’ ) */ public function RedirectToProvider($provider) { return Socialite::driv

LaravelにTwitter、Facebook、Googleログイン用のパッケージsocialiteをインストールする(その1)

LaravelにTwitter、Facebook、Googleログイン用のパッケージsocialiteをインストールする(その1)

  RailsライクなPHPフレームワークlaravel。 ここ数年でPHP業界標準になりそうな勢いがあります。 弊社ではlaravelの実行速度を考慮して「サーバー要件PHP7以降」の案件(最近の新規案件)に使用していく方針を取っております。 で、このlaravelでSNSログインを実装する方法をここに記載しておきます。 ● まずLaravelのインストールをおさらいします 1. composerから laravelをインストール composer require “laravel/installer” 2. laravelのパスを通す .bash_profile に以下の行を追加(YOUR_LARAVEL_DIRECTORYのところは適宜書き換えてください。) export PATH=”/YOUR_LARAVEL_DIRECTORY/vendor/bin:$PATH” 3. laravelコマンドでアプリケーションを作成 次の例では test というアプリケーション作成します laravel new test 4. データベース設定

MySQLのsql_mode正しく設定されていますか?

MySQLのsql_mode正しく設定されていますか?

MySQLのこんな事象に遭遇したことはありませんか? ・MySQLのint型カラムに 空文字 ” をインサートすると 0 になる。 ・MySQLのdatetime型カラムに 空文字 ” をインサートすると 0000-00-00 00:00:00 になる。 はい。おそらく低いバージョンのMySQLで、かつ sql_mode が未設定(デフォルトのまま)です。 今後MySQLのバージョンが上がった際にデフォルトの sql_mode が変わって、それにともないMySQLの挙動が変わる可能性があります。 結構危険ですので、MySQLのsql_modeの確認と設定を行いましょう。   ● MySQLのsql_modeを確認する sql_mode を確認するには次のクエリーを投げます。 SHOW VARIABLES LIKE “%sql_mode%”;   また、グローバルスコープの設定を確認するにはこちら SELECT @@global.sql_mode;   また、セッションスコープの設定を確認するに

PHPフレームワークLaravelのO/RマッパークラスEloquentを単体で使用する

PHPフレームワークLaravelのO/RマッパークラスEloquentを単体で使用する

スピードを求めて軽量フレームワークを採用したけれども一部でLaravelO/Rマッパーが使いたい。 そんなマニアックな案件がごくたまにあります。 LaravelのO/RマッパークラスEloquentは単体で使用することができるので今回はその方法をこちらに記述しておきます。   Eloquent単体のインストール とりあえず試したい場合はEloquent単体でインストールするeloquent-onlytというパッケージを作ってくれてる方がいるので(感謝) composerから以下のパッケージをインストールすると使用することができます eloquent-only https://packagist.org/packages/mapyo/eloquent-only   ・composerコマンドからインストールします composer require mapyo/eloquent-only   ・少し古いバージョンの(illuminate/database)がインストールされるのでバージョンを確認しておきます。 compo

phpのドキュメント書いていますか?

phpのドキュメント書いていますか?

phpのドキュメント書いていますか? 最近保守の案件で他社様で作られたPHPソースを覗くことがよくあるのですが、ソース内にphpdocが書かれていないソースが多々あります。 (もちろん開発中には書かれていて本番リリース時に削除された可能性も否めませんが。) phpdocは簡単でいいので必ず書きましょう。   phpdocを書くメリットって? phpdocを書くメリットには次のものがあります 後にソースを見返した時理解する時間が短縮される phpstormと併用することでコーディング時に「変数の型の間違い」等の凡ミスをを防げる phpunitによるユニットテストのテスト項目をphpdocから生成できる 1. は言わずもがなですね、ただ個人的には「テキストによるプログラムの情報が記載されている」というメリットより、「どんな(レベルの)人間がソースを書いたのかをより知る事が出来る」というメリットの方が大きいと思います。 2. は PHPMDをインストールすることで実現できます。 3. は次回に紹介するとして、ここでは2. PHPMDとの併用を

photoshpの.psdデータファイルにnode.js からアクセスする「その2」

photoshpの.psdデータファイルにnode.js からアクセスする「その2」

前回に続きnpmモジュールのpsdを使用してPhotoshop .psdファイルの中身を覗いてみたいと思います。 psdデータからテキストとテキストスタイルを取り出す 以下のようなクラスを作成してみました psdext https://github.com/econosys-system/psdext psdファイルの中を走査してテキストファイルとそれにつけられているcssクラスを取り出し画面に表示します 使い方 let psdext = require(‘./psdext.js’); let p = new psdext(); p.loadFile(“my.psd”); p.extractText(‘my_group’); 使い方(コマンドライン) node index.js [psd-filename] [psd-groupname] 結果例   <p class=”HOME”>HOME</p> .HOME {   font-size: 14px;   font-family: “OpenSans-Semib

photoshpの.psdデータファイルにnode.js からアクセスする。

photoshpの.psdデータファイルにnode.js からアクセスする。

Photoshpデザインデータからのhtmlコーディングどうしていますか? 皆さんはデザインデータからのhtmlコーディングどうされてますでしょうか? ざっくりと手順を切り分けると次のようになるかと思います。 ・画像切り出し(スライス、画像アセット) ・divフレーム組み ・画像や背景をセット ・テキストスタイルをセット ・タイトル、メタタグ、リンクをセット ・cssアニメーションやエフェクトの追加 で、これらを省コストで実現するために sass やejs(当事務所ではgulp-twig)やcofee scriptなどを使用しているかと思います。 画像の切り出しは Photoshopメニューの「画像のアセット」や「Slicy」アプリでしょうか。 ですが、 せっかく sassやejs でnode.js を使用しているのだから .PSDファイルを直接 node.js でさわれないかしら・・・? と思って npm で探してみると、あります。 npm – psd https://www.npmjs.com/package/psd こちらを使用

Googleのjpeg高圧縮エンジンguetzliを同じく高圧縮なMozJPEGと比較する

Googleのjpeg高圧縮エンジンguetzliを同じく高圧縮なMozJPEGと比較する

Googleのjpeg高圧縮エンジンguetzliとは? guetzliはgoogleが2017年3月に発表したjpeg高圧縮エンジンです。 アルゴリズムや技術的なところはこちらのページが詳しいのでどうぞ Guetzli/Butteraugliに関するあれこれ – Qiita 当ブログではguetzliが実際のweb制作の現場で使用できるものなのか? またmozjpeg との性能比較もしたいと思います   MozJPEGのインストール Macの場合 homebrew でインストールします brew install mozjpeg MozJPEGの実行方法 street.jpg を「クォリティ80」で圧縮して street_moz.jpg を作成するには次のようなコマンド入力します。 (出力するファイル名を先に入力するので注意が必要です) cjpeg -quality 80 -outfile street_moz.jpg street.jpg   guetzliのインストール 同じくMacの場合 homebrew で

WebフォントやFontアイコンなどを遅延ロードしてページ読み込み方法を上げる方法

WebフォントやFontアイコンなどを遅延ロードしてページ読み込み方法を上げる方法

WEBフォントとアイコンフォント 全てのホームページ訪問者に同じ書体を表示することができるwebフォントやフォントファイルを指定してhtmlコードを入力するだけで様々なアイコンが表示することができるアイコンフォントはとても便利でweb制作にはなくてはならないものになりつつあります。 ● Google Fonts https://fonts.google.com/ ● アイコンフォント検索サイト Glyph Search https://glyphsearch.com/   とても便利ですね。ですが、使用するにあたって一つだけ問題があります。   WEBフォントとアイコンフォントを使用するとページ表示が遅くなる WEBフォントとアイコンフォントを使用するとページ表示が遅くなります。 Google PageSpeed Insightsでも指摘されていて これらがあるとGoogle PageSpeed Insightsの点数も少し下がってしまいます。 ちなみに当ブログの点数はこんな感じです。 https://developers.g

PHPのクラス定数( const )について

PHPのクラス定数( const )について

PHPのクラス定数について調べる機会がありましたのでこちらのブログにも書いておこうと思います。 スコープがクラス内に限られた定数 const がPHP5.3から使えるようになりましたが 「使い方」と「使う時の注意点(できそうでできないこと)」をここにメモとして残しておきます。   PHPの定数とは? 定数の特徴として大きく以下の2つがあります ・一度代入した後は再代入できない。 ・変数より処理が高速   1. PHPの定数 define()関数 PHPの定数としては define() 関数というのが古くからありました。 ただしこちらはスコープがグローバルスコープ(どこからでも参照可能)となってしまうので あるクラスまたはある名前空間に限定して使いたいといった用途には向きません。   2. PHPの定数 const 構文 PHP5.3以降でcomst構文が使用できるようになりました。 こちらは名前空間やクラスのスコープに対応しているのでクラス定数としても使用できます。   const構文による定数の定義の仕方

Retina用の画像をphotoshopで生成する2つの方法

Retina用の画像をphotoshopで生成する2つの方法

1. 「Retina用画像一枚だけ」をphotoshopで書き出す方法 純粋に書き出したい画像のx倍のサイズで書き出せばRetina用の画像を作成することができます。 (「横300px 縦100px」の2倍のRetina画像の場合は「横600px 縦200px」) そりゃそうですね(汗) ですが、 頭のなかで暗算をしたときにサイズを間違う可能性が確実に少しだけ上がります。 これが良くないです。 人間は確実にミスをする生き物なのでミスが起きにくい工程で作業すること、 ミスが起こりにくい環境を作ってあげることがとても大事だと思います。 そこで作業する時は通常のサイズで作業して、書き出すときに2倍3倍にして書き出してあげます。 例として「横300px 縦100px」の2倍のRetina画像を書き出してみます。   1. 画像をphotoshopで開く。 2. 開いた画像レイヤー(「背景」という名前になっています)をレイヤーパレットからスマートオブジェクトに変換。 3. 切り抜きツールで「横300px 縦100px」で切り抜く。 4. (切り抜

cssの変数(CSS Variables)を使用してみる

cssの変数(CSS Variables)を使用してみる

cssに変数? いつの頃からかcssに変数が使えるようになっているのですがweb制作の現場ではWindows IE11が対応していないので使用することがありませんでした。 が、そもそもweb系のクリエイティブはMacで行うことが多いと思います。 なので日常ではcss変数を使っての使っても良いのではないかと思うようになりました。 (どうせ仕事として納品する時にはコンパイルという作業が入ってくるのでcss変数もコンパイルすれば良いじゃんという考え方です。) ということでcss変数を使ってみます。 とても簡単です。   css変数の宣言 *{ –hoge: red; –fuga: #9a9a9a; } css変数の利用 .myclass{ color: var(–hoge); border: 1px solid var(–fuga); } .waku{ border: 5px solid var(–fuga); } 変数の宣言は次のように :root と記述してもいいようです :root { –hoge: red; } 今後ブラウ

はじめましてエコノシス システム設計事務所です

はじめましてエコノシス システム設計事務所です

はじめましてブログはじめます はじめましてエコノシスシステム設計事務所です 日々の作業に追われ「ブログを更新する暇なんてないよー」ととかく申しておりましたが、 そもそも多くの仕事量をこなせるかどうかはその時のパフォーマンスにかかっているわけでして、 でそのパフォーマンスは「少し忙しい時に良いパフォーマンスを発揮する」と言うのは 言わずもがな、でして、誰しも実感として持っているものではないかと思います。   少し忙しいを自ら作り出す というわけで自ら「少し忙しいを作り出す」ためにこちらのサイトでもブログを更新することにいたします。 内容はWEB(ホームページ)のデザイン、フロント関連技術、サーバー関連技術についてになるかと思います。 ちなみに「少し忙しい」の定義はと言いますと これはcssで言うところの .my_text { font-size: larger; } です。 xx-large にならないよう気をつけつつ更新していきたいと思います。 それではどうぞよろしくお願い致します。