月別アーカイブ: 2017年2月

オススメのChrome拡張機能5選

こんにちは。
いつもFAbankブログをご覧くださりありがとうございます。
「十条銀座」を言うとき、いつも噛んでしまうデザイン担当のハシビロコウです。
「じゅうじょうぎんぢゃ」ってなってしまいますよね。
「三車線」も苦手です。

まず、最近ワタシ的にショッキングだったお話をひとつ。
先日Yahoo!ニュースでも取り上げられていたので
目にされた方もいらっしゃるのではないでしょうか。

★マジョマジョ、終わったな…」魔法が抜けた新ビジュアルに嘆きの声

そうです!
「資生堂/マジョリカマジョルカ」のサイトが一新されていました。
おとぎ話の世界に迷い込んだかのような魔法の世界観がサイト全体で
作り上げられていたあの「マジョマジョ」のサイトが!!!
普通のただの「きれいなサイト」になっていましたΣ( ̄ロ ̄lll)
『あんなサイトが作れるようになりたい!』と目指していたサイトが
なくなってしまったのは大変ショックです。
「きれいなデザイン」のサイトは探せばいくらでもありますが、
マジョマジョの秀逸なところは、デザインとブランドコンセプトが
すごくマッチしていました。本当に本当に残念です。

 

さて、本日のテーマは
『オススメのChrome拡張機能5選』

今回は、私が日々の業務で使用している便利なGoogle Chromeの拡張機能を
ご紹介します。
どの拡張機能も、『CHROME に追加』ボタン1発でインストールできて
難しい説明書を読まなくても直感的に使えるので大変便利です。
気に入ったものがあればぜひ活用してみてください。

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
1.ColorPick Eyedropper
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

サイトで使用されている色を抽出してくれる機能拡張です。
例えば、私がデザインしていてよく迷うのが「赤」です。
明るすぎず、暗すぎずといった「赤」はなかなか難しいです。

他のサイトをいろいろと見ているときに
『この色いいな!』
と思ったら、すぐにこれを使います。
マウスをあてると、カラーコードを表示してくれます。
その際に「#」での表示だけではなく、rgbやhslのコードも
一緒に表示してくれるので大変便利です。
クリックすると、そのカラーコードがポップアップで表示されるので
コピペも簡単です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
2.FireShot
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

私はワイヤーやモックを作る際に、ダミー画像をあてたりするんですが
その際にスクリーンショットで撮った画像を使用します。
そのスクリーンショットを撮影する機能拡張です。

他にも「Full Page Screen Capture」を併用していますが
FireShotの便利なところは、
・全体(スクロールもすべて)
・目に見える範囲(画面上で表示されている部分だけ)
・必要な範囲(例えばバナーやボタンだけとか必要な部分だけ)
と選べるところです。
保存形式もpngやjpg、pdfなど選べます。
ただ、画質の面では「Full Page Screen Capture」のほうが
良いような気がします(使い方の問題?)。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
3.WhatFont
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

こちらは、サイト内で使用されているフォントの種類を
調べてくれる機能拡張です。

例えば、
『このフォント、カッコイイなぁ!サイズ、行間も読みやすい!』
と思ったときに、わざわざソースコードを見なくても
この機能拡張を使えば、テキスト上にマウスオーバーするだけで
「font-family」が表示されます。
さらにクリックすると
・font-weight
・font-family
・font-size
・line-height
・color
までポップアップで表示してくれるんです。
デザインしていて、line-heightに迷うときは、これを使って
「気持ちの良い」サイト作りに活用しています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
4.Page Ruler
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

こちらはサイト上の任意の箇所のサイズを測ってくれる機能拡張です。
例えば
『この画像、サイズいくつだろう』
『ここのマージン、読みやすくていいな』
というときに、わざわざソースコードを見なくても
調べられるので大変便利です。

使い方は簡単。測りたいサイズの上でドラッグするだけ。
・Width
・Height
・Left
・Top
・Right
・Bottom
が表示されます。
ホワイトスペースを活かしたサイトをデザインする際に
他のサイトなどを参考にできるので活用しまくっています。
formやボタンなどのサイズを決める際にも活かされています。

 

★ここからは番外編

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
5.その本、図書館にあります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

その本、図書館にあります。
https://chrome.google.com/webstore/detail/%E3%81%9D%E3%81%AE%E6%9C%AC%E3%80%81%E5%9B%B3%E6%9B%B8%E9%A4%A8%E3%81%AB%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82/ldidobiipljjgfaglokcehmiljadanle?hl=ja

みなさんは本を購入したあとで、「この本、ハズレだったな」ってこと
ありませんか?
マンガや小説など好きな作家さんであれば私も無条件で買いますが、
デザイン本や技術系の本など買う際、高価なだけに大変迷います。
レビューなどを参考にしますが、自分にそれが合うかは
ある種ギャンブルです。
そこで、まずは図書館で借りて、自分に合うか使用してみてから
購入を検討します。

これは名前そのまんまですね。
Amazonで欲しい本を見つけたときに、その本が図書館にあるか
調べてくれます。
この機能拡張は、まず自分が利用する図書館を登録しておけば
Amazonで本を調べたときに、その本が
・図書館にあるか?
・利用可能か貸し出し中か
を瞬時に調べてくれます。
さらに便利なのが「予約する」をクリックすると、登録した図書館の
サイトに飛んでくれるという機能付き!!
技術系の本だけでなく、ミステリー好きで月に20冊以上乱読する私には大助かり!
本当にこの機能拡張を作ってくれた方には感謝です。

 

今回ご紹介するにあたり、「気持ちの良い」というワードを
多用してしまいましたが、見やすい・使いやすいサイトを作る上で、
フォントの種類、行間、色使い、余白は大変重要です。
自分が見て「いいな!」と思ったサイト(デザイン)は、
こういった便利な機能拡張を使い調べまくって、自身のデザインの
引き出しを増やすことをオススメします(^O^)

また、Chromeでのご紹介でしたが、Firefox版にもあると思います。
Chrome、Firefox問わず、同じような機能のものはたくさんあります。
いろいろと追加してみて、自分にあったひとつを見つけてはいかがでしょうか。
ではまた次回。

クラス名で動く「残り文字数」カウントを作ろう

簡単に実装できる「クラスで動くJQueryカウント」を作ろう。
js_count_200、js_count_1000などのクラス名の数値で文字数を制限しながらカウントする
様に作ってみました。

まずはhtmlから

<textarea class=”js_count_100″></textarea>
<p>残り文字数<span></span></p>

javascript(jqueryライブラリを使用しています)

$(function() {
//キーボードやマウス操作でイベントが発生します。
$(“[class *= ‘js_count_’]”).on(‘keydown keyup change’, function() {
//match関数を使ってクラス名から数値だけ拾って変数iとします。
var i = $(this).prop(‘className’).match(/[0-9]+/);
//iを残り文字数の初期値として見せるために<span>にセットします
$(“span”).text(i);
//textarea内に入力された文字を.val()で取得して.lengthで数えて変数textnumに入れておく
var textnum = $(this).val().length;
//現在残り文字数を取得する
var maxnum = (i) – textnum;
//一部ブラウザーでtextareaはmaxlenghが効かないのでiより長い文字はカットします。
var val = $(this).val().slice(0,i);
if (maxnum<1){
maxnum=0;
$(this).val(val);
}
//入力があるたびに残り文字数をセット
$(“span”).text(maxnum);
//最後に.change()を付けることで入力がなくても最初からイベントを発生させることができます。
}).change();
});

まずはコピペで試してみてください。
それでは次の更新をお楽しみに!

 

monologについて(2)

こんにちは。

今日はmonologについて理解を深めた..というか困惑しているので、前回に引き続きmonologの投稿

前回の記事

ログにエラー箇所であるファイル名や、行番号を出力したいですよね。
私もGitにあるSeldaek/monologから最新を取得して利用して使っていました。
LineFormatterを使い、IntrospectionProcessorの出力に頼って..

ですが、fileとlineについてはLoggerのwriteメソッドの行番号が出力されており、どこか実装や設定が悪いのか?
と思っていたのですが、以下のStackOverflowの記事を見付けました。
stackoverflowの記事へ
こいつをGoogle翻訳にかけたところ、スレ主さんが私と同じ悩みを..
同じGitから取得しているようですし、Laravel特有ではない様子。

もうちょっと掘り下げて、パート3の頃(またか?)には解決してるか諦めつけるのか..
したいと思います。

PDF表示の導入

今回はPHPでPDFを出力するという実装を行います。

既存のテンプレートを活用し、そこに必要な文字を入れていくことでソースコードをシンプルに保つことが出来ます。

そこで既存のPDFをテンプレートとして読み込むことができ、且つ無償で活用できるライブラリとして、TCPDF、FPDIの組み合わせを紹介したいと思います。

 

  1. テンプレートとなるPDFを作成するPDFの読み込みを行うFPDIは無償導入の場合、5以上のファイルを読み込めません。PDF1.4以下の圧縮形式で作成する必要がります。

また、PHP上からの文字配置する場合、座標を使用するため、illustratorなどのソフトで作成したほうが効率がいいです。

  1. TCPDFをダウンロードします。ドキュメントなどが必要でなければ tcpdf_min_* を選択してください。

ダウンロードしたファイルは解凍して、PHPのinclude_path上に tcpdf というフォルダ名で配置しました。

以下はサンプルソースになります。

<?php

require_once ‘tcpdf.php’;

$pdf = new TCPDF(“L”, “mm”, “A4”, true, “UTF-8” );

$pdf->setPrintHeader(false);

$pdf->setPrintFooter(false);

$pdf->AddPage();

$pdf->SetFont(‘kozminproregular’, ”, 12);

$pdf->Text( 10, 10, “初めてのTCPDF” );

$pdf->Output(“test.pdf”, “I”);

?>

細かい設定は(http://www.t-net.ne.jp/~cyfis/tcpdf/)ここで確認してください

  1. FPDIをダウンロードします

ダウンロードしたファイルは解凍して、TCPDFを配置した tcpdf フォルダ内に配置します。

  1. テンプレートになるPDFをダウンロード

https://s3-ap-northeast-1.amazonaws.com/s3-ten-navi.com-wpimg/hacks/wordpress/wp-content/uploads/2015/06/resume_light1.pdf

ダウンロードしたファイルはtcpdf フォルダ内に配置します。

<?php

require_once(‘tcpdf/tcpdf.php’);

require_once(‘tcpdf/fpdi/fpdi.php’);

class exPDF extends FPDI

{

}

$pdf =& new exPDF();

$pdf->setPrintHeader(false);

$pdf->setPrintFooter(false);

$pdf->AddPage();

$pdf->setSourceFile(‘tcpdf/Invoice.pdf’);

$iIndex = $pdf->importPage(1);

$pdf->useTemplate($iIndex);

$pdf->SetFont(‘kozgopromedium’, ”, 10);

$pdf->Text( 160, 36, “2017/02/01” );

$pdf->SetFont(‘kozminproregular’, ”, 20);

$pdf->Text( 30, 50, “サンプル太郎 様” );

$pdf->Output(‘sample.pdf’, ‘I’);

?>

 

以下のように、表示できると思います。

座標位置を正確に指定することで、適宜な箇所に文字を当て込んでいきましょう。

以上で、PHPでPDFを出力するという実装の紹介を終わります。