背景画像を下に落とす。昔のサイトをレスポンシブに対応させる時

blog170112
今更ですが新年明けましておめでとうございます。
本年もAGNチームブログをよろしくお願いいたします。

さて、今年1発目は軽い小ネタから。いきなり重いと胃もたれしちゃいますからね。
昔固定幅で作ったWebサイトをHTMLや画像はそのままにレスポンシブ化したいという案件で使った小技です。

【DEMO】


固定幅の頃


昔(おそらくスマートフォンの出たてかそれくらい)固定幅で作られたそのサイトは画像多めのサイトで、フロートを駆使してなおかつちょっとでもレンダリング速度を上げたいのでいける画像は背景にして利用していました。
ボックス全体がサイト幅で、そのうちコンテンツが50%、残り50%は画像に見えるけど実は背景、みたいなことをフロートを駆使しつつ作っていたわけです。
※だからフロートでつまづく人は大概背景が表示途中で切れちゃうことに大きな悩みを持っていたのです。Clearfixの歴史を振り返ればみんながフロートとどのように戦ってきたかわかるかもしれません。

そのサイトは単純な角版の画像がほとんどなくて、複数の画像を斜めに組み合わせてみたり、ちょっと凝った画像が多かったのです。
それでも制作された当時と違って、background-positionがより使いやすくなったり(オフセット記法が可能になった)、bacground-sizeが使えるようになったりしているので、その辺を使ってなんとかレイアウトしていこう、という感じでした。
※全面に背景を引きたくてbacground-size : cover;が使えなかった頃はJavaScriptで実装したりしてたんですよ。そう、角丸を画像で組み立てていた頃に近いですね…

実際にやってみる


考え方はよくあるレスポンシブWebデザインの考え方でいきます。
メディアクエリで振り分けて、左側 (右側)にある背景画像をある幅以下の時はコンテンツの下(上)にレイアウトしましょう、というやり方です。よくあるやつですね。

方法1:背景画像じゃなくて擬似要素で配置する。


background-imageでしていたものを擬似要素(::before、::after)のcontentで配置しようというわけです。
それで擬似要素をdisplay: block;にでもしておけば勝手に下に落とせますからね。
ただこのやり方だとうまくいかない場合があるのです。

contentプロパティで配置された画像はサイズの調整が難しいのです。
というのも、contentプロパティで配置された画像はサイズの指定ができないのです。
擬似要素にサイズ(width、height)を指定してもだめ。どんな時に困るかというと、もともとの画像が画面幅より大きかった時。
これ、画像が見切れます。
さて、困った。

この問題そのものに対する解はネット上でもよく見かけますが、contentプロパティで配置するのではなくて、擬似要素のサイズを指定してその背景が画像として使う、ということかもしれません。

方法2:背景画像でいく


今日触れたいのはこちら。
背景画像として使うけど、コンテンツと重なるのは嫌だ、というお客様のために。
方法としてはpaddingで領域を確保してそこに背景画像を100%で表示させます。

この方法のメリットはデバイス幅が変わっても比率を維持できる点です。

領域を確保する


領域を動的にpaddingを使って確保するためにpaddingを%で指定します。
この方法でわかっておかなくてはいけないのは画像の縦横の比率(サイズではなくて)です。
画像の縦横の比率のパーセンテージ分だけpadding-bottom(padding-top)を指定してあげます。

どういうことかと言いますと、
例えば画像サイズが800 × 600だったとします。
これをコンテンツの下に背景用の領域を確保するためにはpadding-bottomに
(600/800)*100%を指定してあげるのです。

これでなんでうまいこと領域が計算できているかというと、これはpaddingの特性を利用しているのです。

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box’s containing block.

パーセンテージは、 ‘padding-top’と ‘padding-bottom’の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。
マージンプロパティとは異なり、パディング値の値は負であってはなりません。マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。

https://www.w3.org/TR/CSS2/box.html#propdef-paddingより引用


大事なところは、
生成されたボックスの包含ブロックの幅に対して計算されます。
ここです。
計算は包含ブロック(ざっくりと親の要素)の高さから計算しているわけではないのです。
包含ブロックの幅を元に計算するので上の式でいけるんですね。
画像がもし親要素に対し幅100%だったとした時に、幅に対する高さの割合を求め、その分だけ親要素に余白(padding)を持たせることで、背景画像の領域が確保されたわけです。
これはマップや動画を100%で埋め込みたい、という時と同じ考え方ですね。

そんなに多様するわけではないけれど、まぁちょっとCSSのお勉強の小ネタ、ということで。

【DEMO】


蛇足ですが…


ちょっとハマったのが、iOSでbackground-size: cover;がうまくいかなかったことです。
これはbackground-attachment: fixed;と一緒に使っているとダメみたいです。
背景固定して全面画像みたいなことができないじゃないか…

ちなみにこれはbackground-sizeを100vhにすることでやりたかったことに近くなったので今回はOKにしました。
background-attachment: fixed;で背景固定して、background-size: auto 100vh;で。


【たくさんのタブをすっきり整理整頓!】Webブラウザ Vivaldiを使ってみてる

161227vivaldi00
 

常時立ち上げていたいチャットツールやメモツール。
進めている案件の関連サイト。
勉強用のWeb系ブログ。。。。

いろいろなWebサイトをみていると、いつのまにかブラウザのウィンドウやタブがデスクトップに散乱してしまう、sakaiです。。

複数立ち上げていると、探す手間がかかったり、他のタブに気を取られて作業が中断してしまったりとあまりいいことはありませんよね。

今回は、タブの整頓にとおすすめしてもらった「Vivaldi(ヴィヴァルディ)」というWebブラウザをご紹介します。

Vivaldi(ヴィヴァルディ)とは


 

161227vivaldi01

https://vivaldi.com

Vivaldi(ヴィヴァルディ)は、Vivaldi Technologiesによって開発されているウェブブラウザである。

Vivaldi Technologiesは、オペラ・ソフトウェアの創設者の一人でありCEOであったヨン・スティーブンソン・フォン・テッツナーによって設立された。”A new browser for our friends”(私たちの友人のための新しいブラウザ)をスローガンとしており、技術者、インターネットのヘビーユーザ、OperaのレンダリングエンジンがPrestoからBlinkへと変更されたことに伴い多くの機能が削除されてしまったことに不満を抱いているかつてのOperaユーザを主な対象としている。

(引用:Wikipedia)


以前のOperaの機能を世襲したブラウザなんですね〜。

Operaを一時期使用し使用レビューを書いたこともありましたが、残念ながらメインで使用することなく、結局Chromeに落ち着いてしまった経緯があるのですが、
また縁あってOpera由来のブラウザにお世話になる日がくるとは。。

ということで、期間にして2ヶ月ほど。Vivaldiをメインブラウザとして使ってみて、ぜひおすすめしたいところ、逆に残念に思ってしまったところをあげてみました。
少し長くなってしまったので、ご興味のあるところからどうぞ。

続きを読む 【たくさんのタブをすっきり整理整頓!】Webブラウザ Vivaldiを使ってみてる


テクニック不要!! レイヤー2枚で写真を仕上げる!!

どもっ。Kazです。
この時期から忘年会や新年会などで人と会う機会がいっそう増えてきますよね。
人が集まるとスマホやデジカメで写真を撮ってデータを渡す機会も多いかと思います。

撮影した写真を後になってチェックしてみると
暗かったり、悪くはないけど今ひとつだったりする写真が多くないですか?

そんな写真を約レイヤー2枚で「いい感じ」に仕上げる方法を紹介します。
この方法なら多くの写真を割と早く仕上げる事も可能です!!

では、いってみましょう!!

【修正前画像】
kaz_161220_1
開いた直後です。ちょっと暗めですよねー
※今回の方法では、RGBのデータで行ってください。

【レイヤー1 スクリーン!!】
kaz_161220_2
背景レイヤーをコピー&ペーストなどで背景のコピーを作って描画モードを「スクリーン」にします。
だいぶ前に書いた事がありますが、写真を明るくします。
まだ暗いと感じる場合は、明るく感じるまでレイヤーをスクリーンで重ねていきましょう。
ただ、この「スクリーン」で重ねていくと明るくなる反面、色が薄くなっていきます。
暗い写真を明るくした場合も彩度が低い状態になります。
そこで、もう一枚背景レイヤーを使います。

【レイヤー2 オーバーレイ】
kaz_161220_3
先程「もう一枚」追加したレイヤーの描画モードを「オーバーレイ」にします。
すると、黒くなるほど一気に色が濃くなり明るい所は「まっ白」く飛ぶと思います。
なので、不透明度を一旦「0%」にして徐々に上げていきます。
そうすると、薄くなっていた色がシッカリとした色になってきます。
もし、この時点で明るい部分が飛び過ぎている場合は「スクリーン」レイヤを不透明度で薄くするか
複数枚「スクリーン」レイヤーがある場合は削除するか非表示にして加減してください。

この方法で調整を行うと、トーンカーブでの調整やレベルの調整・色相彩度の調整なんかもテクニックや知識不要でできちゃいますので
アクションで各描画モードのレイヤーを作ってしまえば悩むことなく調整ができます。
最近のデジカメは色のバランスは取れていますので、色のバランス調整は必要ないことが多かと思いますが
必要な場合は、今回の調整を行って画像を統合してから「自動カラー補正」を行っても良いかと思います。

早速、手持ちの写真で試してみてください!!


CPIサーバーでマルチドメインの設定

KDDIグループのホスティングサービス、CPIサーバー(共用サーバー)を使っています。追加料金無しにマルチドメインが使えるので、同業者様には利用されているところも多いかと思います。このCPIのマルチドメイン追加が他社と比べてちょっとわかりにくいというか、毎回やり方を忘れるので、控えとして書いておきます。なお以下はドメインは他社で取得済みの場合です。(お名前.comとか)

契約時のアカウントでマイページにログインします。
cpi_md01

ご契約一覧から主契約の詳細ボタンをクリック
cpi_md02

「マルチドメイン追加」のリンクをクリック
cpi_md03

「マルチドメインお申込み」の画面になります。
フローに沿って進めます。
他社でドメインを取得済みの場合は、下段を選びます。
「次の画面へ進む」
cpi_md04

「お申込み内容の入力」
追加したい取得済みドメインを入力します。
DNSをCPIの物を使う場合そのままです。
メールサーバーをCPIで使うならそのままです。
「次の画面へ進む」
cpi_md05

「オプション一覧」
オプションを選択します。SSLを使うときはここで選択しておきます。
※後から追加もできます。
「次の画面へ進む」
cpi_md06

費用の確認
必要な費用の確認です。マルチドメインの追加は無料なので、オプションを付けてなければ0円です。
あとは、「確認する」を経て、申し込みを完了します。
cpi_md07

その後、CPIより設定完了のメールが届きます。
この段階でFTPは利用可能です。
メールにネームサーバーのURLが書いてあるので、ドメイン側の管理画面で設定します。
お名前.comはドメイン設定からネームサーバーの変更を選択します。
cpi_md08

ネームサーバーのURLを入れます。
cpi_md09

暫く放置

設定ドメインにアクセスして、サイトが表示されれば完了です。

他社と比べた感想として、コントロールパネルでの追加では無く、0円で新規アカウントを追加するイメージです。
ドメイン毎に専用のコントロールパネル(ユーザーポータル)のアカウントが発行されます。

こうやって書き出してしまうと、難しい所も無く、なんてことはありません。
他社ドメインとの組合せでは設定が反映されるまで、多少時間が掛かりますので(一晩とか)、時間的余裕を持って設定した方がいいですね。


CSSだけでレスポンシブなタイムラインを作る

teamblog_title161214
先日制作した案件で、タイムライン(過去→未来)があったんですね。
こういうのです。

timeline161214
デザインがイラレで来ていて、さてどうしましょうか、と。
もちろん画像でもOKなんですが、横長をタイムラインをスマホで見たら小さくて見えない。
かといって縦長の画像は作りたくない。※それなりに数があったので。
それじゃCSSだけで実装しましょ、とういうことになりました。

【DEMO】

やってみよう


条件


  • 広い画面では横型、狭くなったら縦型にする
  • 項目数は変動する
  • ポイントごとに目印をつける

もちろん、まず一直線を引いて、その上に絶対配置でポイントを打つのもアリだと思います。
今回は基本形を元にちょっといろいろしてみました。
けどあんまりうまくいかなかった。。。
ついでにCSSがいろいろ汚染しまくって悪い見本みたいになってます。
お目汚しですが、よかったらどうぞ。。。

基本形


HTML


SASS


やってること


そんなに難しいことはしてません。
displayを切り替えて、ボーダー引く場所を変えているだけです。
狭い画面では縦型なのでdisplay: block;でいいですね。ボーダーは左に引きました。
横型の場合は、親要素をtableに、子要素をtable-cellにしてみました。(※flexでもうまくいくかもしれません。)
それから親要素にtablelayout: fixed;を指定して均等に割ります。
文字や時間の長さに長短がある場合は子要素のwidthをパーセントで指定してあげればOKです。

目印は子要素の擬似要素で。
基本的には左上に絶対配置して、自分の大きさ分だけ移動(transform: translateX(-50%) translateY(-50%);)します。
最後の子要素だけは矢印っぽくしたいので、三角にしました。これは縦横で向きを変えてあげてくださいね。
現在地は専用のクラスを振って文字色を変えました。

【DEMO】にのっけた他のやつのコードも一応載せときますね。
本当は背景を矢印っぽくするところまで行きたかったんですけど、パッと思いつかなかったので、とりあえず今回はここまで。
年末進行でお忙しいと思いますが、みなさんお体に気をつけて頑張っていきましょう!

HTML


SASS


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キーが必須になってたのね…