師じゃなくて下端なので当然はしりますよ。今回はGoogleフォームを使ったときのお話です。GoogleフォームのメリットはGoogleスプレッドシートと手軽に連携ができることですね!※goolge→google(goolge様ごめんなさい)相変わらず前置きが長いので、飛ばして読みたい方はこちらからどうぞ。Googleフォームを使ってみよう回答をGoogleスプレッドシートに保存するGoogleフォームを自分のサイトに設置しようGoogleフォームを利用するメリット·デメリットおまけ前回まで「ログインなしで誰でも投稿できる!Tumblrのゲスト投稿を使ったサイトを作ってみた。」の時のことをお話しましたが、今回はその続編です。Tumblrのゲスト投稿機能を使って、写真をログイン無しで投稿してもらえるように作ったNagamelでしたが、複数の人に投稿してもらえることを考えると、自分の投稿を削除したいことや、投稿そのものが何かの違反ですよってお知らせできる機能が必要かな、と思いました。メールでお知らせしてもらうようにしても良かったのですが、メールってクリックしてメーラーが立ち上がって、空白の画面に文字を入れていくのが、少し気分的に障壁があるように感じるですね。フォームの方がいいな、と。NagamelはTumblr使っているので、FTPでフォームのPHPをアップして、ということができません。別サーバにフォーム用のページおいてもいいんですが、気軽にサクッと作りたかったという今回の趣旨に反するので、これは却下。DISQUSでコメント欄を作るのもありかなと思ったのですが、今回はGoogleフォームを使って作ってみました。下は実際のフォームのスクリーンショットです。Googleスプレッドシートと連携!Googleフォームを使ってみた。未分類Googleスプレッドシートと連携!Googleフォームを使ってみた。本日のラッキーな訪問者はあなたです。本日のラッキーな訪問者はあなたです。」って言われました!(下記画像)「わーい、俺ってばラッキー!!」と思うこともなく。「本日の」「ラッキーな」「感謝の印として」などなど、怪しげな言葉が並びます。表示されているURLも、こちらが入力したURLとは違うところに行かされてますし、GoogleのURLでもないですね。嫌なので、ここから先には進みませんでしたが、調べてみると結構話題になっていたんですね。IEやFirefox、Youtubeなんかのバージョンもあるようですね。君子危うきに近寄らず。不用意にメールアドレスやパスワード、カード番号なんか入力しないようにしましょう。自分が君子だったかどうかはさておき。調べると結構出てきます。本日のラッキーな訪問者はあなたです。2件のコメント制作中に見つけたものアレコレレスポンシブなサイト制作をした際に便利そうだったものをアレコレまとめてみました。===========================今回は、フレームワークの利用を考えていて何を使うのが一番良いか迷っていました。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.YTPlayerhttp://pupunzi.com/設置は簡単で、一通りのJS、CSSを読み込むのは他の物でも同じですが設置場所のパラメーターがわかりやすくて良いんです。”data-property”に値を設定するだけで良いのですが、以前からあるYoutubeのバラメータが使えます。===========================各デバイスのチェック。Bookmarklet』ボタンをブックマークにドレッグ&ドロップし、チェックしたいページでブックマークをクリックすると、iPhone、iPadの確認ができます。それだけではなく、キーボードを表示するとどうみえるか?をチェックする事ができます。RESIZERも同じようにブックマームをしてチェックを行うのですがiPhoneからAndroid、カスタムサイズでのチェックを行う事ができます。テストサーバーを使って、閲覧にパスワードが必要な場合などはこのやり方が便利でいた。RESIZER』http://lab.maltewassermann.com/viewport-resizer/探せば、結構イロイロと便利なサイトや、情報をまとめてくれているサイトが気付かないうちにあったりしますので日々のストック作業を行ってみてはいかがでしょう。コメントを残すIFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)夏、ですね。みなさん夏バテしていませんか?インターハイ始まりましたね。甲子園も始まります!今では見るからに不健康そうですが、昔はこれでもスポーツしてました。インターハイとか夢の向こうのへっぽこ選手でしたが(笑)スポーツを通して、違う学校や年齢性別の別、いろいろ違う人たちと会って話して。今でも仲良く遊ぶ人たちもいます。僕はスポーツを通してでしたけど、こんな感じでこうやってみんないろいろ繋がっていくのですね。いうちょっとまじめな前振りから強引にいきますが。今日はいろんなサービスを連携できる「IFTTT」のお話です。IFTTTって?IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス(Facebook、Evernote、Weather、Dropboxなど)同士で連携することができるWebサービスである。開発したのはリンデン・チベッツで2010年にスタートした。Wikipediaよりhttps://ja.wikipedia.org/wiki/IFTTTそのまま引用しましたが、あるサービスで「何かをすると」違う他のサービスに「何かできる」というものです。ThatこれはIFTTTでレシピ(何かから何かを連携するのをIFTTTではレシピといいます)を作るときの魔法の呪文ですが、そのまま「もしこれをしたら」「そのときあれはこうなる」ということですね。連携できるサービスはいろいろ。右の画像が現在(2015年7月30日)使えるサービスのアイコンです。IFTTTしてみる例えば今回はTwitterにアップした写真をFacebookのアルバムに追加してみます。出かけた先でおもしろい写真をとってTwitterにアップしたものをFacebookにアルバムとしてまとめておいたら、後から見直したりまとめて使ったりするのに便利、かもしれませんよね。0.チャンネル登録IFTTTにログインして(アカウントのない方はアカウントを作ります。メールアドレスとパスワードでOKです)、チャンネルの登録をします。」から利用するサービスのアカウントを登録します。今回はTwitterとFacebookのアカウントを登録しました。Recipesを作るレシピを作成します。Recipe」をクリックします。IFTTTは海外のサイトで、まだ日本語対応していませんが、直感的にクリックしていくだけでレシピが作れます。that」と表示されます。これが魔法の呪文でしたね。反転している「this」をクリックします。トリガーとなる(利用するサービスでどんなことをしたら)サービスがアイコンで一覧表示されるので、利用するアイコンをクリックします。今回はTwitterです。3.こんなことしたら次に「どんなことしたら」を選びます。hashtag」を選択して、「#photo」というハッシュタグをつけたときに発動することにしました。進んで行くとぬるぬるスクロールして行くのが、さりげなく使い易いですね。4.あれで次はどのサービスに使うかを選択します。先ほどは「this」だったところがTwitterのアイコンになっていますね。これも直感的にわかりやすくなっています。反転している「that」をクリックすると利用できるサービスの一覧で表示されるので、今回利用するFacebookをクリックします。5.何をする次に何をさせるかを選択します。URL」を選択します。URLを登録する欄、Facebookに登校するメッセージ、登録するアルバムの名前を登録します。今回は新しく「Twitterphoto」というアルバムをFacebookに作ることにしました。ここでアルバム名を登録するとFacebookに新規でアルバムが作られます。Photos」というアルバムが作られます。Action」をクリックします。最後にこれでOKかどうかの確認画面です。IFTTT用にレシピのタイトルを決めることもできます。今回はそのまますることにしました。写真をTwitterに投稿するちゃんと動くか確認します。ハッシュタグ#photoをつけた写真入りのツィートを作成します。31Facebookにアルバムが作られるほんとにちゃんとFacebookに投稿されるていることを確認します。(反映されるまでに若干タイムラグがある場合があります)無事投稿されてますね。ちなみ新規で「Twitterphoto」というアルバムもちゃんと作成されていました。これで出先からTwitterに投稿した写真をアルバムにまとめることができるようになりました。他にもいろいろ今回はTwitterに投稿した写真をFacebookのアルバムにまとめるレシピを紹介しましたが、他にもいろいろな事ができますよ。個人的に使っているのは、iPhoneで撮った写真をFlickrに登録したり(iCloudの要領確保のため)、Tumblrで書いた記事をFacebookページ流したり、好きなブログが更新されたらRSSを利用してFacebookにリンクを流す、などです。他にもgmailとevernoteを連携したり、いろいろなことができるので自分好みのレシピを作ってみてくださいね。10インチを自宅メインマシンとして使う事になしました。AndroidOSはどこまでできるのでしょうか。虹のようなカラフルデザインのWebサイトまとめもうすぐ6月も終わりですね。新潟ではいまだすっきりしないお天気が続く今日この頃ですが、みなさんがお住まいの空模様はいかがでしょうか?今回は、梅雨空のじめじめ気分が晴れるようなカラフルなWebデザインをまとめてみました。レインボーロードhttp://room-ayaka.jp/rainbowroad/レスポンシブデザイン。ポイントで置いてあるモチーフの色が、じわじわと切り替わります。宝石が虹色に輝くように見えて素敵。GROUPhttp://jazygroup.com/ページ変移のアニメーションが気持ちいい!ぷるぷるSPARKLINGゼリーhttp://www.hakutsuru.co.jp/purupuru/ぷるぷるふるえるアイコンや、しゅわしゅわ消える炭酸水のような背景がとてもかわいらしいです。マウスオーバーの「ぷるんっ!」とした動きが何ともいえない心地よさ。magichttp://www.itokin.com/musee/colormagic/白ベースの中に突然現れるカラーテープが、鮮やかでとても印象的。ファッションショーを見ているかのような商品写真の紹介の仕方も面白いです。500色の色えんぴつhttp://www.felissimo.co.jp/500/「500色」がずらりと並ぶ様は壮観!色えんぴつで描かれたようなボタンやタイトル背景など、色えんぴつのイメージで統一されたデザインになっています。avionhttp://avionavion.jp/レスポンシブデザイン。こども服のブランドサイトなのですが、やわらかめの色使いがイメージにぴったり。CHITAZENhttp://www.chitazen.co.jp/彩度の低いちょっと渋めのレインボーカラー。スクロールに連動して描かれるラインの動きが楽しいです。ヘッダーの町の風景が時間に合わせて変わるのも、心憎い演出。いかがでしたでしょうか?「カラフル」と一口にいっても、彩度や色の面積によって様々なバリエーションがあるんですね〜。足を運んでみてください。新たな発見があると思います。抽選会場の本部、古町花街コミュニティインフォメーション五季茶家は本日月曜日は定休日となっておりますので、ご注意ください。30約1ケ月開催された古町花街千社札めぐりも本日が最終日です。みなさんはもう行かれましたか?twitterやFacebookでも「行ってきたよ♪」という声も聞かれます。コメントを残すLINE@登録してみました。暖かい日が多くなってきて少し気分がいいhaneです。寒さから早く解放してほしいです。今回は、2015/02/12に一般開放されたLINE@を登録してみましたので、その登録方法を紹介します。LINE@は無料で使える(有料版もあり)お店ページです。承認された店舗のみが使用することができました。今回は、LINE@アプリをダウンロードして、アカウントを登録が可能になりました。play内は、「LINEat」で検索が可能です。登録方法をご紹介します。スマホをデジカメで撮ったので画像が汚いです。「LINEログイン」を押してください。※LINEのアカウントを持っていないとログインできません。ない方は、LINEアプリのダウンロードから始めましょう。3.規約の同意4.LINEアカウントにログインLINEで登録してあるアカウント情報の「メールアドレス」と「パスワード」を入力してください。真ん中の「+」をタップするとアカウント作成画面へ移ります。※この時に、年齢認証を行う必要があります。Wi-Fiで接続しているとパスワードなど聞かれますので、Wi-Fiを切った方が早く進むと思います。名前の箇所に会社名(お店名)を入力して主業種と副業種を選択します。以上で初期の登録は完了です。「登録作業はすべてスマホで行うの?」と思う方がいると思います。大丈夫です!PCからも編集することはできます。下記のURLからアクセスしてください。LINE@管理画面https://admin-official.line.me/PCから管理画面に入るにはアカウント情報の「メールアドレス」と「パスワード」が必要です。初回は認証コードが必要ですので登録メールアドレスへ認証コードを送信してログインしてください。PCでログインすると大変親切なマニュアルがありますので、アカウントページの作成はマニュアルをご覧ください。わが社のLINE@です。業種が「企業、その他」に分類されるため承認がされないみたいです。承認されないと、LINE@ページには掲載されないため、露出が激減します。承認依頼ができる業種は必ず行いましょう。未分類LINE@登録してみました。