制作中に見つけたものアレコレ

レスポンシブなサイト制作をした際に便利そうだったものをアレコレまとめてみました。

制作前 ===========================

今回は、フレームワークの利用を考えていて何を使うのが一番良いか迷っていました。
その時に便利だったのがコチラのサイト

[CSS Front-end Frameworks with comparison]
http://usablica.github.io/front-end-frameworks/compare.html

フレームワークが一覧表になっており、対応するブラウザ、LESSやSASSの利用可能状況、ライセンスやデバイスについてわかりやすくまとまっています。

制作中 ===========================

【小技】テキストの改行操作。
今更と言う方も多いかと思いますが…
テキストで見出しを設定した際に、思った所で改行を行いたかったため探しました。

改行したい所に改行タグをいれ、CSSで『display:none;』とし
メディアクエリで、今度は『display:block』とすれば改行されます。
もしくは、spanで要素を設定して、改行したい時に『display:block』を
設定すれば、改行となります。

【jQuery】Youtubeの動画を背景に設置。
使ってみたのは『jquery.mb.YTPlayer』。

jquery.mb.YTPlayer
http://pupunzi.com/

設置は簡単で、一通りのJS、CSSを読み込むのは他の物でも同じですが
設置場所のパラメーターがわかりやすくて良いんです。
”data-property”に値を設定するだけで良いのですが、以前からあるYoutubeのバラメータが使えます。
ただ、スマートフォンなどからアクセスした際には非表示になりますので、対応策が必要なのが玉にキズですが…

サイトの確認 ===========================

各デバイスのチェック。
今では、ブラウザで確認できる物が多いですが、

『RWD Bookmarklet』
http://responsive.victorcoulon.fr/

このサイトにある『RWD Bookmarklet』ボタンをブックマークにドレッグ&ドロップし、チェックしたいページでブックマークをクリックすると、iPhone、iPadの確認ができます。
それだけではなく、キーボードを表示するとどうみえるか?をチェックする事ができます。

また、VIEWPORT RESIZERも同じようにブックマームをしてチェックを行うのですが
iPhoneからAndroid、カスタムサイズでのチェックを行う事ができます。
テストサーバーを使って、閲覧にパスワードが必要な場合などは
このやり方が便利でいた。
『VIEWPORT RESIZER』
http://lab.maltewassermann.com/viewport-resizer/

探せば、結構イロイロと便利なサイトや、情報をまとめてくれているサイトが気付かないうちにあったりしますので日々のストック作業を行ってみてはいかがでしょう。


IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)

夏、ですね。みなさん夏バテしていませんか?

インターハイ始まりましたね。もうすぐ甲子園も始まります!
今では見るからに不健康そうですが、昔はこれでもスポーツしてました。
インターハイとか夢の向こうのへっぽこ選手でしたが(笑)

スポーツを通して、違う学校や年齢性別の別、いろいろ違う人たちと会って話して。
今でも仲良く遊ぶ人たちもいます。僕はスポーツを通してでしたけど、こんな感じでこうやってみんないろいろ繋がっていくのですね。

というちょっとまじめな前振りから強引にいきますが。今日はいろんなサービスを連携できる「IFTTT」のお話です。

150731

IFTTTって?

IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス(Facebook、Evernote、Weather、Dropboxなど)同士で連携することができるWebサービスである。開発したのはリンデン・チベッツで2010年にスタートした。

― Wikipediaより
https://ja.wikipedia.org/wiki/IFTTT

そのまま引用しましたが、あるサービスで「何かをすると」違う他のサービスに「何かできる」というものです。

 IF this Then That

Create Recipe - IFTTT.clipularこれはIFTTTでレシピ(何かから何かを連携するのをIFTTTではレシピといいます)を作るときの魔法の呪文ですが、そのまま「もしこれをしたら」「そのときあれはこうなる」ということですね。
連携できるサービスはいろいろ。右の画像が現在(2015年7月30日)使えるサービスのアイコンです。かなりいろいろありますね。

IFTTTしてみる

例えば今回はTwitterにアップした写真をFacebookのアルバムに追加してみます。出かけた先でおもしろい写真をとってTwitterにアップしたものをFacebookにアルバムとしてまとめておいたら、後から見直したりまとめて使ったりするのに便利、かもしれませんよね。

0.チャンネル登録

IFTTTにログインして(アカウントのない方はアカウントを作ります。メールアドレスとパスワードでOKです)、チャンネルの登録をします。

右上のメニュー「Channels 」から利用するサービスのアカウントを登録します。
今回はTwitterとFacebookのアカウントを登録しました。

1.My Recipesを作る

レシピを作成します。「My Recipes」から入って、「Create a Recipe」をクリックします。
IFTTTは海外のサイトで、まだ日本語対応していませんが、直感的にクリックしていくだけでレシピが作れます。

2.もしこれで

Create Recipe - IFTTT.clipular (1)

「Create a Recipe」をクリックすると「if this then that」と表示されます。これが魔法の呪文でしたね。反転している「this」をクリックします。

トリガーとなる(利用するサービスでどんなことをしたら)サービスがアイコンで一覧表示されるので、利用するアイコンをクリックします。今回はTwitterです。

3.こんなことしたら

次に「どんなことしたら」を選びます。今回は特定のハッシュタグで分類できるように「New tweet by you with hashtag」を選択して、「#photo」というハッシュタグをつけたときに発動することにしました。

進んで行くとぬるぬるスクロールして行くのが、さりげなく使い易いですね。

Create Recipe - IFTTT.clipular (2)

4.あれで

Create Recipe - IFTTT.clipular (3)

 

次はどのサービスに使うかを選択します。先ほどは「this」だったところがTwitterのアイコンになっていますね。これも直感的にわかりやすくなっています。

反転している「that」をクリックすると利用できるサービスの一覧で表示されるので、今回利用するFacebookをクリックします。

5.何をする

Create Recipe - IFTTT.clipular (4)

次に何をさせるかを選択します。今回はアルバムを作るので、「Upload a photo from URL」を選択します。

Create Recipe - IFTTT.clipular (5)

URLを登録する欄、Facebookに登校するメッセージ、登録するアルバムの名前を登録します。今回は新しく「Twitterphoto」というアルバムをFacebookに作ることにしました。

ここでアルバム名を登録するとFacebookに新規でアルバムが作られます。空欄にした場合は「IFTTT Photos」というアルバムが作られます。

この三つをきめたら「Create Action」をクリックします。

6.確認画面

Create Recipe - IFTTT.clipular (6)

最後にこれでOKかどうかの確認画面です。IFTTT用にレシピのタイトルを決めることもできます。今回はそのまますることにしました。

 

写真をTwitterに投稿する

ちゃんと動くか確認します。ハッシュタグ#photoをつけた写真入りのツィートを作成します。

 

Facebookにアルバムが作られる

ほんとにちゃんとFacebookに投稿されるていることを確認します。(反映されるまでに若干タイムラグがある場合があります)

Facebook.clipular

無事投稿されてますね。ちなみ新規で「Twitterphoto」というアルバムもちゃんと作成されていました。成功ですね。これで出先からTwitterに投稿した写真をアルバムにまとめることができるようになりました。

--- ---.clipular

 

 

他にもいろいろ

今回はTwitterに投稿した写真をFacebookのアルバムにまとめるレシピを紹介しましたが、他にもいろいろな事ができますよ。

個人的に使っているのは、iPhoneで撮った写真をFlickrに登録したり(iCloudの要領確保のため)、Tumblrで書いた記事をFacebookページ流したり、好きなブログが更新されたらRSSを利用してFacebookにリンクを流す、などです。

他にもgmailとevernoteを連携したり、いろいろなことができるので自分好みのレシピを作ってみてくださいね。素敵なレシピができたらぜひ教えてください!


Android OSは、ドコまで使えるのか!?

自宅で使っていたMacBookPro(Let2008)が、長年の酷使と熱?によりグラフィックボードが瀕死の状態となり画面がモノスゴイ状態からブラックアウトになるなど…使うのに困難をきわめ、修理に出してみれば

『古くて、もう部品ないっす』

などと言われしまう状況に…
新しいMacを買うにしても、こちらも予算的に瀕死の状態だったため「場繋ぎ」にと手元にあるLenobo YOGA Tab 10インチを自宅メインマシンとして使う事になしました。

果たして、AndroidOSはどこまでできるのでしょうか。

続きを読む Android OSは、ドコまで使えるのか!?


梅雨のじめじめ気分を吹き飛ばす! 虹のようなカラフルデザインのWebサイトまとめ

もうすぐ6月も終わりですね。
新潟ではいまだすっきりしないお天気が続く今日この頃ですが、みなさんがお住まいの空模様はいかがでしょうか?

今回は、梅雨空のじめじめ気分が晴れるようなカラフルなWebデザインをまとめてみました。

01

AYAKA NEW ALBUM レインボーロード
http://room-ayaka.jp/rainbowroad/
レスポンシブデザイン。
ポイントで置いてあるモチーフの色が、じわじわと切り替わります。
宝石が虹色に輝くように見えて素敵。

 

04

 

JAZY GROUP
http://jazygroup.com/
ページ変移のアニメーションが気持ちいい!

 

14

ぷるぷるSPARKLINGゼリー
http://www.hakutsuru.co.jp/purupuru/
ぷるぷるふるえるアイコンや、しゅわしゅわ消える炭酸水のような背景がとてもかわいらしいです。
マウスオーバーの「ぷるんっ!」とした動きが何ともいえない心地よさ。

 

11

color magic
http://www.itokin.com/musee/colormagic/

白ベースの中に突然現れるカラーテープが、鮮やかでとても印象的。
ファッションショーを見ているかのような商品写真の紹介の仕方も面白いです。

 

02

モチイエ女子web
http://www.mochiiejoshi.com/mj/
ビビットな色使いとポップなパターンが、まさに女子向け!

 

13

FELISSIMO 500色の色えんぴつ
http://www.felissimo.co.jp/500/
「500色」がずらりと並ぶ様は壮観!
色えんぴつで描かれたようなボタンやタイトル背景など、色えんぴつのイメージで統一されたデザインになっています。

 

08

avion
http://avionavion.jp/
レスポンシブデザイン。
こども服のブランドサイトなのですが、やわらかめの色使いがイメージにぴったり。

 

 

15

CHITAZEN
http://www.chitazen.co.jp/
彩度の低いちょっと渋めのレインボーカラー。
スクロールに連動して描かれるラインの動きが楽しいです。
ヘッダーの町の風景が時間に合わせて変わるのも、心憎い演出。

 

いかがでしたでしょうか?
「カラフル」と一口にいっても、彩度や色の面積によって様々なバリエーションがあるんですね〜。