STAFFBLOG スタッフブログ

firefox を最新版 ( ver.50 ) にアップデート後、Bookmark Favicon Changer で設定したブックマークレットのアイコン(ファビコン)が初期化された!

fujie
2016/11/17
閲覧所要時間:約12

firefox-50
「Firefox 50」が安定版に。拡張機能のパフォーマンス改善や脆弱性の修正が行われる
http://forest.watch.impress.co.jp/docs/news/1030197.html

「Firefox 50」正式版がリリース、キーボードショートカットの更新やページ内検索機能を強化
http://gigazine.net/news/20161116-firefox-50/


firefox がとうとう バージョン「50」 になりました!
いろいろ強化・修正されたみたいで、

特に、

・border-radiusを用いて作成された角丸の点線と破線の描画に関する不具合を修正しました
という修正が入り、個人的に非常に高まっております!


border-radius とは角丸を表現する CSS で、
最近の Web サイトでは使わない方が珍しいくらい多用しているプロパティの一つです。

丸くした箇所に沿って線を引いたりなども多用しますが、たまにその線を点線や破線にすることもあります。
しかし角丸指定と点線や破線を同時に使うと、直線になってしまうというバグが firefox ではずーっと残っていて ( 2007年ごろから ) デザインを再現するには画像などで対応するしかなく、大変だったのですが、今回の新しいバージョンでは指定した通りになるようになった!ということです。
border-radius: 50%; などという円になる表現で点線や破線を指定した際が特にクリティカルなバグで、すべて直線になってしまいデザインを再現しにくいのが悩みでしたが、新しいバージョンが世の中に浸透していけばもっと楽しく・簡単に実装ができそうです!


今までの firefox の場合、これらは同じ直線でした…。
firefox-50-border-before-01
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
firefox-50-border-before-02
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
firefox-50-border-before-03
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定
しかし バージョン「50」 になったこれからの firefox の場合、ただしく描画されます!
firefox-50-border-after-01
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
firefox-50-border-after-02
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
firefox-50-border-after-03
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定




以上、嬉しい前置きでした。


本題(私のブックマークレット環境について)

さて、私はコーディング作業や確認作業、調べ物など、ブックマークレットを多用しており、これが無いと仕事に支障がでます…。

常時、ブラウザの右上に設置しており、ワンクリックで即座に動作させるようにしております。
( https 化してある Web サイト上で、たまに動作しないのが辛いところ…。 )

firefox-50-bookmarklet 右上はこんな感じに。

テキスト(ブックマークの名前)を空にし、アイコンのみにすることで、限られたブラウザのスペースを節約しております!

  • をクリックするとポップアップを表示し、日本語を入力すると Google 翻訳で英語に。
  • をクリックするとポップアップを表示し、英語を入力すると Google 翻訳で日本語に。
といった使い方をしています。




ただしこれはアイコンがあるから、簡単に見分けがつくわけで…
アイコンが無いと、下記の様な感じになります。

firefox-50-bookmarklet-noicon
これは大変ですね。
というわけで、アイコンを設定できるアドオンが存在します。

Bookmark Favicon Changer
https://sites.google.com/site/sonthakit/bookmarkfaviconchanger


こちらを使うと右クリックからのコンテキストメニューで、アイコンを簡単に変更したり保存したりができます。
バージョン「50」より以前まではこちらでまったく問題ありませんでした。

バージョンアップ直後は問題なかったのですが、「追加のツールと機能」のカスタマイズを行うと、アイコンが初期化されてしまい、以後変更ができなくなってしまいました。

いろいろ検証した結果、
  • http や https から始まる URL には今まで通り問題ない
  • javascript: から始まる URL には適用されない
ということがわかりました。

そこでハック的な考えで、
一度別の URL に変えてアイコンを設定し、また URL を戻すと上手くいくのでは…?
ということで実践しましたが、適用直後は想像通り上手くいきました。

が、やはり「追加のツールと機能」のカスタマイズを行うと、初期化されてしまい、無駄な作業の連続でした…。



解決策は…ユーザースタイルシート !


かなり右往左往しましたが、ユーザースタイルシート というのを思い出し、
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/

こちらのユーザースタイルシートを管理できるアドオンを導入し、なんとかならないか挑戦しました。

実はユーザースタイルシートは Web サイトの調整だけでなく、ブラウザの外観も操作することができるのです!
ユーザースタイルシート自体は Google Chrome にも存在します。


DOM Inspector
https://addons.mozilla.org/ja/firefox/addon/dom-inspector-6622/

さらにこちらの DOM Inspector というアドオンで外観の要素 ( CSS を付与する箇所 ) を特定し、いざアイコン設定のスタイリングです。



要素の名前は「toolbarbutton」

toolbarbutton という要素 ( タグ ) にスタイルを付与していきます。

( ※未確認事項 ) 私の場合はブックマークツールバーという枠に、各ブックマークレットを収めているため、もしかしたらいくつか違いがあるかもしれません。

下準備として、名前を空にしていたブックマークレット達に、「bookmarklet_〇〇」といった形式で名前を付けてあげます。
〇〇は任意です。 先ほどの Google 翻訳だったら bookmarklet_google-translate-ja-to-en などの様に。
こうすることで追加したスタイルが toolbarbutton 全域に適用されるのを防ぐ書き方がをすることができます。

/* HTML */
<toolbarbutton label="bookmarklet_〇〇"></toolbarbutton>

/* CSS */
toolbarbutton[label^="bookmarklet_"] {
  background: no-repeat center center !important;
  background-size: 16px 16px !important;
  cursor: pointer;
  font-size: 0;
  overflow: hidden;
  text-indent: 100%;
  transition: background-color .175s, background-size .175s;
  white-space: nowrap;
}
toolbarbutton[label^="bookmarklet_"]:hover {;
  background-color: #fff !important;
  background-size: 13px 13px !important;
}
toolbarbutton[label^="bookmarklet_"] .toolbarbutton-icon {
  visibility: hidden;
}


この CSS で、toolbarbutton の label ( 名前 ) 属性の値の先頭に bookmarklet_ を含んでいる要素だけにスタイルを付与することができます。
background にはデフォルトのスタイルがいくつか入っていて綺麗に打ち消すのが手間なので !important で強制してあげます。

目指すのはアイコンのみの省スペースかつ分かりやすい表示で、テキスト ( 名前 ) は不要なので、テキストを消す処理も忘れずに入れます。
また、デフォルトのアイコンが toolbarbutton-icon というクラス名で子要素に存在するので、こちらも邪魔になるので非表示にします。

その際に display: none; に使用して要素を消してしまうと、画像の高さを横幅が失われて、幅が小さくなってしまうので、非表示専用のプロパティ「visibility」を活用します。

ここまでをベースとして、各々にアイコンを設定していきます。

アイコンは base64 形式にすると、画像としてどこかにアップロードする手間が不要でおすすめです。
変換には様々な手段がありますが、
画像をbase64エンコードするツール
https://syncer.jp/base64-encoder

こちらの Web サービスが動作も良く、気の利いたコピー機能を提供してくださるのでおすすめです!


最後に、やっとやりたかったアイコンの設定です。

/* Google 翻訳にて、日本語を英語に */
toolbarbutton[label="bookmarklet_google-translate-ja-to-en"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABcElEQVQ4jZ2SMWtUURCFn6ygiYmViorCIgtbLNy9c757eTzX4qUI5A/cJlXAEFIIFomgkiZNLFLkB6RYsNBCe8FWsBEEbS1EQhCSQCqxsLG5C9vE9+LAaQbOx5yZKbz3XeAX8AP4nnUs6Uld1xeLpvLedyW97ff785OepJWzAFVVzQALzrkb/wUAZs3sqZltDwaDuaIpAvB1qj/RUfY8O/cEdV1fNrMtSbvOuSsTwCdgPRtXgP2zAKPRaB5YjjHenGS6BbwCVqcAL4DllFKn8QoppU5ZlleLorgwPWZVVTON5jblve+a2UNJj2KM98xsHdjx3ndb/QkwBj7kPX3OV/mW+9daTRFCqCUtAe/NbANYbR2hLMs7wGHWH+AE+ClprW2EB8Cb/HAH3vv7wKaZ7QCzbQBjSS9z9t/AqaTXwDjGeLcRMBwOTdJzSe8kreUn2wshLPZ6vUv/NJvZbUkfgd0QgqWUOmZ2HXgMfHHOlX8B3QSQeDjyLakAAAAASUVORK5CYII=' ) !important;
}

/* Google 翻訳にて、英語をに日本語 */
toolbarbutton[label="bookmarklet_google-translate-en-to-ja"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYElEQVQ4jb2Tv0ubYRDHX0ocCsVJsEiHDEqHhOTu+7m3ISLhAf8AF3ETbKfS2UIHh9LBoYV27vS21EXc3XQJdHFzcFHwJ+ggLu3SodDlTQkhRTPYg1uO5z58v8/dZSmliplVJX1y9/mIeAq8i4hlM6tmtwUwARTAoaRtYF/SMdAFilsBfaBXpZLvkt4Cc/96GxF1d39Zq9Ue9QqLwBVwCvwGroGLZrP5bBig1WqNS3ov6WOWUqoAq8CqmVWBS0DAlqSlRqPxRNIBcNyXZ8BP4ObvH0TEN+Bc0i/gCNgAina7/XBQgaRpSZ8jYiEDxty9A3yQtCvpOfAFWMvzfHaYhTzPH5uZAWOZJIAd4E05tgdmNgOsA2fuPnXnSdxblJ5XBrNer0/eFbAiaTMiXvSaga67d0YBvE4pVXo1oBgJ4O7rkqbNrFruy9aoCvaAr+XdFMDh/7Ug6QY46VvnH+7e+QMGaIYRE1OajgAAAABJRU5ErkJggg==' ) !important;
}


base64 形式に変換したアイコンを background-image で背景画像として設定します。
これで完成です!。



期待の効果は!?とまとめ

さて、今回の難関であった、アイコン初期化されないように維持できるかですが…。
「追加のツールと機能」のカスタマイズを開いたり、動かしたりしても全く問題ありませんでした!嬉しい!


実はバージョン「50」以前の Bookmark Favicon Changer を使用時でも、稀に初期化されてしまう現象に遭遇しており、何度か設定しなおしたことがありました。
その度にクリックでアイコンをひとつひとつ登録していく操作が面倒くさいと思っていたのですが、今回の件でまとめて解決したので、悩まされましたが最終的に満足いく結果になりました。よかったです。



firefox-50-bookmarklet-cmpletion 最後に私の右上の完成はこんな感じです。なぜか最近恒例の GIF。
無駄に、 transition ( 変形を滑らかにするプロパティ ) をつけて楽しめるようにしました!



以上です。みなさんも、よき firefox & ブックマークレット ライフを!!



ちょっと古くなりましたが、過去に紹介したアドオンとブックマークレットの記事

スタッフブログを AMP 対応しました!

fujie
2016/08/30
閲覧所要時間:約6

amp-thumb ※画像のカルーセルスライダーはこんな感じになればいいな…というパロディイメージです。

AMP ( アンプ ) 対応になったスタッフブログからこんにちは。
アンプと読むらしいです。読み方は知っていてもエーエムピーと読む癖がついているので、いきなりアンプが~と言われてもまったく認識できませんでした。

対応方法や情報だけは前々から仕入れていましたが、個人的に盛り上がってない感やニュースサイトだけでいいのではと思っておりましたが、

スマホ対応が不要になる!? Google、通常のモバイル検索結果でスマホ向けページの代わりにAMPページを表示する実験を開始
https://www.suzukikenichi.com/blog/google-starts-experiment-to-replace-mobile-friendly-pages-with-amp-pages/

などを読むうちに急にやる気になり、重い腰をあげました。

WordPress を利用しているので、便利なプラグインにてささっと対応もできますが、( 現段階のプラグインだと、AMP の厳しい制限によりエラーがかなり多くなるようですが… ) より深く理解したかったので、オリジナルテンプレートで対応することにしました!

ということで実際作業した感想のレポートです。
※詳しい対応方法は解説記事を探すと大量に見つかるので省きます。

対応方法にて大変お世話になった参考サイト



URL はどうするか?

AMP 化の URL は自由に決めることができます。

使用できるタグや属性などが厳しく制限されているなか、URL は特に定まっていないのに衝撃を少し覚えました。

既に AMP 対応なされているメディアのブログ、個人のブログなどを参考に URL の末尾に ?amp を付与すると AMP 対応のテンプレートを見るように設定しました。

この記事の実際の AMP ページは下記のとおりです。
スタッフブログを AMP 対応にしました! ( AMP )
https://www.fvs-net.co.jp/blog/11607?amp




どういうデザインにするか?

制限されているタグや属性の中で表現できる範囲内に関しては、デザインは自由なので、こちらもすでに AMP 対応なされているところを参考にしました。

いくつか見ていくうちに共通点がありました。

  • スマホ対応にてよくつかわれるハンバーガメニュー ( ドロワー ) などは無し
  • 記事のみに集中 ( サイドバーなどは排除 )
  • 前後記事や似た記事などはあったりなかったり
  • オリジナルテンプレートで対応している場合は、レスポンシブウェブデザインとかなり近い形で表現が可能
以上のことを踏まえ、レスポンシブウェブデザインの時に書いた CSS をもとに、ハンバーガーメニューやサイドバーを排除したテンプレートを用意し、細かい調整を行いました。



HTMLタグを AMP 用に置き換えるときに苦労したこと

画像 ( img ) や フレーム ( iframe ) などは、それぞれ対応したタグに置き換えなければならないので、テンプレート上にて処理を記述します。
何度も繰り返しになりますが、タグの制限などが厳しいため、間違いがあると、デベロッパーモードにて、すぐにエラーが出てしまいます。
URL の末尾に #development=1 を付与するとエラーチェックができます。

WordPress なので、 PHP の正規表現を駆使していくことになりますが、
iframe というタグだけても
  • 普通の iframe を amp-iframe へ置き換え
  • WordPress の記事埋め込みカード機能の iframe も amp-iframe へ置き換え
  • YouTube の埋め込み iframe は amp-youtube へ置き換え
といろいろあり、正規表現が苦手なので、分岐に苦労させられました。

正規表現作るときはいつもこちらのリファレンスとにらめっこ…。
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php




最初のインデックスまでに1日!

AMP 対応ページは元の記事にメタタグにて指定を行うので、即時に公開できるのですが、サイトマップや Fetch as Google を行ったとしても、Search Console の Accelerated Mobile Pages にてインデックスされるまでに1日かかりました。



検索結果に雷マーク!

また、インデックスされたとしても、話題性がない普通のブログ記事は、トップニュースには載らないようです。
今日だったら台風とか天気に関することを書いて、アクセスが伸びれば載るのかな?という感じだと思います。

でもでも、ちゃんとインデックスされれば、下記のように検索結果に雷マークが付与されます。
名称未設定-1 いい感じ!

また余談ですが、スマホ対応のラベルは撤回されました。
( ラベルがなくなっただけでランキングシグナルからは外れてません )
こちらが参考になると思います。
「スマホ対応」ラベルをGoogleが廃止!?モバイル検索結果から削除される・・・
https://www.peko.co.jp/seo/smartphone/sumaho-corresponding-label-google-abolition



エラーへの対処とまとめ

弊社の今までのブログ記事は、648件です。

毎日20件前後 AMP 対応ページがインデックスされ、
その中で1・2件ほどエラーが上がってきている ( PHP の置き換え漏れ、カバーできない範囲 ) のが現状です。

とりあえずの AMP 化対応はプラグインを使えばすぐに終わり、オリジナルなら半日か1日で終わるけど、その後の対応でエラーへの対処を図っていく必要があり、さらに今後の記事への品質管理も考えなければ ( AMP を意識した記事の書き方のマニュアルの整備など )、検索エンジンに対してよい評価がもらえないと思うので、今回の AMP 対応を通して仕組みづくりが大切で、大変なことだと学ぶことができました。

また、取り掛かり前と後では正規表現に関する知識もより一層蓄えることができたので、総じてプラスになったと感じております。

以上です。



過去の対応 or 導入しましたの記事

ChatWork を導入しました!!

fujie
2016/05/10
閲覧所要時間:約3

blog-10241
平成28年熊本地震からもうすぐ1カ月になりますが、
まだまだ余震が油断なりませんね_(┐「ε:)_

弊社の平成28年熊本地震関連のブログ
熊本のシンボル、熊本城がかなり被害が大きいのが、
県民へのメンタルが非常に心配されるところです。
中では 細い石の柱だけで、保っているところ もあって、びっくりしました。

未明の本震時には自宅で寝ておりましたが、ビクッと跳ね起きました。
40分程停電があり、大変恐ろしゅうございました。

さて、弊社では業務・日々のコミュニケーションを円滑にするために、
ChatWork を活用しています(導入から半年あまり程)

最初は社内公認のコミュニケーションツールではなかったのですが、
スタッフ間の草の根レベルでドンドン広がっていきました。やったねv(‘_’)v

自動で通知、したいよね?

なにごとも、自動で無料な ウェブ の世界。
ChatWork には API が備わっており、
チャットワークの機能を外部のプログラムから簡単に使用できるようになります!

弊社での活用例としては、
スタッフがブログを投稿時や、制作実績を追加時などに、
ChatWork に通知できると社員間に認知が広がって「いいのでは(?)」と思い、
WordPress の公開ボタンをトリガーに通知機能を盛り込みました。

ブログを書いた後にすぐスタッフにバレるので、
ドキドキしちゃうのがちょっと気になるところΣ(”)

また、サーバーの cron 機能を活用して、
ChatWork に定期投稿で弊社サービス MIERU への投稿漏れがないように投稿を促したり、
などなど、API 機能を大いに活用しております!

さらに使いやすく?アプリ、拡張機能!

5周年 を迎えられた ChatWork ですが、デスクトップ版アプリもリリースされています!
私は試したことないですが、Mac 版では、未読数バッジが付くためになかなか良いらしいです。

もちろん、Android・iOS アプリもリリースされており、
いつでもどこでも確認が可能です(‘_’)bグッ

また、デスクトップ版の Google Chrome にはユーザーが開発された、
拡張機能 Chat++
追加のエモーティコンは日本人にはなじめませんが…、コードがハイライトされる機能が気に入っており、オススメです!

災害時の連絡にも

熊本地震の時にも ChatWork を活用して、
安否確認や、会社・自宅の被害状況などの連絡行いました。

クラウドサービスなので、安定して連絡を取り合うことが可能でした。
履歴もきちんと残るので、過去の例を参考に対応力を強化していければと思います。

最後に

とはいえ、まだまだより良い使い勝手を模索中です!
社内向けにいろいろやりたいことはあるので、どんどこ開発していけたらと思います。(‘_’)ノシ

添付されたファイルが開けない!コピペしたら文字化けしちゃう!などの問題ごとを解決!

fujie
2015/09/04
閲覧所要時間:約3

pdf

朝と夜が冷えるようになってきました。秋です。

普段のお仕事の中で、
PDF や謎の dat ファイルなどに困ったことがあったのでメモをしていきます。

PDF の文字をコピペすると重複する、正しくコピーが出来ていない

PDF は閲覧するだけなら非常に便利で使い勝手が良い規格ですが、
Word から PDF に、 Excel から PDF に、画像から PDF に…などなど色々な形式から変換できるのも特徴ですね。

変換するときや保存するときに文字が化けてしまったり、
素直にコピーが出来ない場合が出てくるときがあります。

その場合、下記の様なツールを介するとうまくいく事があります!
(何故文字化けが起こるのかなどの説明は今回は割愛させていただきます。)


Google Chrome や Firefox などのブラウザで開いてみる

私が一番よくやる方法です。

特に Adobe Acrobat Reader で上手く行かない場合はこのブラウザで開くという方法で
コピペしたときの文字の重複を簡単に防ぐことが出来ます。


Excel または Word に変換してみる

ブラウザでダメだった場合に試してみる方法です。

Word は変換時に段落がガタガタしてしまう傾向がよくあるので、
Excel がオススメです。


Google ドキュメント で表示してみる

Excel または Word に変換する機能が無い場合は Google ドライブにアップロードし、
その際に Google ドキュメント で開いてみると上手く行く場合があります。

3つのやり方をご紹介しましたが、
どれも100%文字化けを防ぐことが保証することではありませんので、
最終的な再確認をされると良いと思います。


Google ドライブで Word や Excel などを変換

以前に頼まれた事があって 開けない Word や Excel を PDF などに変換することを良くやっていたのですが、
やはり一つ一つ対応していくとドンドン手間になっていきますので、 Google ドライブで変換できるのを紹介致しました。

手順としては、
  1. Google ドライブにファイルをアップロード
  2. Google ドライブ上で開く
  3. 上部のメニューに「ファイル」という項目があるので、その中の「形式を指定してダウンロード」をクリック
でお好みの形式に変換することが出来ます。


メールに謎の dat ファイルが添付されている!?

送信者は Excel や Word などを送信したつもりでも、
処理の都合上 dat という謎の形式になってしまうことがあります。

開けるようにするツールなどもあるかと思いますが、
一番簡単なのは、一度そのメールを Gmail に転送すると、
Gmail 側では正常なファイルをダウンロードすることが可能になります。


おわり

以上最近のお仕事で知ったことでした。
お役に立てれば幸いでございます。

自社サイトをレスポンシブウェブデザイン対応しました!

fujie
2015/06/01
閲覧所要時間:約5

gyazo-1
先々月…自社サイトをレスポンシブウェブデザイン対応致しました。
やったのは Googleが勧告していたスマホ対応による順位の変動(4/21)の直前の19日!

結局特に変わりませんでしたが…。

というのも一度はそのアップデートを適用したものの、
日本のサイトのスマホ対応率があまりにも低すぎるので取りやめたというお話を
この間開催されたWebパフォーマンスのセミナーでお伺いしました。

以下、今回やったことを振り返ってみようと思います。


まずは現状を知る

レスポンシブウェブデザイン対応をする前に、まずはその時の現状を確認しました。
  • 1年前にPCサイトをリニューアル
  • 画像はすべて通常サイズ
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
  • 横に長い画像が主要なページにいくつもある
  • ヘッダーが追従する
  • グローバルナビゲーションの中にプルダウンメニューがある
等という特徴があります。

また今回の取り決めとして、
求人案内とスタッフ紹介のページはまったくデザインが異なるので、
一度に行わないことにしました。(時間があればコソコソやります…)


現状を維持しつつ、レスポンシブ時の時の動作を決める

現状の仕様がざっくりと整理できたので、
ブラウザ幅を縮めていった時の動作を考えていきます。
  • 1年前にPCサイトをリニューアル
    → 既に形があるので、必然的にPCファースト(960px)
    → メディアクエリーでレスポンシブスタイルを制定
  • 画像はすべて通常サイズ
    → ロゴのみRetinaディスプレイに対応させる
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
    → PCでブラウザ幅を縮めていった時にはそのまま何もしない
  • 横に長い画像が主要なページにいくつもある
    → 画像は基本 max-width: 100%; で対応するが、横に長い画像は縦が細くなってしまうので、通常の画像と違うスタイルを制定する
  • ヘッダーが追従する
    → 追従をやめて、右上にハンバーガーアイコンを設置する
  • グローバルナビゲーションの中にプルダウンメニューがある
    → プルダウン動作をやめて、右上のハンバーガーメニュー内で展開されるようにする
という動作を決めました。
グローバルナビゲーションですが、ドロワーメニューとかハンバーガーメニューなどなど人によって言い方がまちまちですが、ここではハンバーガーメニューと言うことにします。


レスポンシブウェブデザインを作っていこう

それでは決めた仕様で作っていきます。

ブレイクポイントをどこにするか

PCサイトを 960px で構築しているため、
どこかの値でブレイクポイントを決める必要があります。

iPad縦持ちサイズからレスポンシブウェブデザインを適用したかったので、
768px を基本のブレイクポイントにしております。

これで、横持ちだとPCのデザイン、縦持ちだとレスポンシブウェブデザインが楽しめるので
私個人的には気に入っております。

(追記:2015年6月13日)
と思っていたのですが、
いろいろ思うところがあって 960px 未満からにすることにしました。


ロゴのみ Retinaディスプレイに対応させる

1倍画像


2倍画像


ロゴのみ高解像度ディスプレイでもぼやけないように2倍の画像を用意し、
高解像度ディスプレイにはそれ用のメディアクエリーで変更しています。

横に長い画像でも美しく

レスポンシブウェブデザインでは画像に対して何もスタイルを指定をしないと
ブラウザサイズからはみ出してしまいます。

そのために画像へ、

/* CSS */
img {
height: auto;
max-width: 100%;
}

というスタイルを一般的に指定します。

このスタイルによって下記のような横長い画像も、
ブラウザサイズの伸縮と合わせて可変するのですが、

こちらの画像だと縦が細長くなって見栄えがよろしくありません。

そこで

/* CSS */
.over-image {
overflow: hidden;
}
.over-image img {
margin-left: -25%;
max-width: 150%;
}

と、横幅の最大値を大きく取り、少しずらすことによって

この様に両端を若干隠すことになりますが、
全体のバランスを崩すことなくレイアウトが出来ました。

表示領域を確保するためにヘッダーの追従を無効に

私がついこの間までiPhone4ユーザーということもあってスマートフォンサイズにて領域を確保することに意識をおいて制作にあたりました。

しかし今は nexus6 を使用しておりかなり余裕があるので、
今後は追従などの手を加えてもいいのかなと思いました。

また上にスワイプするとヘッダーがスッと出てくるのも気になっているので、
そういうこともどんどんやっていけたらな…。

プルダウンメニューはハンバーガーメニューの中で展開させる

今回はプルダウンの中身が少ないので、隠さずに展開させた状態にしました。
メニューの数が多ければ、カテゴリーをクリック後表示非表示させるなどの手法も考えました。

そのあたりでとても参考になるのが、
トヨタ自動車さん
http://toyota.jp/

のサイトが上手く設計されていると思います。


まとめ

以上、弊社自社サイトのレスポンシブウェブデザイン対応でした。

私が担当した案件で恐らく1年半ぶりの4件目の
レスポンシブウェブデザイン対応だったと思います。

今回はワンカラムでスッキリシンプルなデザインでしたので、
制作時間もそこそこ少なめで出来たので良かったかなと思っています。

しかし冒頭にも申し上げましたが実は Googleスマホ対応の直前に急ぎ足で制作してしまったので、
細かいところで行き届いていなかったり、モバイルファーストになかなか踏み込めなかったり(IE8への対応がまだまだあるので当分難しいかも…)するのでもっと色々と考えて出来るようになりたいと思っています。

Facebookのコメントで宛名を指定をして返信するやり方

fujie
2015/01/28
閲覧所要時間:約1

下書き状態で1、2ヶ月程メガネネタの記事を温めておいたら他のスタッフに先を越されてしまった藤江です。

Facebook、みなさんやってますか?
こんな記事を書く僕ですが、アカウントだけ持ってて全くやってないです(笑)

仕事上、企業やその代表の方のFacebookなどはちょいちょい拝見するのですが、
どうにもうまく使いこなせている方は少ないようです(‘_’)?


○○さんへ ←これコマンドがあります。

ツイッター風に @ + 名前 で宛先を指定して返信することが出来ます。
しかも高機能なことに、コメント欄に@と入力するだけで宛先の候補が自動で表示されます。

さらに便利なことに、この機能を利用すると宛先の相手に自動で通知が行くそうです!
これで見逃しもなくなりますね。

@名前の詳しいやり方

facebook @名前
     
  1. コメント欄、または投稿本文に半角で「@」を入力する
  2. 「@」の次に宛先の名前を入力すると候補が出てくるので選択

以上!
とても便利だと思うのでぜひご活用ください(・。・)

ついにHTML5が正式勧告

fujie
2014/10/31
閲覧所要時間:約4

html5

ブログ更新担当日のちょうど前日に「HTML5が正式勧告」と、
いい感じにブログネタが手に入って喜んでいる藤江です。

個人的には2年くらい前から、HTML5のDOCTYPE宣言と使いやすい主要なタグ(header、footer、section、article、navなど)を、案件によってはこっそり(弊社自社サイトも)と使い続けてきましたが、これからはバリバリ使っていけそうですね!


HTML5 のメリットとは

  • ソースの見た目がすっきり
  • より文書構造が明確になる(SEOの内部対策にも!)
  • JavaScriptと組み合わせることによってFlashや画像でしか出来なかった表現が可能に
  • フォームやaタグの改善によりユーザビリティの向上と、制作者にも優しくなる

一瞬で思いついたものを書いてみました!
まだまだマダマダあると思います。


HTML5 でマークアップされて参考になるサイト様

さて私が以前から、または最近参考にしている HTML5でマークアップされて参考になるサイト様をいくつかご紹介したいと思います。

いつもお世話になります。 Yahoo!ニュース

個人 – Yahoo!ニュース
http://bylines.news.yahoo.co.jp/


本サイトやその他サービスはまだHTML4だったりXHTML等ですが Yahoo!ニュースの個人、Buzz、意識調査のカテゴリーではHTML5でマークアップされておりました!(2014年10月30日調べ)
いったい何時ごろから変わっていたのでしょう。今日改めて見てみて発見したのですが、全然気づきませんでした!
細かい所でnav、time、figure等でマークアップされており、また全体的にもsection、articleの使い方が勉強になると思います。

みんなのアイドル。 Apple

Apple – iPhone – モデルを比較する
https://www.apple.com/jp/iphone/compare/


AppleのサイトのiPhone比較のページです。
最近になってついにレスポンシブ対応をなされて話題になりましたね!
そこで気になったのがfigureの使い方です。

ソースを見てみると、なんとfigureの中は何も空!
代替えテキストも入れずに堂々とタグの中身は空白で、背景画像を駆使して描画している斬新なマークアップです。

レスポンシブ面ではメディアクエリーの力によって簡単に画像を変更できる点から採用されているのでしょうが、こういったマークアップもありなのでしょうか…!
といったご紹介まで。

<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文(メインフロー)から参照されるようなイラスト・図・写真・ソースコードなどのことです。

図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

必要ならば、図表にキャプションや注釈を付けても良いでしょう。図表にキャプションを付ける場合には、<figcaption>タグを使用します。

出典:<blockquote>-HTML5タグリファレンス


CodeGrid読んでます。 ピクセルグリッド

ピクセルグリッド
http://www.pxgrid.com/


スタッフの方たちが技術面で何かしらアウトプット出来る場(ブログや執筆など)を持っていらっしゃる方ばかりで、サイトのソースが非常に勉強になります。
特徴なのはスタイル目的でIDを使用していない事! classのみ、しかもハイフン繋ぎできちんと統一されているのでとても見やすいです。
僕も真似して比較的新しい案件からはそうしているのですが、IDかclassか?で迷わなくなったり、統一されているのでCSSのメンテナンスが楽になりました。

流石ですわW3Cメンバー。 ミツエーリンクス

ミツエーリンクス
http://www.mitsue.co.jp/


サイトのメインコンテンツとなる要素を大きくmainで囲い、sectionの中には必ずhx(h1、h2など)を入れるなど厳格なマークアップをされています。
W3Cチェックでもエラー無しのページばかり! また早い段階でレスポンシブデザインに対応し、印刷用のCSSもきちんと考えられていてサイトのソースからはとても勉強になります。

やりやがったぜ! フロンティアビジョン

フロンティアビジョン
https://www.fvs-net.co.jp/


ここでまさかの自社サイト…!!
弊社も頑張って約半年前(2014年7月7日)にHTML5で自社サイトをマークアップ致しました。
とはいっても…HTML5の要素は有名で基本的なものばかりの使用と、IDやclassが混在していたりちょっとお見苦しいのですが(こっそり修正していく所存…)、
「熊本 ホームページ制作」の検索1位という結果に恥じぬよう構築したつもりですので、参考になる部分があれば幸いでございます。


というわけで

なにはともあれ、HTMLは一つの節目を迎えた、ということですね。
HTMLしかりCSSしかりJavascriptやPHP等々…フロントエンド周りの近頃は本当に考えたり覚えたり、やることがどんどん増えてきている感じがします。

新しい技術や仕組みに、おいて行かれないように、
じゃんじゃんばりばり試して作って見せたりして行きたいです!

ではまた!

inline-block が最近好きなので振り返ってみた。

fujie
2014/09/30
閲覧所要時間:約7

こんばんは、こんばんわ。
1週間ほど前から早寝早起き(24時前就寝、6時前起床)に嵌っている藤江です。
朝はいいですよ!夜だらだらやるよりも朝!静かで気持ちが良いです。

さて、私は1年ほど前まではIE6からのブラウザ対応を頑張らないといけない環境に居ましたが、フロンティアビジョンに入社してからはIE8からの対応でOK!となったので(巷ではIE8対応も有料らしいですが!)、制作時にいろいろ悩まずに快適になりました。

中でも良くなったのはCSSの「display: inline-block;」や「display: table;」、「display: table-cell;」などがCSSハック無しで使えるようになったり、また「box-sizing: border-box;」というwidthやpadding等の計算が楽になるプロパティ達が使えること!!

その中でも今日は「display: inline-block;」の便利さをお話ししたいと思います。
(今更などと言ってはダメだ!)


display: inline-block; とは?

20140930-inline-block01

inline-blockとは、displayプロパティの値のひとつで、以下の様なことが出来るようになります。

  • ブロック要素のようにwidth、height、padding、margin等が指定出来る
  • インライン要素のように、文字などと一緒に流し込むことが出来る
  • vertical-align、text-alignなどのプロパティが有効!

と、非常に扱いやすいラインアップですね。

さっそく例を並べてみましょう。

ブロック要素のようにwidth、height、padding、margin等が指定出来る

inline-block

/* HTML */
<div class="entry7929_e_pink">inline-block</div>

/* CSS */
[class^="entry7929_e"] {
  color: #fff;
  display: inline-block;
  font-size: 140%;
  font-weight: bold;
  padding: 30px;
}


インライン要素のように、文字などと一緒に流し込むことが出来る

テストテスト
inline-block
てすとてすと

/* HTML */
テストテスト
<div class="entry7929_e_pink">inline-block</div>
てすとてすと


または要素と要素を横に並べたりも。

inline-block
inline-block

/* HTML */
<div class="entry7929_e_pink">inline-block</div>
<div class="entry7929_e_blue">inline-block</div>


vertical-align、text-alignなどのプロパティが有効!

inline-block
inline-block
inline-block
inline-block
inline-block
inline-block

/* HTML */
<div class="entry7929_e_vtop01">inline-block</div>
<div class="entry7929_e_vtop02">inline-block</div>
<div class="entry7929_e_vtop03">inline-block</div>
<div class="entry7929_e_vtop04">inline-block</div>
<div class="entry7929_e_vtop05">inline-block</div>
<div class="entry7929_e_vtop06">inline-block</div>

/* CSS */
[class^="entry7929_e_vtop"] {
  vertical-align: top;
}
.entry7929_e_vtop01 {
  height: 70px;
}
.entry7929_e_vtop03 {
  height: 50px;
}
.entry7929_e_vtop04 {
  height: 50px;
}
.entry7929_e_vtop06 {
  height: 70px;
}


親要素の text-align で左寄せ・中央寄せ・右寄せが可能になります。
またinline-block に vertical-align: top; を指定すると、2段以上かつそれぞれ高さが違っても上下が整うなど、float を使って実装すると面倒だったのがスッキリでシンプルなコードで実現出来ます!


inline-blockで横に並べた時の空白が気になる!

何事にもデメリットはつきもの。
display: inline-block; を使用する際には要素と要素の間にスペースが出来てしまいます。
この謎のスペースはHTMLの改行が原因なのです。
ですのでHTMLを詰めて記述するとスペースは無くなるのですが、HTMLを詰めて記述すると後から編集するのが面倒になる+見た目が非常によろしくないので、CSSで対応しましょう。

letter-spacing を駆使してスペースを消そう!

inline-block
inline-block
inline-block

letter-spacing という文字の間隔を指定するプロパティを使用します。

親要素に対して letter-spacing: -.4em; を指定することによって、文字の間隔を無くします。
文字の間隔を無くすことによってHTMLの改行もぎゅっと詰まらせることが出来るので、子要素間のスペースを無くすことが出来ます。
そのままだと子要素内の文字がぎゅっとなってしまい大変なことになるので、子要素に対して letter-spacing: 0; を指定し子要素内の文字間を元に戻してあげましょう。

/* HTML */
<div class="entry7929_e_letter_parents">
  <div class="entry7929_e_letter">inline-block</div>
  <div class="entry7929_e_letter">inline-block</div>
  <div class="entry7929_e_letter">inline-block</div>
</div>

/* CSS */
.entry7929_e_letter_parents {
  letter-spacing: -.4em;
}
.entry7929_e_letter {
  letter-spacing: 0;
}


親要素に font-size: 0; というやり方もありますが、
%で文字サイズを指定しているサイトでは子要素にて文字サイズが元に戻せませんし、 font-size: 0; という記述がもしかしたらSEOなどに引っかかってくるのでは?という懸念点から控えた方が良いかと思います。


おわりに

本記事では触れませんでしたが、float より inline-block を活用することで、レスポンシブデザインも意識することが出来ます。
また inline-block を使いこなせるようになれば無駄なHTMLの記述も減り、可変なコンテンツにも対応力が上がるので便利です!

手軽に使える便利なブックマークレット!

fujie
2014/09/01
閲覧所要時間:約4

8月が終わってしまいましたが、いかがお過ごしでしょうか。藤江です。
ほとんどの日で雨が降っていたような気がしてとっても夏らしくなかったですね。
夏が一番好きな季節ですので、とても残念です。今年雨だった分来年は晴れますよね? いや、晴れろ! 晴れてください!

さて、今日は前回(手軽に使える便利な firefox のアドオン!)に引き続き、ブラウザがもっと便利になるブックマークレットをサクっとご紹介したいと思います。

ブックマークレットとは?
ブラウザのお気に入り機能を利用して、URLの代わりにJavaScriptをブックマークしておくことで、プログラムを実行できる仕組みなどをブックマークレットと言われています。

手軽に複数のSNSでの反応をチェック!

弊社トップページの様子

ソーシャルてんこ盛り
http://actyway.com/tenkomori


手早く各ソーシャルメディアでの反応をチェックすることが出来ます。名前もかわいい!
サクっと自分の記事の反応をチェックしてもよし!気になるあのサイトをチェックしてもよし!
WEB制作の実務で使える点としては、技術ブログ等で稀にソーシャルコメントに助言を書いて下さる方がいるので助かってます。


ダミー画像をとにかく簡単に欲しい!

ダミーと思われる画像

指定したサイズのダミー画像を一瞬で生成するブックマークレット。 – このブログは証明できない。
http://d.hatena.ne.jp/shunsuk/20100201/1265027593


WEB制作では写真やイラストは必須ですが、いろいろな事情があって本番で使う画像が揃わない時があると思います。
とにかくここは画像です!と明示したい場合はサクっとダミー画像いかがでしょう。

ブックマークレットの元になったWEBサービスはこちら
Dummy Image
http://dummyimage.com/


サービスがどんどん充実していっているのでもしかしたら本家のサービスを使うのが良いかも!


altの入れ忘れを無くそう!

弊社のヘッダーの画像のalt

alt属性を確認するブックマークレット。 | Blog – trustworks [トラストワークス]
http://www.trustworks.biz/blog/2008/04/alt.html


画像のaltの確認面倒ですよね。画像を見つけてオンマウスもしくは右クリックから除いたりいろいろするのは…。
このブックマークレットで画像とaltを一覧表示してサクっと終わらせちゃいましょう!


HTML内タグの閉じ忘れをチェックするツール

弊社トップページはエラーなしです!もちろん内部ページも!

HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] – とっくりばー
http://tockri.blog78.fc2.com/blog-entry-168.html


HTMLがちゃんとしているかサクっとチェックしてくれるツールです。
ページを作ったらとりあえずこれ!って感じで確かめるのに最適です!


表示されているフォントを調べる

きみなんてフォント?

WhatFont Tool – The easiest way to inspect fonts in webpages « Chengyin Liu
http://chengyinliu.com/whatfont.html


これなんてフォント?という時、ありますね。残念ながら画像は無理ですが、本当にサクっと文章のフォントを知りたい時に便利です!


QRコードを簡単作成

弊社トップページのQRコード

QRのススメ:便利ツール:ブックマークレット
http://qr.quel.jp/bookmarklet.php


QRコードをサクっと作ることが出来ます。
最近はあまり見かけませんが、やはり必要なときはいっぱいありますので便利です!


最後に

以上サクっとご紹介でした!
前回(手軽に使える便利な firefox のアドオン!)もでしたが、制作者の方々に本当に感謝感謝です。
私も世の為人の為に何かサービスを作れたらいいなぁ、とは思っているのですがなかなか…。
まずは上記をもっと活かして良いサイト作りを強化していきたいと思っています!

ではまた!

URLがhttpsから始まるサイトではブラウザのセキュリティ設定によって実行出来ないようです。
設定を変更することにより実行することは出来ますが、セキュリティ観点のことから各自の判断でご使用頂ければと思います。

手軽に使える便利な firefox のアドオン!

fujie
2014/08/04
閲覧所要時間:約5

はじめまして。こんにちは、藤江です。
4月末にフロンティアビジョンへ入社して、3ヵ月と1週間程になるマークアップエンジニアです。
熊本電子ビジネス専門学校を卒業して佐賀のWeb制作会社で3年3ヶ月従事しておりましたが、
ご縁があって熊本に戻ってきました!
これからよろしくお願い致します。

さて今日はブログ更新担当日ということで、
ご存じ、モダンなブラウザ『Firefox』のマークアップ実務で使えるオススメアドオンのご紹介を致します。

多機能で軽量なカラー情報を取得出来る『ColorZilla』

ColorZilla

ColorZilla :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/colorzilla/


サイト上の色をワンクリックで調べてくれたり、その際にカラーコードをコピーしてくれたり、ブラウザ上でカラーピッカーを表示して色を変更したりなど、とっても便利なアドオンです。
動作も軽量で、画像編集ソフトなど起動しなくてもカラーピッカーを使うことが出来て捗りますよ!

スタイルシートだけ更新出来る『CSS Reloader』

CSS-Reloader

CSS Reloader :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/css-reloader/


ページは更新したくないが、CSSだけ反映させたい場合などに有効なアドオンです。
お問い合わせフォームなどを構築する際に活用します!

モバイルシミュレーター『FireMobileSimulator』

FireMobileSimulator

FireMobileSimulator :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/


最近はあまり出番がありませんが、モバイルサイトを気軽に閲覧することが出来るアドオンです。
大まかな制作・確認はシミュレーターで、最終確認は実機で、の様なときには重宝しますね!

サーバーの場所が一目でわかる『Flagfox』

Flagfox

Flagfox :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/flagfox/


ロケーションバーに国旗が追加されます。
そこから右クリックのメニューからwhois情報やIPアドレスのコピーなどが簡単に出来るようになります。

HTML構文が正しいか逐一わかる『Html Validator』

Html-Validator

Html Validator :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/html-validator/


ページを表示するたびにチェックしてくれます。
正しければ緑マークにチェックが、
エラーがあれば赤マークに×が、
警告があれば三角アイコンにびっくりマークが表示されます。
また、ページのソースを表示すると、エラーの内容や問題がある場所を示してくれます。

スクリーンショットとものさし代わりにも?『Lightshot』

Lightshot

Lightshot (screenshot tool) :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/lightshot/


該当箇所のスクリーンショットだけ撮って文字などを入れたり出来るアドオンですが、
ピクセル数も表示出来るので、サイト上ものさし代わりとしても利用可能!

リンクチェックを可視化『LinkChecker』

LinkChecker

LinkChecker :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/linkchecker/


リンクを一つひとつ調べるのが大変なときはこのアドオン。
リンクが正しい場合は場合は緑色に、
リンク切れの場合はピンク色に、
アクセスに制限がある場合(Basic認証等)などは黄色になります。

今開いているページを他のブラウザで開く『Open With』

Open-With

Open With :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/open-with/


Firefoxで現在開いているページを、ワンクリックで他のブラウザで開くことが出来ます。
URLをコピーペーストする作業からおさらばです!

ページのソースを比較する『PageDiff』

PageDiff

PageDiff :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/pagediff/


Web上で見ることが出来るページのソースコードを比較することが出来ます。
本番環境と開発環境の差異をさくっと知りたい場合によく使います。

CSSやJavaScript等をお気軽ON・OFF『QuickJava』

QuickJava

QuickJava :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/quickjava/


CSSやJavaScript等をワンクリックでお気軽にON・OFF出来ます。
最近ではトップページにjQueryを使った画像のスライダーが良くありますが、
JavaScriptがOFFの場合は当然動作しません。
そんな時の代替えコンテンツの設置もこのアドオンのおかげで、楽に確認出来ます。

ユーザー独自のスタイルシート『Stylish』

Stylish

Stylish :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/stylish/


サイト上にユーザー独自のスタイルシートを反映することが出来ます。
私は、画像が無い場合良く目立つように、赤背景を出すような使い方をしています。

最後に

いかがでしたでしょうか。
記事を書く前は5・6個ぐらいかな、と思っていましたが終わってみれば11個もありました。
ご紹介したアドオン達に毎日助けられて仕事に励んでいます。
制尺者の方々に感謝!

ありがとうございました。

お次は 手軽に使える便利なブックマークレット! です!

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介