2016-12-20

ファビコンを自動でつくってくれるサイト「Favicon Generator」を使ってみた。

サイト開発をしていて結構めんどくさい作業なのがファビコンの作成です。
特にこだわらない場合は favicon.ico というファイルを ico 形式の画像を作ってリンクすればいいだけですが、iPhoneなど様々な機種に対応させたい場合は個別に画像を用意してその全てにリンクなど HTML タグを追加しなければいけません。

そこで紹介するのが「Favicon Generator」です。

このサイトは画像を送信するだけで、様々なサイズのファビコンを作成してくれるというとても便利なサイトです。
また、必要なＨＴＭＬタグも表示してくれるので、それらをコピーするだけで設定も完了します。

では、作り方をひとつひとつ見ていきましょう。


１．画像のアップロード

画像の赤枠にあるボタンをクリックしてファビコンにしたい画像を選択します。

※注： 最低でも 70 x 70 px 以上の画像を選んでください。推奨は260 x 260 px 以上です。



２．ファビコンの設定をする

ここから iPhone など各機種向けの設定をします。

注意が必要なのは iOS です。
iOS のアイコンは透過画像に対応していません。
そのため、もしファビコンに png などの透過画像が利用されている場合、背景が真っ黒になってしまします。

これを防ぐためには以下の赤枠のラジオボタンにチェックを入れ、その下の色の設定を変更する必要があります。


その他 chrome や windows の設定ができますが、同じように設定を変更すると自動でサンプル画像が変更しますのでお好みの設定に変更してみましょう。

なお、もしファビコンをルートフォルダに設置したくない場合は、最後の項目で調整ができます。（ルートでいい場合はに特に設定する場合は必要ありません。）



３．ファビコンの作成

さぁ、それではファビコンを作成しましょう。
一番下にある以下のボタンをクリックすることで実行できます。


４．ファビコンのダウンロードと設置


まず「Download your package.」の横にある「Favicon package」ボタンをクリックするとダウンロードが始まりますので適当な場所に保存してください。
そして、保存した zip ファイルの中にあるファイル全てをサイトのルートフォルダへ展開します。
（つまり、http://example.com/favicon.ico にアクセスできるようになればＯＫです）

次に２個めの赤枠内の HTML コードを <head>〜</head>内に書き込みましょう。
これで設定は完了です。

５．テスト

もしきちんと設置されたかをテストしたい場合はチェックコンテンツも提供されていますので使ってみることをおすすめします。


なお、元になるファビコン画像を作りたいときは font-awesome で画像が作成できる fa2pngが便利です。 

今回は以上です。
おつかれさまでした。

Posted by at 0 件のコメント:
Labels:

2016-12-08

Laravel で全 view からログイン中のユーザー情報を取得する

Laravel を利用して開発をしていると、まだまだ全ての機能を使いきれていないことに気付かされることがあります。
ということで今回は ViewComposer を使って、どのビューからでもログイン中のユーザーにアクセスできるようにしてみたいと思います。

【実行環境】Ｌａｒａｖｅｌ 5.3


手順は以下の３つです。
  1. ViewComposer を作る
  2. ServiceProvider を作る
  3. ServiceProvider を登録する

ではひとつひとつ見ていきましょう。

１． ViewComposer を作る

まず ViewComposer の作成です。
デフォルトでは専用のフォルダは用意されていませんので app/Http/ViewComposers というフォルダを新たに作成しましょう。
そして、その中に AuthViewComposer.php というファイルを作成＆以下のコードを保存します。
 <?php namespace App\Http\ViewComposers;  
 use Illuminate\View\View;  
 class AuthViewComposer  
 {  
   protected $user;  
   public function __construct()  
   {  
     $this->user = \Auth::user();  
   }  
   public function compose(View $view)  
   {  
     $view->with([  
       'user' => $this->user  
     ]);  
   }  
 }


２．ServiceProvider を作る

次に専用の ServiceProvider を作ります。
app/Providers/ViewComposerServiceProvider.php を作成＆以下のコードを保存してください。
 <?php namespace App\Providers;  
 use Illuminate\Support\ServiceProvider;  
 class ViewComposerServiceProvider extends ServiceProvider  
 {  
   public function boot()  
   {  
     \View::composers([  
       \App\Http\ViewComposers\AuthViewComposer::class => 'layouts.*'  
     ]);  
   }  
 }
※ ちなみに layouts.* の部分ではどの view に適用するかを設定することができます。


３．ServiceProvider を登録する

最後は先ほど作った ViewComposerServiceProvider を config/app.php へ登録します。
 'providers' => [  
   App\Providers\ViewComposerServiceProvider::class,  
 ],

さあ、以上で設定は完了です。好きな view の中で {{ $user->email }} という風にユーザー情報にアクセスしてみましょう。
なお、念のために、以下のコマンドを実行しておくといいかもしれません。
 composer dumpautoload -o

今回は以上です。
お疲れ様でした。



Posted by at 0 件のコメント:
Labels:
登録: 投稿 (Atom)