どうも、Kazです。
この数日で面白そうなオーサリングソフトを見つけたので使ってみたのですが、「もしかしたら本気で使えるんじゃないか？」と思ってしまうくらいのアプリでしたので紹介したいと思います。
そのオーサリングソフトの名前は
「Macaw」
http://macaw.co/
記事を書いている現在では、バージョンが1.6。MacとWindowsに対応しています。
過去には有料のアプリだったようですが、Download FREEとなっています。
起動してから、いろいろとメニューを探ったのですがレジスターがないようですので完全にフリーのアプリになっているようです。
このアプリを知っている方は、恐らく2014年頃からではないでようか。
日本のサイトでこのアプリを紹介している所は少なく、とても少数派なアプリです。
webサイトの構成上サブメニューが必要な場合があります。
PCであればサイドメニューにしたり、レイアウトはいろいろできますが、
モバイル時のサブメニューの位置に頭を悩ませることがあります。
表示方法いろいろありますが、表示位置は3つのパターンが多いようです。
グローバルメニューに含める
参考サイト：三田国際学園
サブメニューをグローバルメニューに取り込んでしまいエリアごと消去してしまう。
画面がすっきりし、ナビゲーションが一つになっていてわかりやすい。
項目数によってはメニュー項目が増えてしまい探しにくい。
ページのメインビジュアルの下
参考サイト：株式会社北都鉄工
ファーストビューで目に入りやすいため、
わかりやすいナビゲーションとなっている。
項目数によっては高さが出てしまい、
メインコンテンツまでのスクロール量が多くなってしまう。
フッターエリアの上
参考サイト：ポカリスエット
ページ下に配置してあるため、
ファーストビューはすっきり表現できる。
下までスクロールしないとサブメニューが出てこないので、
ページ回遊がしにくい。
項目数やデザインよって変わるのであくまで位置の参考となればと思います。
yasaiです。師走ですね。師じゃなくて下端なので当然はしりますよ。
今回はGoogleフォームを使ったときのお話です。GoogleフォームのメリットはGoogleスプレッドシートと手軽に連携ができることですね！
※goolge→google(goolge様ごめんなさい)
相変わらず前置きが長いので、飛ばして読みたい方はこちらからどうぞ。
前回まで「ログインなしで誰でも投稿できる！Tumblrのゲスト投稿を使ったサイトを作ってみた。」の時のことをお話しましたが、今回はその続編です。
ログインなしで誰でも投稿できる！
Tumblrのゲスト投稿を使ったサイトを作ってみた。
【概要編】・【制作編】
Tumblrのゲスト投稿機能を使って、写真をログイン無しで投稿してもらえるように作ったNagamelでしたが、複数の人に投稿してもらえることを考えると、自分の投稿を削除したいことや、投稿そのものが何かの違反ですよってお知らせできる機能が必要かな、と思いました。
無論メールでお知らせしてもらうようにしても良かったのですが、メールってクリックしてメーラーが立ち上がって、空白の画面に文字を入れていくのが、少し気分的に障壁があるように感じるですね。やっぱりフォームの方がいいな、と。
NagamelはTumblr使っているので、FTPでフォームのPHPをアップして、ということができません。別サーバにフォーム用のページおいてもいいんですが、気軽にサクッと作りたかったという今回の趣旨に反するので、これは却下。
DISQUSでコメント欄を作るのもありかなと思ったのですが、今回はGoogleフォームを使って作ってみました。下は実際のフォームのスクリーンショットです。
続きを読む Googleスプレッドシートと連携！Googleフォームを使ってみた。
昨日(2015/11/05)Google Chromeで、あるURLを直打ちしてアクセスしたところ、
「Chromeユーザーの皆様 本日のラッキーな訪問者はあなたです。」
って言われました！(下記画像)
「わーい、俺ってばラッキー!!」と思うこともなく。
だって怪しすぎるでしょう。
「本日の」「ラッキーな」「感謝の印として」などなど、怪しげな言葉が並びます。
表示されているURLも、こちらが入力したURLとは違うところに行かされてますし、GoogleのURLでもないですね。
さすがに嫌なので、ここから先には進みませんでしたが、調べてみると結構話題になっていたんですね。IEやFirefox、Youtubeなんかのバージョンもあるようですね。
君子危うきに近寄らず。不用意にメールアドレスやパスワード、カード番号なんか入力しないようにしましょう。自分が君子だったかどうかはさておき。
詐欺？？「2015年年次訪問者調査の参加者に特別に選ばれました！」の画面が急に出てくる現象
調べると結構出てきます。。。
レスポンシブなサイト制作をした際に便利そうだったものをアレコレまとめてみました。
制作前 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
今回は、フレームワークの利用を考えていて何を使うのが一番良いか迷っていました。
その時に便利だったのがコチラのサイト
[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」のお話です。
IFTTT(イフト)とは「レシピ」と呼ばれる個人作成もしくは公に共有しているプロフィールを使って数あるWebサービス（Facebook、Evernote、Weather、Dropboxなど）同士で連携することができるWebサービスである。開発したのはリンデン・チベッツで2010年にスタートした。
― Wikipediaより
https://ja.wikipedia.org/wiki/IFTTT
そのまま引用しましたが、あるサービスで「何かをすると」違う他のサービスに「何かできる」というものです。
IF this Then That
これはIFTTTでレシピ(何かから何かを連携するのをIFTTTではレシピといいます)を作るときの魔法の呪文ですが、そのまま「もしこれをしたら」「そのときあれはこうなる」ということですね。
連携できるサービスはいろいろ。右の画像が現在(2015年7月30日)使えるサービスのアイコンです。かなりいろいろありますね。
例えば今回はTwitterにアップした写真をFacebookのアルバムに追加してみます。出かけた先でおもしろい写真をとってTwitterにアップしたものをFacebookにアルバムとしてまとめておいたら、後から見直したりまとめて使ったりするのに便利、かもしれませんよね。
IFTTTにログインして(アカウントのない方はアカウントを作ります。メールアドレスとパスワードでOKです)、チャンネルの登録をします。
右上のメニュー「Channels 」から利用するサービスのアカウントを登録します。
今回はTwitterとFacebookのアカウントを登録しました。
レシピを作成します。「My Recipes」から入って、「Create a Recipe」をクリックします。
IFTTTは海外のサイトで、まだ日本語対応していませんが、直感的にクリックしていくだけでレシピが作れます。
「Create a Recipe」をクリックすると「if this then that」と表示されます。これが魔法の呪文でしたね。反転している「this」をクリックします。
トリガーとなる(利用するサービスでどんなことをしたら)サービスがアイコンで一覧表示されるので、利用するアイコンをクリックします。今回はTwitterです。
次に「どんなことしたら」を選びます。今回は特定のハッシュタグで分類できるように「New tweet by you with hashtag」を選択して、「#photo」というハッシュタグをつけたときに発動することにしました。
進んで行くとぬるぬるスクロールして行くのが、さりげなく使い易いですね。
次はどのサービスに使うかを選択します。先ほどは「this」だったところがTwitterのアイコンになっていますね。これも直感的にわかりやすくなっています。
反転している「that」をクリックすると利用できるサービスの一覧で表示されるので、今回利用するFacebookをクリックします。
次に何をさせるかを選択します。今回はアルバムを作るので、「Upload a photo from URL」を選択します。
URLを登録する欄、Facebookに登校するメッセージ、登録するアルバムの名前を登録します。今回は新しく「Twitterphoto」というアルバムをFacebookに作ることにしました。
ここでアルバム名を登録するとFacebookに新規でアルバムが作られます。空欄にした場合は「IFTTT Photos」というアルバムが作られます。
この三つをきめたら「Create Action」をクリックします。
最後にこれでOKかどうかの確認画面です。IFTTT用にレシピのタイトルを決めることもできます。今回はそのまますることにしました。
ちゃんと動くか確認します。ハッシュタグ#photoをつけた写真入りのツィートを作成します。
ifttt使って投稿！アルバムができてたらOK♪ #photo pic.twitter.com/4CAueKuual
— 空狐 (@arbeitfuchs) 2015, 7月 31
ほんとにちゃんとFacebookに投稿されるていることを確認します。(反映されるまでに若干タイムラグがある場合があります)
無事投稿されてますね。ちなみ新規で「Twitterphoto」というアルバムもちゃんと作成されていました。成功ですね。これで出先からTwitterに投稿した写真をアルバムにまとめることができるようになりました。
今回はTwitterに投稿した写真をFacebookのアルバムにまとめるレシピを紹介しましたが、他にもいろいろな事ができますよ。
個人的に使っているのは、iPhoneで撮った写真をFlickrに登録したり(iCloudの要領確保のため)、Tumblrで書いた記事をFacebookページ流したり、好きなブログが更新されたらRSSを利用してFacebookにリンクを流す、などです。
他にもgmailとevernoteを連携したり、いろいろなことができるので自分好みのレシピを作ってみてくださいね。素敵なレシピができたらぜひ教えてください！
自宅で使っていたMacBookPro(Let2008)が、長年の酷使と熱？によりグラフィックボードが瀕死の状態となり画面がモノスゴイ状態からブラックアウトになるなど…使うのに困難をきわめ、修理に出してみれば
『古くて、もう部品ないっす』
などと言われしまう状況に…
新しいMacを買うにしても、こちらも予算的に瀕死の状態だったため「場繋ぎ」にと手元にあるLenobo YOGA Tab 10インチを自宅メインマシンとして使う事になしました。
果たして、AndroidOSはどこまでできるのでしょうか。
もうすぐ6月も終わりですね。
新潟ではいまだすっきりしないお天気が続く今日この頃ですが、みなさんがお住まいの空模様はいかがでしょうか？
今回は、梅雨空のじめじめ気分が晴れるようなカラフルなWebデザインをまとめてみました。
AYAKA NEW ALBUM レインボーロード
http://room-ayaka.jp/rainbowroad/
レスポンシブデザイン。
ポイントで置いてあるモチーフの色が、じわじわと切り替わります。
宝石が虹色に輝くように見えて素敵。
JAZY GROUP
http://jazygroup.com/
ページ変移のアニメーションが気持ちいい！
ぷるぷるSPARKLINGゼリー
http://www.hakutsuru.co.jp/purupuru/
ぷるぷるふるえるアイコンや、しゅわしゅわ消える炭酸水のような背景がとてもかわいらしいです。
マウスオーバーの「ぷるんっ！」とした動きが何ともいえない心地よさ。
color magic
http://www.itokin.com/musee/colormagic/
白ベースの中に突然現れるカラーテープが、鮮やかでとても印象的。
ファッションショーを見ているかのような商品写真の紹介の仕方も面白いです。
モチイエ女子web
http://www.mochiiejoshi.com/mj/
ビビットな色使いとポップなパターンが、まさに女子向け！
FELISSIMO 500色の色えんぴつ
http://www.felissimo.co.jp/500/
「500色」がずらりと並ぶ様は壮観！
色えんぴつで描かれたようなボタンやタイトル背景など、色えんぴつのイメージで統一されたデザインになっています。
avion
http://avionavion.jp/
レスポンシブデザイン。
こども服のブランドサイトなのですが、やわらかめの色使いがイメージにぴったり。
CHITAZEN
http://www.chitazen.co.jp/
彩度の低いちょっと渋めのレインボーカラー。
スクロールに連動して描かれるラインの動きが楽しいです。
ヘッダーの町の風景が時間に合わせて変わるのも、心憎い演出。
いかがでしたでしょうか？
「カラフル」と一口にいっても、彩度や色の面積によって様々なバリエーションがあるんですね〜。
古町花街千社札めぐりは、明日が最終日です！ この機会に行ったことの無いお店にも、 是非足を運んでみてください。新たな発見があると思います。 抽選会場の本部、古町花街コミュニティインフォメーション五季茶家は本日月曜日は定休日となっておりますので、ご注意ください。
— 古町花街千社札めぐり (@senjyafuda_mgr) 2015, 3月 30
約１ケ月開催された古町花街千社札めぐりも本日が最終日です。
みなさんはもう行かれましたか？
twitterやFacebookでも「行ってきたよ♪」という声も聞かれます。
春の訪れを感じるこの季節にふらり古町も素敵ですよね！
暖かい日が多くなってきて少し気分がいいhaneです。
寒さから早く解放してほしいです。
今回は、2015/02/12に一般開放されたLINE＠を登録してみましたので、
その登録方法を紹介します。
LINE＠は無料で使える（有料版もあり）お店ページです。
今までのLINE＠は、LINE株式会社に申請を出して、
承認された店舗のみが使用することができました。
今回は、LINE＠アプリをダウンロードして、アカウントを登録が可能になりました。※App Store／Google play内は、「LINEat」で検索が可能です。
登録方法をご紹介します。
スマホをデジカメで撮ったので画像が汚いです。
1.LINE＠アプリをダウンロード
2.LINE＠アプリを起動
「LINEログイン」を押してください。 
※LINEのアカウントを持っていないとログインできません。
ない方は、LINEアプリのダウンロードから始めましょう。
3.規約の同意
4.LINEアカウントにログイン
LINEで登録してあるアカウント情報の「メールアドレス」と「パスワード」を入力してください。
5.LINEアカウント作成
真ん中の「+」をタップするとアカウント作成画面へ移ります。
※この時に、年齢認証を行う必要があります。
Wi-Fiで接続しているとパスワードなど聞かれますので、
Wi-Fiを切った方が早く進むと思います。
6.プロフィール入力
名前の箇所に会社名（お店名）を入力して
主業種と副業種を選択します。
7.初期登録完了
以上で初期の登録は完了です。
ここから、アカウントページや返信コメントなど登録していくのですが、
「登録作業はすべてスマホで行うの？」と思う方がいると思います。
私もそうでした。。。
大丈夫です！ＰＣからも編集することはできます。
下記のＵＲＬからアクセスしてください。
LINE@管理画面
https://admin-official.line.me/
ＰＣから管理画面に入るにはアカウント情報の「メールアドレス」と「パスワード」が必要です。初回は認証コードが必要ですので登録メールアドレスへ認証コードを送信してログインしてください。
ＰＣでログインすると大変親切なマニュアルがありますので、
アカウントページの作成はマニュアルをご覧ください。
ためしに作ってみた わが社のLINE@です。
業種が「企業、その他」に分類されるため承認がされないみたいです。
承認されないと、LINE@ページには掲載されないため、露出が激減します。
承認依頼ができる業種は必ず行いましょう。