• via：Lumen Bigott – Graphic Designer & Marketer » Social Media Shoes

• photo credit: FindYourSearch via photo pin cc

WEBに携わる人であれば開発やサーバーのメンテナンスなど必ずSSH接続が必要です。それをChromeのエクステンションで出来てしまうのですから驚きです。

以下、使ってみた様子です。

Secure Shellを使ってみる

コチラよりエクステンションをインストールし、「Secure Shell」を起動すると下の画像のような画面が表示されるので、テキストボックスにサーバーのログイン情報を入力しサーバーにSSH接続します。

実際に下の画像のようにChromeからサーバーへログインでき、正常にコマンドも実行できました。これはゴイスーです。

正直、利用することはあまりないと思いますが、ネタとしてインストールしてみても面白いかもしれませんね。
以下からインストール可能ですので興味のある方は是非。

• Chromeエクステンション：Secure Shell

• photo credit: rwentechaney via photo pin cc

何が嬉しいの？

何が嬉しいというと。「今度どんな髪型にしようかな」「あー！青のアイシャドウにチャレンジしてみたいなぁ」など、「美」に関していくつか思うことがあるのではないでしょうか。男なので想像での話ですがw

そんなときは、Make Over Studioを利用すれば、叶えられるのです。
これは、正直嬉しくないですか？

では、どんなサービスなのか・・・
さっそくMake Over Studioへアクセスしてみましょう。

グラム GLAM Make Over Studio

サイトにアクセスすると、画面中央あたりにツールが読み込まれるのでそちらを操作して行きます。

モデルから簡単に開始できますが、自分自身や友人など任意の写真をアップロードができるので、好きな写真で開始できます。

ツールの上部には、「ホーム」「メイク」「ヘアスタイル」「アクセサリ」のタブがあるのでそれぞれクリックすると試すことができ、ヘアスタイルなどのアイテムはマウスでドラック＆ドロップで移動も可能です。

操作を始める前に使い方ページをご覧になってみてください。

ヘアスタイル

自分が試してみたいヘアスタイルやカラーリングを選択できます。

ヘアスタイルは結構豊富なので、色々試せて楽しいと思います。
今後は、Make Over Studioで試してみてから、サロンへ行くなんてこともありかもしてませんね。

メイク

メイクはヘアスタイルと違い、試せる部分が豊富です。試せるメイクは下の通りです。

• ベースメイク
  • ファンデーション
  • コンシーラー
  • チーク
• 目元
  • アイシャドウ
  • アイライナー
  • マスカラ
• リップ
  • リップ
  • グロス
  • リップライナー

デパートなど化粧品を買いに行く前に、簡単にMake Over Studioで試せるというのは女性にとって大変嬉しいのではないでしょうか。

アクセサリ

試すことができるのは、「イヤリング」「ネックレス」「サングラス」「メガネ」「カラーコンタクト」「帽子」「ヘアクリップ」が試せるようです。

その他

作成した画像を保存できたり、facebookでシェアできたりするみたいです。
会員登録をすれば作成した画像の履歴が保存できるようです。

しかし製品の購入はできないみたいです。製品の購入が出来るようになれば、より良いサービスになるような気がします。

さいごに

暇つぶしにポチポチいじってみるなんて使い方もいいかもしれません。
男性の方でも「彼女にこんな髪型にしてもらいたい」「この色のリップが似合うから今度プレゼントしよう」など女性に限らず利用してみてはどうでしょうか。

Make Over Studioのようなサービスは、個人的に好きです。

「何これ？知らなかった」なんて人は、是非試してみてください。
iPhoneアプリもあるようなのでアプリで試してみてもいいかもしれませんね。

それでは。

• グラム GLAM - make-over | 私のスタイルは、私が選ぶ
• App Store - Glam Makeover

Social Share Blocks

• ダウンロード

ページトップへ

Social Counters

• ダウンロード

ページトップへ

Hand Stitched Social Media Icons

• ダウンロード

ページトップへ

Social Icons

• ダウンロード

ページトップへ

Metal Social Media Buttons

• ダウンロード

ページトップへ

Sliding Tags

• ダウンロード

ページトップへ

iOS 5 GUI PSD

• ダウンロード

ページトップへ

Rounded Progress Bar

• ダウンロード

ページトップへ

以下のサイトには、今回紹介したフリーのPSD素材以外にも紹介されているのでよろしければ。

• 40 Free PSDs Guaranteed To Improve Your Work

• photo credit: Simon Pow via photo pin cc

ダウンロードは以下から。

• 350 pixel perfect icons

April/Zero

• http://aprilzero.com/

ページトップへ

Ink Cartridge Recycling

• http://www.inkcartridgerecycling.co.uk/

ページトップへ

Squire – Sit. Watch.

• http://www.squireapp.com/

ページトップへ

PureAromaTea.com

• http://purearomatea.com/

ページトップへ

Clarify

• http://clarify.io/

ページトップへ

Spotever

• http://www.spotever.com/

ページトップへ

sqwear©

• http://sqwear.com/

ページトップへ

pleek.fm

• http://www.pleek.fm/

ページトップへ

季節の変わり目による風邪を引いてしまい長らくPCに触れていませんでした。僕はどうも昔から季節の変わり目に弱い・・・。皆さんもお気をつけてください。

なにはともあれ、是非より良いインスピレーションを・・・今回紹介させていただいたカミングスーンページデザインは一部となります。より楽しみたい方や興味ある方は以下からどうぞ。

• 25 Creative Coming Soon Pages | Splashnology

• photo credit: Shreyans Bhansali via photo pin cc

ただダミー画像を表示させてみる

ただダミー画像を表示させるには、このように記述します。
http://placehold.it/の後ろにサイズを指定するだけです。

<img src="http://placehold.it/500x200" />

正方形のダミー画像を表示させてみる

正方形の画像を表示させるには、サイズ部分にひとつだけ指定します。

<img src="http://placehold.it/500" />

ダミー画像の背景色と文字色を変更してみる

ダミー画像の背景色と文字色を変更するには、http://placehold.it/任意のサイズ/任意の背景色/任意の文字色/のように指定します。

<img src="http://placehold.it/500x200/BC123A/FFFFFF/" />

ダミー画像のテキストを変更してみる

サイズが表示されている画像テキストを任意のテキストに変更するのは&text=任意のテキストを指定します。

<img src="http://placehold.it/500x200/353936/FFFFFF/&text=zukunasi.net" />

ダミー画像のフォーマットを変更してみる

デフォルトの画像フォーマットは「gif」となっているので、画像フォーマットを「jpg」に変更するには、”サイズ指定”または”背景色指定”または”文字色指定”の後ろに.jpgを指定します。また、「png」画像も作成可能です。

<img src="http://placehold.it/500x200.jpg/353936/FFFFFF/&text=zukunasi.net" />

モックなどをWEBで作成している場合、ダミー画像を何種類も作成することは無駄な作業だと思っているのでPLACEHOLD.ITのようなサービスはとてもありがたいですね。

有名ブログのIdea*Ideaでも紹介されていたのですね。
紹介されていたこちらの記事を見ると、2010年8月の記事なんですねw今更知るなんて…約2年、損していた気分です。

• PLACEHOLD.IT

Wooden Social Icons by Creative Nerds

• ダウンロードはこちら

Wood Social Icons Set Vol 1

• ダウンロードはこちら

23 Wooden style social icons

• ダウンロードはこちら

木目調はデザインがかなり難しいイメージがありますが、木目調デザインをご検討の方はダウンロードしてみてはいかがでしょうか。

ハマったときはタバコを吸う

photo by：Justin Shearer

僕は、設計などプログラム等で行き詰まったとき、タバコを吸うようにしています。

これは以前、開発時にいくら考えても解決できない。調査しても解決できない。いわゆる「ハマった」状態の時に、いつものように何となくタバコを吸っていたのですが、ふとしたときに、解決出来なかった問題の糸口や考え方を「ひらめいた」ことがキッカケでした。

何を言いたいかというと、要はリフレッシュをするということです。

僕は喫煙中、同僚と話したり、ぼーっとしてみたり、iPhoneをいじってみたり、タバコを吸うことでリフレッシュしています。

わからないことを同じ頭で何度考えてみても結局、解決が出来ず、ただ時間だけを無駄に消費してしまい、結果、作業効率を悪くしてしまいます。

そんなときは、ニュースを見てみたり、お気に入りのブログを読んでみるなど、一度解決出来ない問題から離れてみると言うことが大切かなと思っています。

きっと、「ひらめき」が訪れると思います。

お昼を食べて眠くなったら仮眠をとる

photo by：Timmy Toucan

年齢のせいかもしれませんが、最近お昼を食べると眠たくなってします。そんなことありませんか？

当たり前ですが、眠気がある状態で仕事をするのと頭がスッキリした状態で仕事をするのでは、作業効率が大幅に変わります。

僕自身、眠気がある状態で書いたプログラムは、不具合ばかりだったり、自分でも驚くほど意味のわからないコードを書いてしまったりとミスだらけだったので、少しでも眠気があるときは、仮眠をとり頭をスッキリしてから仕事を開始するようにしています。

仮眠をとれる環境であるなら、仮眠をとるようにしてみてはいかがでしょうか。仮眠と言っても、あまり良いイメージではないので、仮眠をとりにくい、またはとれない環境の場合は、お昼休みなどを利用してみたらどうでしょうか。午後の作業効率はぐぐぐっとあがると思います。

明日やろうはバカヤローじゃなく、お利口さん

photo by：NotoriousJEN

僕は以前、「明日やろう！はバカヤロー」だと思っていましたが、仕事をしているうちに考え方が変わってきました。

確かに仕事をしていると、その日のうちに間に合わせなければならない仕事もありますが、僕が身を置くWEB業界では、基本スケジュールを引いています。なので自分自身でもスケジュールの管理をすることが必要なのです。

例えば、ある機能を構築する場合、どのくらいの工数が必要か。そして、全体のスケジュールからいつまでに完了している必要があるかわかると思います。

恥ずかしい話、入社して1、2年位まで自分自身のスケジュール管理をできていませんでした。なので、１日フルで出来るところまで開発し続けたりなどしていましたが、自分自身のスケジュール管理をするようになり、「明日できることは明日やる」という考え方に変わりました。

これが僕の中では結構重要で、
仕事に余裕ができ、１日の目標、明日への準備(なにをすべきか)を考えられるようになりました。

さらに、１日のタイムスケジュールを設定すれば、より仕事の作業効率があがりそうだと思ったので今後試してみようと思います。

人それぞれ、考え方や作業方法などあると思いますが、
この記事を読んでいただいた方が少しでも作業効率があがればいいなと思いつつエントリしてみました。

最後までお読みいただきありがとうございます。

今回の記事のように、自分が考えていることや思うことを今後も発信していきたいなと思います。

• photo credit: Mustafa Sayed via photopin cc

今回の話を進めるにあたり、/path/to/html/がドキュメントルートとします。
(以下、ドキュメントルート)

ドキュメントルート直下に以下のディレクトリを作成します。

• モバイル用ディレクトリ：/path/to/html/m/
• スマートフォン用ディレクトリ：/path/to/html/s/

各ディレクトリ(ドキュメントルートも含む)に.htaccessを用意し、以下の内容を記述します。

ドキュメントルート直下の.htaccess (/path/to/html/.htaccess)

# Set enviroment value by user-agent
SetEnvIf User-Agent "DoCoMo" UA=m
SetEnvIf User-Agent "UP\.Brower" UA=m
SetEnvIf User-Agent "KDDI-" UA=m
SetEnvIf User-Agent "J-PHONE" UA=m
SetEnvIf User-Agent "Vodafone" UA=m
SetEnvIf User-Agent "SoftBank" UA=m
SetEnvIf User-Agent "em" UA=mobile
SetEnvIf User-Agent "WILLCOM" UA=m
SetEnvIf User-Agent "DDIPOCKET" UA=m
SetEnvIf User-Agent "iPhone" UA=s
SetEnvIf User-Agent "Android" UA=s

RewriteEngine On
# Redirect if Mobile
RewriteCond %{REQUEST_URI} !^/m.*
RewriteCond %{ENV:UA} ^m$
RewriteRule ^(.*)$ /m/ [R,L]
# Redirect if SmartPhone
RewriteCond %{REQUEST_URI} !^/s.*
RewriteCond %{ENV:UA} ^s$
RewriteRule ^(.*)$ /s/ [R,L]

モバイルディレクトリ直下の.htaccess (/path/to/html/m/.htaccess)

RewriteEngine On
# Redirect if PC
RewriteCond %{ENV:UA} !^m$
RewriteCond %{ENV:UA} !^s$
RewriteRule ^(.*)$ / [R,L]
# Redirect if smart phone
RewriteCond %{ENV:UA} ^s$
RewriteRule ^(.*) /s/$1 [R,L]

スマートフォンディレクトリ直下の.htaccess (/path/to/html/s/.htaccess)

RewriteEngine On
# Redirect if PC
RewriteCond %{ENV:UA} !^m$
RewriteCond %{ENV:UA} !^s$
RewriteRule ^(.*)$ / [R,L]
# Redirect if Mobile
RewriteCond %{ENV:UA} ^m$
RewriteRule ^(.*) /m/$1 [R,L]

以上で、.htaccessだけでPC、モバイル、スマートフォンを判定して対応するページへアクセスさせることが可能です。

初めに述べたように、Wordpressであれば「WPtouch」や「Ktai Style」など、CakePHPであれば「Ktai Library」などがあり、簡単にユーザーエージェントの振り分けなど可能ですが、今回紹介した内容も覚えておいて損はないと思うので是非。