WEB初心者奮闘記「ここまでできました!」 -6ページ目

WEB初心者奮闘記「ここまでできました!」

Web・PC・アプリや日常のことを書いてます。
いまだにWEBビギナーな私が、ここまでできました!をお届する「ここでき!ブログ」

WEB初心者奮闘記「ここまでできました!」-Selective Tweets

先日、アカウントをとったままずっと放置していたFacebookに前職の後輩から友達リクエストがきたので、これを機会にすこし始めて見ることにしました。
ただ、現在このアメブロにTwitter、ポートフォリオ兼Web製作実験用サイト+FC2ブログ+Twitterに今回Facebookが増えるとなると収拾がつかなくなりそうで、投稿する内容の整理をしなければと思いました。

すぐ思いついたのは、Twitterの投稿をFacebookに反映させる方法があるのですが、全てのツイートがFacebookのウォールに投稿されてもどうなの?って感じなので、FacebookでシェアしたものをTwitterに反映させるものがないか調べてみました。
そしたら、「TwitterとFacebookをどう使い分けるべきか―アプリを使って投稿をコントロール」という記事を発見。
これは「Twitterでの自分自身のつぶやきはFacebookに流さなくていいけど、自分が興味を持ったウェブページや記事の紹介はTwitterでもFacebookでも両方に流したい!」とのこと。
ハッシュタグ「#fb」をつけて投稿したもののみFacebookに反映され、さらにハッシュタグは消えるという。
探していたものとは少し違いましたが、普段Twiiterを使い慣れているので、Twitterベースで投稿のコントロールできるのはいいのではと思い、さっそく試してみることにしました。

1.アプリを検索
まずFacebookの上部の検索窓から「Selective Tweets」を入力。すると検索候補が出てきますのでSelective Tweetsをクリックします。

WEB初心者奮闘記「ここまでできました!」-アプリ検索


2.アプリへ移動
「いいね!」ボタンの右側にある「アプリへ移動」をクリックします。

WEB初心者奮闘記「ここまでできました!」-アプリへ移動


3.アカウント設定
@の右側のテキストボックスにTwitterアカウントを入力し「Save」ボタンをクリック。

WEB初心者奮闘記「ここまでできました!」-アカウント設定

4.アプリの許可
「許可する」をクリックで完了。とても簡単です。
WEB初心者奮闘記「ここまでできました!」-アプリの許可

これで、Twittreの投稿時にハッシュタグ「#fb」を入力すればうまくいくはず....でしたがFacebookに反映されない。^^;
設定画面が日本語ではないので、どこか設定漏れがあるのか再度日本語で設定しているサイトがないか調べてみると、空飛ぶオモチャ箱さんの「Twitter特定の投稿だけFacebookにアップする方法」がありました。
ここではセッティングタブの説明もありとてもわかりやすく説明されていました。感謝です。


5.セッティング
①Settingsタブを選択。
②このチェックボックスにチェックを入れると、「#fb」のハッシュタグがツイート内のどこに含まれていてもFacebookに投稿する。
③Facebookに反映する際、ツイートの文頭に好きなキーワードを挿入したい場合、テキストボックスに入力する。
④このチェックボックスは、Facebookプロフィールに載せる際、各ツイートの下にTwitterのプロフィールへのリンクを載せるかどうかを選択する設定らしいですが、今のFacebookではその設定が反映されないようなので、そのままチェックを入れておきます。

$WEB初心者奮闘記「ここまでできました!」-セッティング


6.投稿
再度、ハッシュタグ「#fb」を入れて投稿してみました。

WEB初心者奮闘記「ここまでできました!」-Twitter投稿

当然、Twitterには反映されます。

WEB初心者奮闘記「ここまでできました!」-Twitter反映

Facebookにはタイムラグがあり、反映には少し時間をおいてから確認したところ、きちんと反映されていました。

WEB初心者奮闘記「ここまでできました!」-Facebook反映

今後、Webとは関係ないプライベートや趣味のことなどは、Fecebookへ移行していく予定です。

「ここでき!」


※2012/10/13 修正
 ・フォントサイズを大きくしました。
 ・強調色を赤からオレンジに変更しました。
$WEB初心者奮闘記「ここまでできました!」-ElementCASE VAPOR

先日、会社から帰宅中に電車内でCOOLなiPhoen用バンパーをつけている人を見かけました。
本来なら何もつけないiPhoneが一番かっこいいと思っていますが、3Gの時よく落として傷つけていたのでケースを使用していました。
iPhone4に買い換えた際もアンテナ問題もあり、appleよりバンパーが無償配布されていたので設置していました。

過去記事:iPhone4用バンパー届きました

さすが純正品、つくりは良かったのですが精度が良すぎて、車で社外品のコネクタを接続する際はいちいち外していました。
着けたり外したりしていたので、最終的にラバー部分が破けて使用不要となりました。
とりあえずヤマダ電機に行って600円ぐらいのケースを買いました。
プラスチック製で背面まで覆うカバータイプです。
ダサいです。
とりあえず傷つかないからイイやって感じで今でも使っています。

ただ電車で見たバンパーが気になり調べてみました。

Element Case Japan inc.Vaporという製品です。
製品ページ:http://elementcase.co.jp/iphone4.html

WEB初心者奮闘記「ここまでできました!」-ElementCASE VAPOR

サイトより引用:
Vaporは非常に滑らかで美しいデザイン設計をしています。シンプルな外観にも関わらず、VaporはCNC加工をしており、 航空機にも使用されているとてもとても丈夫なアルミニウム素材で作られています。 iPhoneのON/OFFボタン部分も独自の加工を施し美しいラインで描かれています。
次にVAPORの作成にアルマイト加工を施し綺羅びやかな色彩に仕上げ、Vapor本体にはELEMENT CASEのロゴをレーザーで刻印しています。 あたなのiphoneを更に楽しくするためのカスタムオプションは近日中に利用できるようになる予定です。


アルミ製でカラーバリエーションも豊富でバイクや自転車のパーツを彷彿させる処理でカッチっとした印象でほしいモードになりました。


気になるお値段は9800円~とのこと。
ん~高い(゜ρ゜)
ただほしいな~

車が車検中だし、地デジ対応テレビ買わなきゃいけないので、いつか買うリスト入りに決定。
待ってろよ!!!!

「ここでき!」
WEB初心者奮闘記「ここまでできました!」-Media Queries

先日、Twitterのプロフィールを下記のように少し変更しました。

「最近HTML5、CSS3、JavaScriptでのサイト作成を研究中。
マルチデバイス対応はUAでなくmediaqueryが主流になると予想して勉強中。」


やはりWEB業界に携わる者、初心者とはいえこの時流に乗り遅れると何の強みもなくなるので、日夜勉強しております。
ただ会社の業務としては、どうしてもIEを無視することはできないので個人的に実験サイトを作って勉強しようかと。

というのも、最近のサイト作成において「ワンソースマルチデバイス」なんて言葉も聞きます。
以前参加したシックスアパートのセミナーもマルチデバイス対応の話でした。

これは1つのソース(HTML)で様々なデバイス(PCだったり、スマホ、タブレット、ネットブック、携帯など)で閲覧できるというもの。
今までは、PCサイトと携帯サイトだけ作ればよかったのですが、iPhoneの登場により小さなディスプレイに表示されたPCサイトはとても見づらく、メニューのaタグを{display:block;}にしてない場合、かなりタップしずらいこともあり、早い段階で大手ポータルサイトなどは最適化されたサイトになっていました。
また、アメブロに代表されるブログは元々レイアウトがテンプレート化されていたので、最適化されなくても見やすいですが、それでも最適化されたブログの方が装飾が省かれサイドバーのバナー広告など余計なものがないため、表示速度が速く感じ大手のブログサービスは対応しているようです。

最近うちの会社でもクライアントからスマホ対応の問い合わせがあるので、スマホ対応サイト作成のプランが増えたようです。
ただ私は別プロジェクトなので、最近サイト作成に関わっていないため口を出していません。
既存サイトは作りも古いサイトも多く、構造から変更するとリニューアルになるため費用もかかりますが、ユーザーエージェントによる振り分けでCSSを切り替えスマホ対応としています。
またタブレット(iPad)対応はサイズ変更はしないが、サイト自体のメニューボタンを大きくして対応しています。

個人的な意見としては、ユーザーエージェントよりメディアクエリの方が主流なるのでは!と思って冒頭の実験サイトとして、ずいぶん前から自分のポートフォリオサイトを作ってみようと思ってたので、メディアクエリを使って作成してみました。ていうかまだ完成していませんが・・・^^;

で、ここからが本題。
そのポートフォリオサイトを作成するにあたり、JavaScriptを使ったイメージギャラリーをいろいろ設置してみたのですが、メディアクエリによるディスプレイサイズの伸縮に対応できるものがなく(カスタムするスキルがないだけ)諦めかけていた時、かちびと.netさんのスマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberryの記事で、表示確認としてリンクされていたツールがSimple Media Queries Testerでした

Simple Media Queries Tester
それまでは手動でブラウザの横幅を伸縮して、どう変化するかを確認していました。
このツールは一つの画面で確認することができるし、横幅のサイズ指定ができるうえに、表示されたサイトのリンクも機能しているので、他のページの確認もできます。

設定
使い方はとても簡単。
まずはSimple Media Queries Testerにアクセス。

見ての通り英語ですがとてもわかりやすいインターフェイスなのですぐわかると思います。

上の段にはテストするURLを入力。
下の段は左から
Netbook Width(デフォルトで650px)
Mobile Width
Desktop Width
Height Width(デフォルトで450px)

ようはテストしたい横幅サイズを入力します。
縦サイズはあまり長く設定すると見ずらいのでほどほどのサイズに。足りない場合はスクロールバーがでます。

自分の場合、下記のような設定でテストしてみました。
Netbook WidthはiPad用として確認したいので、「650」から「768
Mobile WidthはiPhone4用として「480
Desktop WidthはPC用として「960


$WEB初心者奮闘記「ここまでできました!」-設定

横幅768px
WEB初心者奮闘記「ここまでできました!」-iPad用
後述するPC用に比べ左右のマージンは少し詰まっていますが、2カラム表示をキープしています。
(実機で確認したことがないので実際、サイドメニューを下に落とし1カラムの方がいい場合もあります。^^;)

横幅480px
WEB初心者奮闘記「ここまでできました!」-iPhone4用
iPhoen4サイズは、お約束の1カラム表示になっています。

横幅960px
WEB初心者奮闘記「ここまでできました!」-PC用
こちらはPCで見る通り普通に表示されます。実際はメディアクエリは980pxで若干レイアウトが変わりますが、リキッドレイアウトなので多少のサイズの変化は問題ないかと。

Link:THR Design Labの場合

もっと素敵なメディアクエリのショーケース
上記のできそこないのサイトより、世の中にはとても参考になるサイトがたくさんあります。
Link:http://mediaqueri.es/
見てるだけでもわくわくしませんか?

まとめ
このメディアクエリを使ってマルチデバイス対応と言っても、あくまでディスプレイサイズによる表示の変化なので、例えばスマホ用に最適化。とは少し意味合いが違います。と、このテーマで記事を書いたブロガーさんたちは注意として記述していることが多いです
うんうん確かに。と納得させられます。
今後はいかにシンプルに最適化させられるかが課題なのかな~と。

この先マルチデバイス対応が主流になれば、冒頭のユーザーエージェントかメディアクエリのどっちが良い!なんて論争が巻き起りどちらかがスタンダードになっていくんだろうな。

「ここでき!」
先日、新江ノ島水族館の入場券を義兄から頂きました。
6月末までの期限付きだったので26日の日曜日に行ってきました。

本当は土曜日に行く予定でしたが、日曜は25℃と涼しくなりそうなので朝9時過ぎに家を出ました。
息子はバスと電車に乗れるので朝からウキウキしていました。
バスで田園都市線まで出て、終点の中央林間まで行き、そこから小田急江ノ島線へ乗り換え。
この江ノ島線にはびっくりさせられました。
まず、中央林間駅ではホームの一番前で待っていたら、電車がかなり手前で停車したので急いで走って乗りました。
何でこんなにホームが長いんだろうと思い一番前の車両に乗り、息子も喜んでいたのもつかの間、藤沢駅に着きました。
ここではかなり人が降りて座ることもできました。
出発まで少し時間があったのですが、ふと前を見た時線路がない!
あれ~これ江ノ島行きのはずだと思ったのにもしかして折り返すのか?
道理で人が少ないはず!と思い、一度ホームへ出たのでて駅員さんに確認したら江ノ島行きとのこと。
すると、妻が逆走するって聞いたことがあると・・・
思わずiPhoneのMapで確認。

photo:01

なるほど、線路を見ると納得。

そんなこんなで片瀬江ノ島駅に到着。
photo:02



本当は江ノ電で行きたかったのですが、駅から海岸まで少し距離があるので今回は乗り換えも少ない江ノ島線で。
photo:03



駅から5分ほどで新江ノ島水族館へ到着。あまり混んでなさそうで良かった。
photo:04



少し曇っていますが、気温が高くなくて海岸ではサーフィンをする人が多く、また海の家の準備が始まっていました。
photo:05



入館してすぐ、相模の海ゾーン(大水槽)ではうおゴコロというショーが始まるので急いで水槽前に移動。
photo:06



エイ
photo:07



いわし?
photo:08



エイはこっちにおなかを見せて泳いでいます。
photo:09



八景島シーパラダイスと比べて小さい水槽ですが、いろいろな魚が泳いでいます。
photo:10




初めてのペンギンに息子はじーと見ていました。
photo:11



ふぐ
photo:12



ウツボがいっぱい
photo:13



深海環境水槽。何でも水深2000Mの深海と同じ水圧をかけることができるとのこと。
photo:14



深海の海老
photo:15



でた!クラゲ
photo:16



水族館のクラゲは人気があるな~
photo:17



なんだか神秘的
photo:18



ニモに出てきたヤツ?
photo:19



きれいな魚
photo:20



熱帯魚
photo:21



イルカwithアシカのパフォーマンス!スプラッシュはかなり混雑していたので1回見送り前3列目をGET。
photo:22



トリーターたちの挨拶
photo:23



本当にイルカたちはすごい
photo:24



距離が近いのでジャンプも迫力が!
photo:25



息子も思わず拍手を!
photo:26



イルカとトリーターのダンス
photo:27



立ち泳ぎ?
photo:28



水上ブランコ!これだけでも会場が盛り上がる!
photo:29



アシカと一緒にブランコって。
photo:30



イルカジャンプ!
photo:31



目の前でジャンプ!
photo:32



トリーターと一緒にジャンプ!
photo:33



かなり高いジャンプ!
photo:34



2回転ジャンプ!
photo:35



また目の前でジャンプ!
photo:36


初めてイルカショーを見た息子は、イルカがジャンプすると拍手して喜んでいました。^^

上からウミガメ
photo:37



夏直前!気温が上がったり、むし暑かったり体調を崩しやすいこの時期、健康管理に気をつけてこの梅雨を乗り切りましょう!
photo:38

ネットブックを購入する際、イーモバイルに加入すると100円になるという目先の安さにつられて、ほとんど使ってなかったUSBタイプの端末を解約しようと思ってたのに、ヤマダ電機でPocketWiFiに機種変更しました。

photo:01


今までの下り7.2Mbpsから21Mbpsと約3倍の通信速度UP、月5,580円が今なら3,880円、更には6月末までだと8月ごろに長時間バッテリーパックが届くなど、店員さんの営業トークについつい乗ってしまった。
まあ、最近外回りで訪問先をiPhoneのMAPで調べたり、サイト確認したりして帰りにはバッテリーが10%になったり、公衆無線LANのFONは電波状態が貧弱なのでこれで効率良くなればイイかなと。

photo:02


早速家に帰ってセッティングしてみました。

photo:03


まず今まで使って(放置)いたUSBタイプ(D12HW)からSIMカードを抜き取ります。

photo:04


本体カバーを外してSIMカードを差し込み、バッテリーをセットしてカバーを閉じます。

photo:05


本体横の電源ボタンを長押しでON。
小さなディスプレイに地球マークが表示されたの確認したら、iPhoneの「設定」ー「WiFi」を選択。

photo:06


GP01xxxxxxxを選択。

photo:07


WEP Keyを入力してJoinをタップ。

photo:08


これで設定完了。
とても簡単ですね。

来週からの通勤や外回りが少し楽しみになりました。

「ここでき!」