投稿者: 岩間綾香

こんにちは！花粉症に毎年悩まされている岩間です(~_~;)
花粉症の大敵スギ花粉が到来していますね…。目が痒くて仕方ないです；；

 

そんな話はさておき。
今回は、インスタグラムを活用した新サービス”インスタウォール”について、「サービスページだけではよくわからない」という方のために、インスタグラムの仕組みやサービスの特長を改めて紹介します！

サービスページを読んでいない方は併せてどうぞ
インスタグラムをビジネス活用する新サービスのご案内

そもそもインスタグラムとは？

インスタグラムは、若者を中心に絶大な人気を誇る、写真に特化したSNSです。
キャプションにハッシュタグを付けることによって全世界から写真を検索できます。逆に、キャプション中のキーワード検索がないのでハッシュタグを付けてない写真は検索で引っかからないのが特徴です。
1つの写真にいくつものハッシュタグをつけている方もよく目にします(^o^)
個人的には、Twitterよりも国を超えて繋がることができるグローバルな印象です。

ここが魅力！

インスタグラムには写真を加工するフィルターが入っているので、撮影した写真をおしゃれに編集して投稿できます。
フィルターの強さや画像自体の明るさも感覚で微調整できる加工の手軽さが人気の秘訣ではないでしょうか！

インスタグラムをビジネスに活用しよう

インスタウォールは手軽に更新できて、おしゃれにアピールできる特長を活かしたサービスです。
人気を上げ続けているインスタグラムをビジネスに活用できたら素敵ですよね。
なかなかHPを更新する時間がない場合でもスマホ一つで簡単に更新でき、投稿された写真はすぐにホームページに反映されます！

写真の中でも特定のハッシュタグで絞って掲載できるので掲載用とその他のPR用に分けるのもOKです！写真を読み込むユーザーを固定できるので、外部からの意図しない写真が掲載される心配もありません◎
安心してご利用いただけます♪

最後に

更新マニュアルを読むことで、写真の投稿やハッシュタグの設定が簡単に行えます！
ちなみに、最新のアップデート(2016年2月17日現在)で共用のハッシュタグの設定がしやすくなったおかげで、アプリ自体が更に使いやすくなりました(^^)

サービスに関する疑問点や質問等があれば気軽にお問い合わせください！

[contact]

こんにちは！最近映画で号泣して次の日目が腫れた岩間です！
さて、2回に渡って紹介してきたスマホ対応、今回が最後になります！
今回は要素の高さを揃えてくれるjQuery「AutoHeight」を使ったレイアウトです♪

これまでの記事をまだ読んでいない方は併せてどうぞ！
>>なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第1回/全3回）

見る環境によって画像一覧の見え方を変える

説明文の長さによって高さがバラバラになったリストを、要素の高さを揃えてくれるjQuery「AutoHeight」を使って整えます。
今回は、前回までとは違ってcssでの分岐も併せて解説していきます♪

折り返す列の数を設定する

2列で表示したいのは小さいスマホだけなので、それ以上は3列で表示することになります。
別で新しく分岐を設定してもいいのですが・・・
今回はこれまで設定してきた分岐があるので、一緒に書くことにしました。

実は、前回設定した変数の中で小さいスマホ用に設定したものだけ使っていなかったんですが、気付きましたか？

var spWidth = '小さいスマホのサイズ';

これです！
前回作成したJavaScriptに小さいスマホの切り替えを追加します。

if ( spWidth > screen.width) {
$('meta[name=viewport]').attr('content',spView);
}

画像一覧用の処理を入れるだけだと他の処理が無視されてしまうので、Viewportの分岐も入れておきます。ViewportとAutoHeightで実質4種類の分岐になりますね。

小さいスマホ、大きいスマホ、タブレット、PCの分岐に、AutoHeightにあらかじめ用意されているコードをそれぞれ追加します！

/*2つごとに1回、回り込み解除*/
$('高さを揃えたい要素').autoHeight({column:2,clear:1});

/*3つごとに1回、回り込み解除*/
$('高さを揃えたい要素').autoHeight({column:3,clear:1});

これで、2列と3列の分岐ができました！

でもまだこれで完成ではありません。
大きいスマホ用に3列に設定しても、そのままだとリストの大きさが2列用のままで
画面内に収まらない分は折り返してしまいます。

画面幅にきれいに3列並ぶよう、メディアクエリを使って調整していきます！

装飾用のファイルで切り替える

メディアクエリは、cssの機能の1つで、画面のサイズに応じて適用するスタイルを振り分けられる機能です。
例えば、PCでは400pxで表示していたものをスマホでは200pxで表示するように設定できます。

メディアクエリで、画像一覧を大きいスマホでは3列で表示するように設定していきます！

@media screen and (max-device-width:大きいスマホの画面幅){
li{
width:画面幅の3分の1;
}
img{
width:100%;
height:auto;
}
}

たったこれだけでリストもきれいに表示することができました！
画像の横幅を100%にすると画像を囲っている要素の幅に応じて可変してくれるので、いろんなところで使ってます(^o^)

これで動作を確認してみると、PC・タブレット・スマホで崩れることなく表示できました！
画面幅で切り替えているので、スマホを横向きにした場合にも対応しています♪

もっともっと簡単で確実な方法もあるかと思いますが、今回は端末ごとに分けることでわかりやすいコードになったと思います。

あとがき

全3回に渡って紹介してきた、なるべく沢山のスマホ・タブレットで快適に見られるレイアウトの実現、いかがでしたか？

今回記事を書いたことで私自身も改めて勉強になりました。
学んだことを伝えるってすごく難しいですね；；

ここまで読んでくださってありがとうございました(*^^*)

第1回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第１回/全３回）
第2回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第２回/全３回）

こんにちは！やっと風邪に勝利した岩間です。
さて、今回と次回にかけて、設定したJavaScriptを紐解きながら解説していきます！

前回の記事をまだ読んでいない方は併せてどうぞ！
>>なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第1回/全3回）

表示領域をスマホごとに合わせる

○その1　ページ全体を画面に合わせる

ページ全体が縮小されてしまうため、スマホ用にViewportを設定します。
スマホごとに違う画面幅に合わせるため、meta要素を追加しました。

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-widthで画面幅に合わせ、initial-scale=1でページの倍率を指定しています。
これで、スマホページでも綺麗に表示することができました！

○その2　タブレットだけ表示領域を固定する

タブレットでPCページを表示すると、一部のコンテンツが画面からはみ出てしまいました。PCページをタブレットの画面幅で表示するのは少し難しいようです・・・。
でも、崩れているのはタブレットだけなのでmeta要素自体は変えたくない！

何かいい方法はないかと調べてみると、要素の中身だけを切り替えられるコードを見つけました！
そのコードを参考に設定したJavaScriptを早速解説していきます。
今回の目的は、タブレットだけViewportを切り替えることです。
タブレットでは、PC表示でのコンテンツサイズに合わせて表示させたいと思います。

変数を作って必要なものをいれていく

まずは分岐させるのに必要な変数を設定していきます。
ここでの式は左辺と右辺は等しいという意味ではなくて、左辺に右辺を代入するという式なので注意が必要です！

var spWidth = '小さいスマホのサイズ';
var tbWidth = '大きいスマホのサイズ';
var maxWidth = 'タブレットのサイズ';
var spView = 'スマホで表示するための設定';
var tbView = 'タブレットで表示するための設定';

表示を切り替えるコードを書いていく

今回は、画面を横に倒したときにもjQueryが実行されるようにイベントを設定しました。
この中に、「もし○○の時△△を実行し、□□の時は××を実行する」という分岐を以下の内容で設定します。

1. 画面幅がtbWidthより小さい時、ViewportをspViewにする
2. 画面幅がmaxWidthより小さい時、ViewportをtbViewにする

$(window).on('orientationchange resize',function(){
	if /* 1 */( tbWidth > screen.width ){
	　/* 処理 */$('meta[name=viewport]').attr('content',spView);
	}
	else if /* 2 */(maxWidth > screen.width){
	　/* 処理 */$('meta[name=viewport]').attr('content',tbView);
	}
}).trigger('resize');

実際に切り替えてみると、meta要素が書き換わって綺麗に表示できるようになりました！

○まだ不具合が・・・

スマホとタブレットで表示領域を切り替えたことによりどの端末でも綺麗に見られるようになったと思いきや、タブレットを横にしたときに余白ができてしまいました。

この余白はなんだ？？？

よく見てみると、タブレットを横にしたときは画面幅がコンテンツサイズより大きくなっていることに気がつきました！
確かにサイズを固定してたら拡大されないですよね・・・。盲点でした・・・。
一応綺麗に見えてはいるけれど、ちょっと気になります；

そこで、タブレットが横になったときはPCで見るのと同じ表示になるようにコードを追加してみました！

/*最後の分岐に追加*/
else if(maxWidth < screen.width ){
　$('meta[name=viewport]').attr('content',spView);
}

これでどんなスマホでもタブレットでも綺麗に表示できるようになりました！
恐らくもっと簡単かつ良い方法もあるかと思いますが、端末ごとに設定することで私にはわかりやすい書き方ができたと思います(^o^)
次回はAutoHeightの設定を、cssの設定も併せて解説していきます！

第1回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第１回/全３回）
第3回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第３回/全３回）