2015年8月 – AGN Web team

オリジナルグッズを作成&販売! ClubTを試してみました

以前、在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめで
作成販売サイトをいろいろご紹介しました。

その中でも、ひときわグッズのバリエーションがあった「ClubT」。
Tシャツはもちろん、マグカップから時計、果てはデコレーションカーまで
さまざまなグッズのデザインが可能とのこと。
今回はそんな「ClubT」にスポットを当ててご紹介します。
実際に登録から商品販売まで一通り試し、その中で作成のポイントをまとめてみました。

ClubT
https://clubt.jp/

※ご利用の際はサイトの規約などをご確認ください。
※2015/08/31現在の情報です。

続きを読むオリジナルグッズを作成&販売! ClubTを試してみました

CSSだけで実装するハンバーガーメニュー(暫定版…)

こんにちは。

野球とかインターハイとかインカレとか見てたらスポーツをしたくなったyasaiです。
もうすぐスポーツの秋ですが、今年もきっと食欲と読書と仕事の秋なんだろうなぁ。

さて今回は最近ハンバーガーメニューを使ったグローバルメニューの案件が多かったので、
何となく自分向けの備忘録です。

実装はHTMLとCSSだけ。Javascriptは使いません。

【DEMO】

HTML

<nav class="hamburger_menu">
	<input type="checkbox" id="hamburger__btn"> 
	<label for="hamburger__btn" class="hamburger__btn"><span></span></label>
	<div class="menu_content">
		<ul>
			<li><a href="">menu01</a></li>
			<li><a href="">menu02</a></li>
			<li><a href="">menu03</a></li>
			<li><a href="">menu04</a></li>
			<li><a href="">menu05</a></li>
			<li><a href="">menu06</a></li>
		</ul>
	</div>
</nav>

<ul>

</ul>

</div>

</nav>

Javascriptを使わないので、メニューのオンオフの切り替えはcheckboxで行います。

Label要素の中に空のspan要素を配置したのは、span要素の疑似要素を使って3本線を表現するためです。

CSS

sassの記述はこうなりました。以下sassで記述します。

.hamburger_menu
    #hamburger__btn{
        display: none;
        & ~ .menu_content {
            visibility: hidden;
        }
        &:checked ~ .menu_content {
            visibility: visible;
        }
    }

    .hamburger__btn{
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 0 0 5px 5px;
        background-color: #ccc;
        position: fixed;
        top: 0;
        right: 10%;
        z-index: 100;
        &:after {
            content: '';
            display: block;
            width: 60%;
            height: 2px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        span {
            width: 100%;
            height: 100%;
            display: block;
            position: relative;
            &:before,
            &:after {
                content: '';
                display: block;
                width: 60%;
                height: 2px;
                background-color: #fff;
                position: absolute;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
            &:before {
                top: 25%;
            }
            &:after {
                bottom: 25%;
            }
        }
    }

    .menu_content{
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%) translateY(-50%);
        &:after {
            content: '';
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: -1;
            width: 0;
            height: 0;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;
        }
        a {
            color: #fff;
            text-decoration: none;
        }
    }
    #hamburger__btn:checked{
        & ~ .menu_content:after {
            width: 200vw;
            height: 200vh;
        }
        & ~ .hamburger__btn{
            &:after {
                content: none;
            }
            span{
                &:before,
                &:after{
                    left: 44%;
                    transform: translateX(-50%);
                }
                &:before{
                    top: 25%;
                    transform: rotate(-45deg) translateX(-50%);
                    transform-origin:center center;
                }
                &:after{
                    bottom: 25%;
                    transform: rotate(45deg) translateX(-50%);
                    transform-origin:center center;
                }
            }
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

.hamburger_menu

#hamburger__btn{

display: none;

& ~ .menu_content {

visibility: hidden;

}

&:checked ~ .menu_content {

visibility: visible;

}

.hamburger__btn{

display: block;

width: 40px;

height: 40px;

border-radius: 0 0 5px 5px;

background-color: #ccc;

position: fixed;

top: 0;

right: 10%;

z-index: 100;

&:after {

content: '';

display: block;

width: 60%;

height: 2px;

background-color: #fff;

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

span {

width: 100%;

height: 100%;

display: block;

position: relative;

&:before,

&:after {

content: '';

display: block;

width: 60%;

height: 2px;

background-color: #fff;

position: absolute;

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

&:before {

top: 25%;

}

&:after {

bottom: 25%;

}

.menu_content{

position: fixed;

top: 50%;

left: 50%;

z-index: 10;

transform: translateX(-50%) translateY(-50%);

&:after {

content: '';

position: fixed;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

z-index: -1;

width: 0;

height: 0;

background-color: rgba(0, 0, 0, 0.7);

border-radius: 50%;

transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;

}

a {

color: #fff;

text-decoration: none;

}

#hamburger__btn:checked{

& ~ .menu_content:after {

width: 200vw;

height: 200vh;

}

& ~ .hamburger__btn{

&:after {

content: none;

}

span{

&:before,

&:after{

left: 44%;

transform: translateX(-50%);

}

&:before{

top: 25%;

transform: rotate(-45deg) translateX(-50%);

transform-origin:center center;

}

&:after{

bottom: 25%;

transform: rotate(45deg) translateX(-50%);

transform-origin:center center;

}

ちょっと長くなりましたが、やってることは順序は前後しますが①メニューの切り替え、②メニューがオンになったときのスタイル、③メニューのページに対する絶対配置です。

①メニューの切り替え

#hamburger__btn{
    display: none;
    & ~ .menu_content {
        visibility: hidden;
    }
    &:checked ~ .menu_content {
        visibility: visible;
    }
}

#hamburger__btn{

display: none;

& ~ .menu_content {

visibility: hidden;

}

&:checked ~ .menu_content {

visibility: visible;

}

checkbox自体は非表示にして、label要素のクリックでオンオフを切り替えます。

関節セレクタ~と:checked擬似クラスセレクタを使ってcheckbox以降の兄弟要素のスタイルを変えていきます。

②メニューがオンになったときのスタイル

メニューがオンになったときには、

メニューの内容がオーバーレイでページのセンターに表示される。
メニューボタンの3本線が×マークになる。

です。

1.メニューの内容がオーバーレイでページのセンターに表示

.menu_content{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%);
    &:after {
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: -1;
        width: 0;
        height: 0;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;
    }
    a {
        color: #fff;
        text-decoration: none;
    }
}
#hamburger__btn:checked{
    & ~ .menu_content:after {
        width: 200vw;
        height: 200vh;
    }
}

.menu_content{

position: fixed;

top: 50%;

left: 50%;

z-index: 10;

transform: translateX(-50%) translateY(-50%);

&:after {

content: '';

position: fixed;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

z-index: -1;

width: 0;

height: 0;

background-color: rgba(0, 0, 0, 0.7);

border-radius: 50%;

transition: width 1s ease 0s, height 1s ease 0s, opacity 0s ease 0s;

}

a {

color: #fff;

text-decoration: none;

}

#hamburger__btn:checked{

& ~ .menu_content:after {

width: 200vw;

height: 200vh;

}

メニューの中身(ul要素)を画面中央にfixedし、そのafter疑似要素でオーバーレイ部分を作ります。オンになったら拡大するアニメーションにしました。

2.メニューボタンの3本線が×マークになる。

.hamburger__btn{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 0 0 5px 5px;
    background-color: #ccc;
    position: fixed;
    top: 0;
    right: 10%;
    z-index: 100;
    &:after {
        content: '';
        display: block;
        width: 60%;
        height: 2px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    span {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        &:before,
        &:after {
            content: '';
            display: block;
            width: 60%;
            height: 2px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        &:before {
            top: 25%;
        }
        &:after {
            bottom: 25%;
        }
    }
}
#hamburger__btn:checked{
    & ~ .hamburger__btn{
        &:after {
            content: none;
        }
        span{
            &:before,
            &:after{
                left: 44%;
                transform: translateX(-50%);
            }
            &:before{
                top: 25%;
                transform: rotate(-45deg) translateX(-50%);
                transform-origin:center center;
            }
            &:after{
                bottom: 25%;
                transform: rotate(45deg) translateX(-50%);
                transform-origin:center center;
            }
        }
    }
}

.hamburger__btn{

display: block;

width: 40px;

height: 40px;

border-radius: 0 0 5px 5px;

background-color: #ccc;

position: fixed;

top: 0;

right: 10%;

z-index: 100;

&:after {

content: '';

display: block;

width: 60%;

height: 2px;

background-color: #fff;

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

span {

width: 100%;

height: 100%;

display: block;

position: relative;

&:before,

&:after {

content: '';

display: block;

width: 60%;

height: 2px;

background-color: #fff;

position: absolute;

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

&:before {

top: 25%;

}

&:after {

bottom: 25%;

}

#hamburger__btn:checked{

& ~ .hamburger__btn{

&:after {

content: none;

}

span{

&:before,

&:after{

left: 44%;

transform: translateX(-50%);

}

&:before{

top: 25%;

transform: rotate(-45deg) translateX(-50%);

transform-origin:center center;

}

&:after{

bottom: 25%;

transform: rotate(45deg) translateX(-50%);

transform-origin:center center;

}

3本線はlabel要素(.hamburger__btn)の疑似要素で中央に1本。その子要素spanの疑似要素で上下に引いています。

メニューがオンになったときは中央の線を非表示にして子要素spanの線を45度回転させました。

③メニューのページに対する絶対配置に関しては、そのままなので割愛します。
ただ、チェックボックスがオーバーレイの上に来ないと切替が出来なくなってしまうのでご注意を。

ハンバーガーメニューを使うにあたって

今回制作した案件はPCサイズでもハンバーガーメニューを使うデザインだったのですが、ハンバーガーメニューからしかページ遷移ができないページの場合に、ちょっと使い勝手が悪く感じました。
メニューの内容が見えているグローバルメニューと違って、1クリックしないとメニューの内容がわからない、移動できないっていうのは、使う側からするといささか不便なんだなぁと。

視線がページのコンテンツを読むために上から下に流れっていって、そこからページ遷移のためにハンバーガーメニューを探すっていうのがいかんのかも。
スマホの場合はコンテンツの終わりとハンバーガーメニューを同時に視界にとらえられるので、そこまで違和感ないんですけどね。

ハンバーガーメニュー使うときは、コンテンツの中からページ遷移させるためのテキストリンクやボタンが見てくれる人のために必要なんだなと感じたのでした。

最後にsassだけじゃなくてメニュー部分のCSSへ切り出したファイルもリンクしておきますね。

hamburger.css

今回参考にさせていただいたサイト様

Pure CSS Fullscreen Navigation Menu

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

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

制作前　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

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

[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/

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

制作事例　ハピネステクノロジー株式会社様

前回サイト制作から2年が経過しリニューアル
レスポンシブ対応、コンテンツの充実を行いました。
公開　2015年8月12日
URL　http://happitec.co.jp/

●制作内容
・デザインの刷新
・レスポンシブ対応
・トップページは垂直にダイナミックなスライドする画面スクロール、

WordPressでプラグインVisualizerを使ってキレイなグラフを掲載してみる。

先日、Wordpressで構築したブログにグラフを手軽に載せられないか、お客様よりご相談を受け、いろいろ方法を調べてみました。グラフを載せる方法としては、エクセルでグラフを作って、画像ファイルにして貼り付けるか、プラグインで対応するかの、いずれかになります。以下プラグインでグラフを記事中に挿入する方法を紹介します。

1．プラグインVisualizer: Charts and Graphsを導入する。
特に難しいところはありません。プラグインの新規追加よりVisualizer: Charts and Graphsを導入しましょう。

もちろん有効化します。

2．グラフを作る。
導入したプラグインは、サイドメニューの「メディア」の中に項目が作れています。ちょっと面食らいましたが、画像と同じ扱いと言うことらしいです。Visualizer Libraryを選びます。
Add Newを押してグラフの新規作成に入ります。いろいろ種類がありますが、例として円グラフのパイチャートを選択します。

設定画面になります。

ここで、データを読み込みます。データはPC上でもネット上でもいいのですが、CSVファイルで用意する必要があります。今回は例として以下のデータを用意しました。

種類,匹
犬,10346000
猫,9959000

1行目に項目と単位、2行目以下からデータをカンマ区切りで記入し、○○.csvの名前で保存します。トラブルを防ぐため保存はエンコードをUTF8のBOM無しにしておきます。From Computerボタンを押して、CSVファイルを選ぶと、読み込まれて画面上のグラフに反映されます。

数値は自動で％に変換されますので、計算は不要です。楽ですね。
NEXTで次に進み、グラフの体裁を整えます。タイトルをつけたり、色を変えたり、3D表示したり、見た目を調整して、「Create Chart」を押し完了です。

3．記事に貼り付ける。
再び、Visualizer Libraryのトップに戻ると作成したグラフが表示されています。必要に応じてグラフを作り、このページで管理することになります。作成したグラフの下に、貼り付け用のショートコードがありますので、コードを記事に貼り付けて完了です。

↓こんな感じになります。↓

英語プラグインと言うことで、取っつきにくいところもあるのですが、比較的簡単な方ではないでしょうか？
1回限りの単発での掲載であるなら、エクセルで作ったグラフのキャプチャ画像を取り掲載することをおすすめしますが、定期的にグラフを掲載するようでしたら、上記プラグインでの作業をお薦めします。

ちなみに、私は猫派です。

参照
インプレス　日本の家庭でのペット飼育の現状とは？

制作事例　新潟浴場組合様

新潟の銭湯が加盟する、新潟浴場組合様のWEBサイトをリニューアルしました。
利用者の高齢化が進み、各家庭に風呂がある時代に、いかに「銭湯」を知ってもらい、足を運んでもらうかがテーマです。
営業中の掲載浴場全てに足を運び、取材＋撮影してきました。

公開　2015年8月5日
URL　http://www.niigata268.com/

●制作内容
・デザインの刷新
・CMSの導入
・レスポンシブ対応
・コンテンツの全面見直し
・RICOH THETAによる360°全天球写真を取り入れ

WordPressの無料テーマAttitudeの使い方（フッターエリア使用方法）

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方（固定ページ活用方法）
3.WordPressの無料テーマAttitudeの使い方（フッターエリア使用方法）
3回目の今回は、フッターエリアの使用方法になります。
正直言って、前回でAttitudeの使い方は大筋終わっていますが、
サイトとしての形ができるまでの説明と思って読んでください。
前回と同様の完成サイトのトップページを元に説明していきます。

制作サイト

業種：歯科医院
ページ数：10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

フッターエリア（病院名、住所、診療日）

ダッシュボード/ 外観 / ウィジェット

「カスタムウィジェット画面」に移り「Footer Sidebar」にウェジットパーツをドラッグ&ドロップします。
フッターエリアは3カラムなっています。

テキスト　→　病院名
テキスト　→　住所
Biz Calendar　→　診療日

1.病院名
ダッシュボード / 外観 / ウィジェット / Footer Sidebar / テキスト

ダッシュボード / 外観 / ウィジェット / Footer Sidebar / テキスト
テキストの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。

2.住所
ダッシュボード / 外観 / ウィジェット / Footer Sidebar / テキスト

テキストの「▼」を押すと項目が出てきます。
本文部分に文字を入力して保存します。

3.診療日
ウィジェットあるカレンダーはブログの更新を表示するカレンダーなので
診療日や営業日を表すカレンダーには使用できません。
プラグインをインストールして、診療日を表せる「Biz Calendar」使用します。

ダッシュボード / 外観 / ウィジェット / Footer Sidebar / Biz Calendar
Biz Calendarの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。
※カレンダー設定は別途行います。

ここまで、HTMLを一度も記入せずサイトが完成しました。
一応は見れるサイトになったのではないでしょうか。

ここから、部分的に色を変えたりレイアウトを調節したい場合は、
CSSなどの知識が必要となります。。

無料テーマAttitudeも万能ではないので、
勉強して自分好みのサイトに近づけてください。

撮影事例　佐渡編

先日、サイト制作の撮影で弊社カメラマンと佐渡に行ってきました。
その時撮影した撮影サンプルを紹介します。

朱鷺の森公園にて。飼育場内の朱鷺です。
ガラス越しですがかなり近くで朱鷺を見ることが出来ます。
http://tokinotayori.com/tokipark/

その後、立ち寄った妙宣寺です。
http://www.niigata-kankou.or.jp/sys/data?page-id=8903

新潟県内唯一の五重塔。
こちらには時間調整の都合で寄ったのですが、手入れの行き届いた境内は静かで良いところでした。

当日は天候に恵まれず、屋外の佐渡らしい写真をほとんど撮ることが出来ませんでした。
田園風景の中の朱鷺などを撮りたかったのですが…。

生き物の写真や、景観写真もアートグラフィック新潟にお任せください。

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

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

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

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

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

IFTTTって？

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

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

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

IF this Then That

これは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 a Recipe」をクリックすると「if this then that」と表示されます。これが魔法の呪文でしたね。反転している「this」をクリックします。

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

3.こんなことしたら

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

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

4.あれで

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

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

5.何をする

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

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

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

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

6.確認画面

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

写真をTwitterに投稿する

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

ifttt使って投稿！アルバムができてたらOK♪ #photo pic.twitter.com/4CAueKuual
— 空狐 (@arbeitfuchs) 2015, 7月 31

Facebookにアルバムが作られる

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

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

他にもいろいろ

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

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

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