SNSのトップを知る!!

kaz_161129_top

どうも、Kazです。
SNSは何を使っていますか?
そして、そのSNSで最も人気がある『アカウント』は何か…
気になった事はありませんか?

情報の拡散などで使われるSNSですが、トップになるからにはそれなりの理由があるはずです。
その『もっとも人気のあるアカウント』を見て調べることで気づくこともあると思います。

そこで
Facebook、Twitter、Instagramの「いいね!」や「フォローワー数」でのランキングがわかるサイトを紹介いたします!!

続きを読む SNSのトップを知る!!


クリスマス Webデザインまとめ 2016

ハロウィンが終わったと思ったら、次はもうクリスマス!一大イベントに向けて、早くもクリスマス仕様のWebサイトやページが続々公開されています。
普段よりも華やかにドレスアップしたWebサイト。一足お先に、チェックしてみました。

ミキハウス クリスマスサイト



https://www.mikihouse.co.jp/christmas/

赤・白・ピンクのベースカラーのグリッドが、ぎゅっと詰め込まれたギフトボックスのよう。子ども服のブランドですが、贈る側の大人もぐっとくるシックなデザインですね〜。ギフトの詳細ページは左右2分割の縦スライダーで、くるくる互い違いに回る動きが楽しいです!
※レスポンシブデザイン

クリスマス 2016 – ロイヤルコペンハーゲンジャパンオンラインショップ



https://www.royalcopenhagen.jp/christmas2016/

ロイヤル コペンハーゲンのある風景とともにクリスマスギフトを紹介されています。メインカラーのグリーンを基調に金色をアクセントとした、全体的に高級感のあるデザイン。キャッチコピーのリボンのアニメーションが、可愛らしいアクセントになっています。
※レスポンシブデザイン

三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」



http://cp.miguide.jp/christmas-journey/

闇に浮かぶオレンジ色の「スカイランタン」が印象的。明朝体のコピーも力強く、目を惹きつけられます。クリスマスを「こころに太陽を呼ぶ、祝祭。」とし、太陽をモチーフとしたあしらいや色彩でページを彩っています。あえてバックを暗色にさせていることで、より光が引き立っているところもまたすてきですね。コンテンツの開閉も、ちょっと楽しいアニメーションになっています。
※レスポンシブデザイン

土屋鞄のクリスマスギフトサイト|土屋鞄製造所



http://www.tsuchiya-kaban.jp/c/2016xmas.php

シンプルなツリーに、星座がきらめくシンプルなメインイメージがすてき。クリスマスまでのカウントダウンにもわくわくしてきますね!
取り扱っているギフトは、鞄や財布などの革製品。革の絶妙な光沢が映えるような、濃紺や深緑などの落ち着いた配色でまとめられています。
※レスポンシブデザイン

Your Tree 大切なひとへ、ツリーを贈ろう。|土屋鞄製造所



http://www.tsuchiya-kaban.jp/event/2016xmas_yourtree.php

こちらも土屋鞄製造所さんのクリスマスサイト。ランダムで作られるツリーに添えて、ちょっとユニークな一言メッセージを送れるサービスです。
ぴょこぴょこ動くサンタのおしりが可愛い!

TOKYU CHRISTMAS WONDERLAND 2016 – Disney CRYSTAL MAGIC


28

http://crystalmagic.jp/s/tokyu/

ラインと絶妙な濃淡で表現された、クリスタルのイメージが美しいです。
ボタンやページトップのホバーアニメーション、ゆっくりと変化するクリスタル調の背景など、細かいところまでこだわりを感じるデザインです。
※レスポンシブデザイン

あかりを灯そう マザーハウスのクリスマス2016|MOTHERHOUSE


29

http://www.mother-house.jp/event-campaign/xmas/

町に立ち並ぶ家が、なんとギフトボックスに。ふわっと広がる灯りの表現や、微妙な濃淡が重なる淡い色彩が、とてもやさしいサイトです。
他にもタイトルロゴやワンポイントのツリーなど、すみずみまで可愛らしいあしらいに溢れています。
※レスポンシブデザイン

HAPPY HOLIDAY|PARCO


04

http://parco.jp/gift/

油絵調のイラストに迷い込んでしまったような、可愛らしいけどちょっと不思議な世界観のデザインです。実写とイラストが混じり合う、イメージビジュアルもすてき!

アガット | agete


05

http://www.agete.com/2016christmas/

セピア調の繊細なタッチで描かれたイラストが美しいです。ウィンドウ内でページが完結するレイアウトで、メニューの配置がちょっと珍しく感じました。
商品ページも同じくセピア調でまとめられ、ゆっくりと降る雪のアニメーションやラインの飾り枠が、華奢で繊細なアクセサリーにとてもマッチしています。
※レスポンシブデザイン

HOLIDAY SPECIAL – Crafted by Hand & Heart|スターバックス コーヒー ジャパン


18

http://www.starbucks.co.jp/holiday/

動画で進んでいく、スクロールアニメーション。描くように表示されるボタンやコピー、手描き調のあしらいや、ちょっとコミカルなコマ撮りアニメーションなど。木目調の背景と相まって、全体的にほっこりと暖かいデザインイメージです。

 トマムのクリスマス~雪に願いを~|星野リゾート トマム【公式】


24

http://www.snowtomamu.jp/special/xmas/

雪原に広がるキャンドルの灯りと、満天の星空がとても幻想的ですね…!フルスクリーンと降雪のさりげないアニメーションで、その地の魅力をシンプルに演出しています。
※レスポンシブデザイン

西武・そごうのクリスマス|西武・そごう


11

https://www.sogo-seibu.jp/christmas2016/

縦組み&明朝体のキャッチコピーが印象的。くるくるとした曲線と交わるロゴタイプもすてきです。イラストで埋められたバックと、プレゼントを結ぶリボンを思わせるような赤色のバックがとてもにぎやか。

TOKYO KAIKAN 東京會舘 Christmas 2016


13

https://www.kaikan.co.jp/special/xmas/

左右2分割されたメニュー。こちらはケーキやレストランの問い合わせ先が複数あるのですが、こうして入り口から分けられていると動線がシンプルでわかりやすいですね!
赤・白・金で落ち着いた彩度の色どりで、華やかな大人のクリスマスといったイメージです。
※レスポンシブデザイン

 ルピシアクリスマス 2016


16

http://www.lupicia.com/shop/e/eX16/

お茶のオンラインショップ「ルピシア」のクリスマスサイト。クリスマスの限定ギフトに描かれたキャラクターたちが登場する、絵本「アルチザンたちの物語」が楽しめます。メインビジュアルはパララックススクロールで、奥行きのある演出がされています。
※レスポンシブデザイン

サンリオクリスマス特集2016


17

https://shop.sanrio.co.jp/special/xmas2016/

クリスマスカラーにまとめられた、シンプルなキャラクターイラストがメインビジュアル。ツリーのオーナメントになったキャラクターたちも、パララックススクロールで背景を彩ります。

終わりに



このほかにも、AGN Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。

00

Web Site Clips
http://agn-websiteclips.tumblr.com/


よかったら、のぞいてみてくださいね!


ファイルとキーボード・マウスの共有にUSBリンクケーブルを使ってみた。(windows10とmacOS Sierraにて)

会社のデスクで、WindowsとMacを並べてつかってます。
以前はUSB切り替え機で、USBのキーボードとマウスを切替えて使ってましたが、
配線が乱雑になるに加え認識しないこともままあり、結局は2組のキーボードとマウスを並べて使ってました。
ですが、デスク上に2組もキーボード・マウスがあると邪魔なんですよね。

そこで!USBリンクケーブルです。
2台のPCをUSBで繋いでデータをやり取りするケーブルです。結構昔からあるジャンルの製品です。
最近知ったのですが、キーボードなどの入力デバイスの共有もできるんです。

と言うわけで試しに一番安い製品を買ってみました。よくわからない中国製(Ugreen)です。Amazonで1000円ちょっと。

外観と箱
外観はUSBケーブルそのもの。
片方のコネクタ部分にストレージが入っているようです。(USBメモリとして認識します。)
そこにリンク用のソフトウェアが同梱されていおり、仮想CD的に自動起動、インストールを行います。

マイコンピューター
使いたい双方のUSBポートに接続して使用します。
設定は特に不要で繋げば常駐ソフトがインストールされて自動で使えるようになります。きちんと日本語化してありました。
使いこなすには、色々設定した方が便利そうです。

USB LINK設定画面
とりあえず、2台のディスプレイをマウスで移動できる設定にしました。

2台が繋がると、片方のデスクトップからもう片方のデスクトップにマウスカーソルが移動できるようになります。
移動した段階で、移動先PCを移動元のキーボード・マウスでコントロールできるようになります。

タスクトレイ

タスクトレイに常駐しているユーティリティのおかげで、ファイルをドラッグドロップでコピーできます。さらにクリップボードも共有できます。

↓こんな感じです。↓ 右のWindowsから左のMacへ移動する様子。

モニタをまたぐときに一瞬もたつくものの、感覚的にはデュアルモニタに近い操作性です。
ソフトウェアで同じ事ができるSynergyなどありますが、こちらの方が設定も簡単でファイルのコピーもできますし、どなたにもおすすめできます。
(ケーブルという性質上、2台での共有に限られます。)

ファイルの転送は上記設定でドラッグ&ドロップで可能ですが、転送用の専用ソフトGO!Bridgeも付属します。
エクスプローラー的に操作したいときには便利に使えそうです。

GO Bridge
良いことばかりでは無くデメリットもあります。
あたりまえですが、OSが立ち上がってないと共有はできません。BIOSの操作などは厳しいですね。機械的なKVMに劣る所です。

電源が入っていても片方がスリープしていると、ディスプレイをまたいでカーソルの移動ができません。
ショートカット(ALT+S)で強制切替えをし、操作することになります。
また、私は片方(Mac)をサブマシン的に使っているので気になりませんが、メインマシン的に使うとレスポンスが気になるかも知れません。
今回使ったのがUSB2.0版だったので、USB3.0対応であれば、もっと快適かも知れませんね。

色々制限もありますが、複数台のPCを使う人なら1本あると便利だと思います♪

備考
上記記事の執筆にあたり、
・Windows10 aniversary update適用済み
・Mac os x sierra / Mac mini 2013
にて動作チェックを行いました。


jQuery3.1.1でbxSliderが動かないこととGoogle Fonts + 日本語早期アクセスを試してみたこと

blog161110


あれ?bxSlider動かない・・・


いつも通りに設置したのになぁ。
なんか書き間違えたかな?。。。
161105sample_bxslider01
コンソールを見るとなんかエラーしてますね。

jquery-3.1.1.min.js:4 Uncaught TypeError: Cannot read property ‘indexOf’ of undefined(…)


jQuery3.xになってload()がなくなった


調べてみたら、bxslider.jsの中でload()が使われているのが原因みたいです。


うーん、load()on('load',function(){})で書き換えればいいらしいですけど、プラグインファイル直接修正するのはちょっとなぁ。
slick.jsと並んでスライダー系では使いやすくて大好きなプラグインなんですけど。。。
bxSliderを使うときはjQueryは3.xになる前のバージョンなら動くので、そっちですかね。
ちょっと残念。

load()以外にも、いろいろなくなったり変わったりしているので参考サイトなどで見ておくといいかもです。


でも動くときもあるよ?


そうなんです。別な時にすっかり忘れててjQuery3.1.1使ってbxSlider入れたら普通に動くんです。
あれれ、jQuery3.xだと動かないんじゃないの?
動いてしまったのはこんなソースです。


それではちゃんとbxslider.jsのエラー箇所をみてみます。

bxslider.jsの該当箇所


functionの第一引数selectorにはver preloadSelector = slider.children.eq(slider.settings.startSlide); が入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。

image . complete
画像が完全にダウンロードされた、または、画像が指定されなかったなら、true を返します。そうでなければ、false を返します。
<http://www.html5.jp/tag/elements/img.html>


ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。
だから、最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。
しかしiframeだと普通に動くな。。なんで??

Google Fontsで「はんなり明朝」とか使える!!


そんなことより(いや上のも大切なことですよ?)、これはすごい大ニュースなのでは??

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts 早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。
Google Fonts + 日本語早期アクセスより引用


ということですから、完全にサポートされているわけではありません。
日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。
いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。
「はんなり明朝」とか好きなフォントですし、嬉しいですね!

ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。
漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。
なので、フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。

使えるフォント


  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

漢字なし


  • はんなり明朝
  • こころ明朝
  • ニクキュウ
  • ニコモジ

ひらがななし


  • ニクキュウ

せっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。
よかったら見てみてくださいね。
jQueryのバージョンはjQuery3.1.1です!
ちなみに今回はスマホ意識してないのでPCでご覧くださいね(汗)

【DEMO】


参考サイト



GoogleMaps:APIキーが必須になってたのね…



kaz_161027_top

どうも、Kazです。
GoogleMaps、使ってますか?

GoogleMapsから共有で作成されたiframeからなるコードを使って埋め込んでいる場合は良いのですが、APIを利用して表示を行おうとしたらこんなエラーが出たりしていませんか?
「エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」
ブラウザのコンソールの方では
「Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error」
「Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys」
のエラーが出ていると思います。


既にご存知の方も多いかと思いますが
GoogleMaps v3へ移行した当初、APIキー不要でイロイロとできたのですが
2016年6月22日から新規サイトでAPIを利用してGoogleMapを表示する際にはAPIキーが必要になりました。
※2016年6月22日前にWeb上にアップされている物に関しては、『今の所』APIキー不要で使用することができるようです。
続きを読む GoogleMaps:APIキーが必須になってたのね…


ハロウィンWebデザインまとめ 2016

ここ数年で、日本でもすっかりおなじみのイベントとなってきたハロウィン。会場参加型のイベントの他にも、ハロウィン限定のグッズやSNSでのキャンペーンなど、手軽に参加できるものも増えてきました。

時期はいよいよハロウィン目前。サイトまるごとハロウィン仕様の特設サイトも続々と公開されています。
おどろおどろしかったり、ポップだったり、ゆるかったり…いろいろ見てみると、それは意外と多種多様。
この時期ならではのハロウィンサイトを、ぜひお楽しみください。

※以下は2016年10月26日現在の情報です。

アイスの実 みんなでしちゃってみハロウィン|グリコアイス


11
http://cp.glico.jp/icenomi-calendar/halloween/

Twitterハッシュタグで参加する、アイスの実のレシピ投稿イベント。スクロールに合わせて回るジャック・オー・ランタン(アイスの実)や、がくがく不気味に揺れる写真フレーム、ぶるるっと震えるボタンなど、楽しい動きがたくさん。
普段のサイトだと、使うのにちょっと躊躇してしまうような動きも、このようなイベントサイトだと賑やかな演出にとてもいいですね。

サンリオのハロウィーンパーティスペシャルサイト


07_01

http://www.sanrio.co.jp/special/halloween/2016/

サンリオキャラクターたちが仮装でお出迎え。アメリカンコミック調の雰囲気が可愛らしいです。
ちなみに10/25にサイトを訪れたら「クロミちゃん」のサイトジャックのイベント開催中でした。ハロウィン当日まで、こういったお楽しみがあるのがいいですね。

ハロウィンフェスタ2016|Yahoo ショッピング


05

http://topics.shopping.yahoo.co.jp/special/halloween/

ところどころにパララックススクロールを適用し、立体的な演出がされています。にゅっと覗いてるようなリアルなモチーフは、ちょっとホラー…。
仮装をまとったメインビジュアルのお二人の、ビフォーアフターがまた楽しいです。

HALLOWEEN TOKYO|東京ブランド公式サイト


15

https://andtokyo.jp/halloween/

ジャック・オー・ランタン柄のゴミ袋を片手に行われる、東京のクリーンイベント。去年はきゃりーぱみゅぱみゅさんが広告塔となって開催されていました。
黒とオレンジのハロウィンカラーを基調としたシンプルなデザインで、ジャックのアイコンが可愛らしいアクセントになっています。

コメダでフォトコン|珈琲所コメダ珈琲店


09

http://www.komeda.co.jp/halloween/

こちらは、TwitterまたはInstagramのハッシュタグで参加するフォトコンテスト。
コメダ珈琲のロゴでおなじみのキャラクターも、ハロウィン仕様…!なんだかとてもしっくりきています。よくみるキャラクターの別の顔に出会えるのも、ハロウィンイベントの楽しみのひとつかもしれませんね。

KAKIで今夜はPARTY|JAグループ和歌山


14

http://kakine-chan.com/halloween/

かぼちゃではなく、あえて「柿」をテーマにしているのが、インパクト抜群です。(確かに大きさやお値段を考えると、手軽でいいのかも…?)
和歌山のキャラクターと、「DJみそしるとMCごはん」さんの織りなす、ゆる〜い雰囲気のハロウィンサイト。柿のパーティーレシピや「KAKI知識」なる柿情報を、これまたゆる〜く紹介されています。

モンシェールのハロウィン Happy Halloween  2016


03

http://www.mon-cher.com/halloween2016/

堂島ロールでおなじみ、モンシェールのハロウィン特設サイト。暗いオレンジのグラデーションがとても上品で、しっとりと大人向けなハロウィンです。
ギザギザのラインや手書きの英字を取り入れた、ハロウィンらしい遊び心も。

サッポロ 男梅サワー妖怪カメラ|サッポロビール


08

http://otokoume-youkaicamera.com/

こちらは浮世絵と妖怪をモチーフにした、和製ハロウィン。
写真をアップロードすると、般若や化け猫などの妖怪に変身できるというコンテンツです。変身後の写真はマウスに合わせてグリグリ動くので、ちょっと人に見せたくなるかもしれません。

2016 マルイのハロウィン|マルイ


01
http://www.mon-cher.com/halloween2016/

ファッションモールマルイの、イベント情報特設サイト。
暗めの配色にもかかわらず、絵本のようなタッチのイラストで、どこか暖かな印象のデザインです。

 

終わりに


いかがでしたでしょうか。

このほかにも、AGN Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。

00

Web Site Clips
http://agn-websiteclips.tumblr.com/


よかったら、のぞいてみてくださいね!


一発で全天球写真が撮れるカメラのまとめ2016年10月版

ワンショットで180°ないしは360°の全天球写真を撮影できるカメラがだんだん増えてきました。
カメラ一台でその場の雰囲気をまるっと撮影できるカメラは人気も上々で新製品も増えつつあります。
一般的に魚眼レンズとセンサーを2個セットでパッケージした製品が多いです。
現在(2016年10月)、市販されていて入手しやすい全天球カメラをまとめてみました。

★リコーシータ
このジャンルの開拓者です。弊社でも使っています。(旧モデルm15)
最近はバリエーションも増えてきました。扱いやすさが魅力です。
現在はスタンダードのSCと高画質モデルのSに分かれています。
スマホからwifi接続し撮影できるので、WEB掲載用には使いやすいです。
(スマホ片手に離れた所に隠れて撮影します。)

THETA SC / THETA S

Ricoh Theta

メーカーサイト
https://theta360.com/ja/

★ニコン
10月末発売のできたて新製品です。後発だけあって使い勝手良さそうです。
GoPro的なアクションカメラのカテゴリ製品ですね。

KeyMission 360

Nikon KeyMission 360

メーカーサイト
http://www.nikon-image.com/products/action/lineup/360/

★コダック
結構前からでていますね。業務用に近い雰囲気があります。
1台で半天球、2台で全天球とちょっと特殊な運用になります。

PIXPRO SP360 4K / PIXPRO SP360

kodak PIXPRO SP360 4K

メーカーサイト
https://kodakpixpro.com/AsiaOceania/jp/cameras/actioncam/sp3604k/

★サムスン
某目玉のおやじ的な独特な球状カメラです。4K相当の高画質。
galaxyのオプション的な扱い。一時期積極的にCMもやってましたね。
スマホ+カメラ+VRゴーグルで、手軽にVRコンテンツを作成して楽しめます。
galaxyがなくても単体で撮影できます。

galaxy gear 360

サムスン Galaxy Gear 360

メーカーサイト
http://www.samsung.com/jp/consumer/mobilephone/gear/gear/SM-C200NZWAXJP

★Insta360
iPhonelightning端子で接続する専用の全天球カメラ。わりと安価です。
スマホ連携タイプはなに気に撮影時スマホと接続させるのが面倒なので、直結式はiphone単体で完結できるので便利そうですね。

nano 360°

ハコスコ  Insta 360

国内販売サイト
http://hacosco.com/insta360/




他にも、GoPro複数台で同時撮影して全天球撮影を行うソリューションとかありますが、お値段もそれなりになるので、業務ならともかく一般にはあまり関係ないですね。
現在GoProクローンのような中国製アクションカメラがたくさん出回ってきているので、今後全天球カメラにもその流れが来そうな気がします。

利用について
実際WEBサイトでの利用方法はまだ過渡期で、これといったやり方が定まっていない感じです。しかし、将来的にVRとWEBが融合すると、活用の場は一気に広がると思います。
SNSに関してはYoutubeがVR動画に対応したことで、お手軽に配信できるようになりました。
Facebookも傘下にVRシステムのOculusを持っていることもあって動画を含めた全天球コンテンツをそのまま投稿出来るようになっています。

全天球写真は長らく個人の楽しみ的な使われ方をしてきましたが、今後のVRの隆盛に大きく影響を受けそうです。
先日PSVRも出ましたし、どうなるか楽しみなジャンルです。




弊社でも全天球画像を組み込んだサイトを制作しています。よろしければどうぞ。
建築物の内部を見せるのにいいツールだと思います。

新潟浴場組合(各銭湯の浴場内を全天球写真で紹介しています。)
http://niigata268.com/
新潟浴場組合


コンタクトフォーム7で画像などファイルを送る。(添付ファイルの送信)

みんな大好きContact Form 7です。(3回目)

agnblog_20161015_02

前回はファイルの受信でしたが、逆にフォームから問い合わせてきた人に確認メールと合わせて、添付ファイルを送りたいケースもありますよね。
例えば資料請求フォームで、請求と同時にPDFファイルを自動的に送るとか。需要はあると思います。

そこでContact Form 7です。(いつもお世話になっております。)
受信だけでなく、サーバー上のファイルを添付しての送信も最初から対応しています。

受信メール設定場所
コンタクトフォームの編集→「該当のフォーム」→「メール」のタブagnblog_20161015_01 「ファイル添付」の欄に添付ファイルの場所を書きます。


[wp-contents]フォルダから下のパスを記載するか、サーバーのフルパス(絶対パス)で記載します。(httpからURLを書いてもダメです。)
フルパスがわかればサイト内の何処に置いてあるファイルでも構いません。よくわからなければ、WordPressダッシュボードのメディアでアップするのがいいでしょう。

先方の受け取り環境のこともあるので、あまり大きなファイルを添付しないようにしましょう。最大でも5MBぐらいが現実的ではないでしょうか?
フォームの作成時にその旨を記載しておくのが親切ですね。


コンタクトフォーム7で画像を送って貰う。(ファイル添付)

みんな大好きContact form 7の記事です。
(いつも使わせて頂いております。ありがとうございます。)

サイトに問合せフォームを付けたときに、画像などファイルを受け取りたいことが、あると思います。先日クライアントの工務店さんから「見積を出すのに、フォームから現場の写真を送ってもらえるようにしたいんだよね。」 などとのご要望がありまして、WordPressのフォームによる添付ファイルの送信について調べてみました。

Contact Form 7には初めから、画像を含む各種ファイル添付用のタグが用意されていますので、簡単に付けられます。まずフォームの設定(フォームタブ)画面です。

agnblog_20161014_02

ここで添付ファイルの種類とサイズに制限をかけられます。
詳しくはオフィシャルサイトで
http://contactform7.com/ja/file-uploading-and-attachment/
(…この記事不要です…)

次に受け取り設定(メールタブ)の画面です。
agnblog_20161014_03 ファイル添付のエリアにタグを書き込みます。
あとはフォームを固定ページに貼って送って貰うだけ!
agnblog_20161014_01

 受信すると、指定のアドレスにメール添付の形で画像が届きます。

注意点としては、添付ファイルは一時的にサーバーにアップロードされますが、フォルダの属性(パーミッション)などで書き込み禁止になっていると添付に失敗します。立ち上げたばかりで設定中のWordPressにありがちなミスです。


スマホの場合
・レスポンシブを意識してテーマを選んで作ればスマホ対応です。
・スマホだと画像選択時にカメラを選び、その場で撮影→添付の流れが実現できます。
(画像はandroidですが、iOSでも大丈夫。)

agnblog_20161014_04

業務によっては、画像のやり取りができると大幅に省力化に繋がることもあると思います。上手く活用したいですね♪



まずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン

自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。
思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。
これ、だいたい間違いなく挫折します。
せっかくその気になったのですから、Webって楽しいを体験してほしいのです。
ですので、今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。
対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。

今回は前置きが長いので、面倒な人はこちらから。

もしくはデモをどうぞ。

【DEMO】


挫折のわけ


何せHTMLをたくさん掲載してある本はとても分厚いです。
Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。
そしてHTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。
今度はCSS辞典を買ってくるのでしょうか?
CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。
見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。
簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。
覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。

お手軽に作ってみよう


CSSフレームワーク


グリットシステムというものがWeb界を席巻してもうかなり経ちます。
また今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。
CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS(場合によってはJavascriptやフォントも)をあらかじめワンセットにしてあるものです。
BootstrapやFoundationなどといったところが世界的にもとても有名です。
スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。
CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。
ですから、CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。

bootstrap_ss foundation_ss

CSSフレームワークは多くの人を助けてくれました。
CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。
今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。
(※自分の勉強がてら)
Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。

CDNを利用する


CSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery(Javascriptのライブラリ)のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。
WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか?(厳密には違うと思う)
GoogleやMicrosoftが公開しているCDNもあります。jsDelivrcdnjsといったところもメジャーです。
先ほど名前を挙げたBootstrapもCDNで利用できます。
使いたいプラグインやフレームワークの名前+「CDN」で検索すれば、たくさんのものが見つかるでしょう。

今回利用したもの


フレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。
jQueryを利用したスライダーを入れたいので、jQuery本体(これがないと動きませんよ?)とslickというプラグインを利用します。
Slickはjsdelivrからです。
アイコンもWebサイトを作る上でとても重要な要素です。
アイコン画像をいちいち用意するのは大変なので、Font Awesomeというアイコンフォントを利用しましょう。

せっかく外部ファイルを利用するので、フォントもGoolge Fontsを利用してみましょうか。

 

Webページを作ろう


上に挙げたものをhead内に読み込みます。



今回のページの内容


あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。
はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。
それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。
せっかくですからマップも入れましょう。
SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。
よくある感じですね。

あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。
ここではBulumaの使い方の説明ではないので細かい事は説明しません。
ドキュメントを見ながらレイアウトを作っていきます。
カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。

手なりでつくってこんな感じです。

【DEMO】


ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。
HTMLの他にCSSとjQueryをちょっとだけ書きました。



Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。



jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。
スムーススクロールは絶対に必要なものではありません。

CDNやCSSフレームワークのデメリット


こんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。
ただし、実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。
メリットがあるのと同様デメリットもあるからです。

CDNのデメリット


まず第一に他の人のサーバとソースを利用しているということでしょう。
これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。
意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。
また、他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。(※1)

※1 ただし、CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。

CSSフレームワークのデメリット


これはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。
フレームワークの機能で利用していないものがたくさんあります。
ある程度知識があれば、フレームワークなどを使わなくても再現できます。
利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。
少しでも、コンマ何秒でも速く、ということを考えると大幅に無駄です。

また、ちょっとだけ専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2
不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。

※2 多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。

なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。
ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。
それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。

というわけで、DEMOの左上に「add CSS」というボタンを用意しました。
HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。
ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。
どうでしょうか?ちょっとは違うサイトに見えますか?

まとめ


このようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。
そのために我々のようなWeb制作者もいるわけですし。
ですが、まずは作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。
自分で作ったものがブラウザに表示されるって楽しいんですよ。

最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。

参考サイト