STAFFBLOG スタッフブログ

WEBページの表示速度(SEO対策・UXの向上)

2018/07/24
閲覧所要時間:約4

どーもこんにちは!フロンティアビジョン コーダーの髙貝です!
もうすっかり夏ですね。。暑すぎます。暑がりの自分には地獄の季節到来です!!!
ですが、夏にしか出来ない事も沢山あるので、今年の夏は楽しみたいと思います。

えータイトルにも書いてある通り、今回はWEBページの表示速度について書きたいと思います。

ページの表示速度が重要な理由

  1. SEO対策!

  2. ページの表示速度とSEOが何か関係があるの?と思われる方もいるかと思いますが、確かに今までは表示速度は検索結果で表示される順位に影響しませんでした。しかし!!天下のGoogleは2018年7月より、ページの表示速度をモバイル検索のランキング要因に使うという、「Speed Update」を実施しました。
    googleの金谷氏がツイッターでも告知されていました!
    因みに、遅いページのみに影響(遅くないページには関係ない)
    遅い=評価が下がる。だけでなく「遅くなればなるほど評価が下がる」

  3. UXの向上!

  4. サイトやページの表示速度が速いと、UX(ユーザーエクスペリエンス)が向上します。
    UXは、ユーザーがWebサイトを通じて得られる体験のことなので、文字の読みやすさ、フォームの入力が自動化されていること、クリックのしやすさなどが影響します。
    表示速度が遅いと、ページがなかなか読み込まれず、ユーザーは「遅い!」と感じ、どれだけ質の高いコンテンツを配信しても、表示速度が遅ければユーザーには「不便なサイト」といった印象を与えてしまいます。そしてユーザーは離脱して、ほかのサイトから情報を得ようとしますよね。
    因みに、モバイルサイトを訪れたユーザーのうち、53%はページの読み込みに3秒以上かかると離脱している。
    そして、表示速度が1秒から7秒に落ちると、直帰率は113%上昇というデータも出ています。

    すなわち、ページが遅いと直帰率が格段に上がる。当然です。
    ユーザーは欲しい情報を素早く手に入れたいのですから。

売り上げにも関わる表示速度

そして、モバイルサイトの表示速度は売り上げにも大きく関わります!
ページ表示を高速化した結果、モバイル売上が80%アップした!なんて事例もあります。
EC最大手のAmazonによると、サイト表示が0.1秒遅くなると、売り上げが1%減少。1秒高速化すると10%の売上が向上するという公表も出ているそうです。

ツールを使った速度の測り方

「Google Analytics」
「PageSpeed Insights」

2つともよく使われるツールですね。
今回は、「PageSpeed Insights」を使った説明をします!
PageSpeed Insightsは、Googleが無料で提供しているツールで、モバイルとPCサイトの両方に使用できます!

機能は、読み込み速度(スコア)、ユーザーエクスペリエンス(スコア)、修正の必要性を三段階で評価。
ユーザーエクスペリエンスについては、目安として100点満点のうち70点が平均点で、80点を取得すると高評価です。

使い方はとても簡単です。
左の赤丸に自身のサイトURLを貼り付けて、分析のボタンを押すだけ!
すると・・・
分析結果
↓↓↓

もちろん、フロンティアビジョンのホームページは、モバイル・パソコンどちらも80点以上のGood!評価!!!
モバイルに至っては94点!半端ないって。。

他にも、モバイルとPCのファーストビューが表示される機能もあります!
そして、ページの統計情報や最適化の提案などもあるので、それらを参考に表示速度の速いサイト作りを目指せます!

ページの表示速度が速いほどユーザーの満足度に繋がる

ユーザーは迅速なパフォーマンスを求めていることがわかるので、表示速度はUXの向上だけでなく、SEO対策においても重要なポイントです!「Speed Update」が実施されたことも考慮して、自身のサイトの表示速度を計測し、把握することが求められます。
webページとは情報提供サービスなので、ユーザー目線になり、少しでも快適に利用して頂けるよう努力していきたいと思いました。ではでは。。

今回使用した、「PageSpeed Insights」です。
「PageSpeed Insights」

Brackets使ってみました

2018/07/20
閲覧所要時間:約2

こんにちは!吉田です。
もう夏ですね
とにかく暑い
暑すぎて朝から夜までクーラーの中にいます
外出する際は熱中症に気をつけましょう!

今日はテキストエディタ「Brackets」をご紹介したいと思います。

Bracketsとは

Bracketsとは、アドビシステムズが公開している、オープンソースコードエディタで、
Brackets自体がHTML、CSS、JavaScriptで作られているそうです。

学生の時からずっとSublimeTextを使っていたので一度他のソフトを使ってみようと思い探していると
完全無料
プラグイン豊富
高性能
のBracketsを見つけたのでお試しで使ってみました!


最初から日本語対応

SublimeTextと違い最初から日本語に対応していました。
設定につまずくことがなく、プラグインのダウンロードも簡単なので初心者でもすぐに使えそうです。

ライブプレビュー機能

HTMLやCSSを保存をしなくても編集と同時にブラウザに反映させることができます
保存、確認、保存、確認の面倒な作業をしなくて済みます

CSSをクイック編集

編集したいタグやclass,idの上で右クリックを押してクイック編集を押すと・・・

このようにHTML上でCSSが直接編集ができちゃいます。
わざわざcssを探す必要がなくなるのでコーディングの時間短縮になります。
ライブプレビュー機能+CSSのクイック編集でさらに便利です


使ってみた感想

調べてみるとSublimeTextにはない便利な機能が多くあり、
プラグインを入れるとさらに使いやすくなりました。
少し動作が遅いような気もしますが気に入ったのでそこは我慢してもう少し使ってみようと思います
気になる方はぜひ使ってみてください〜

ダウンロードはこちら

メルマガ配信システム「Benchmark Email」〜レポート編〜



こんにちは!
荒木です。

以前メルマガ配信システム「Benchmark Email」というシステムについて
実際のメルマガの作成方法をご紹介させていただきましたが、
今回は実際に配信した後のレポート(効果測定機能)についてご説明いたします。



Benchmarkemailのトラッキングツールでは、メールの 開封率、クリック率、エラー率などが正確かつリアルタイムで確認いただけます。過去のニュースレターとの比較検証や、アンケート回収結果の分析、また、誰がニュースレターを友達に転送したかまで、細かく分析することも可能です。

出典:Benchmark Email




前回の記事をまだ読まれていない方は下記よりご覧ください。
メルマガ配信システム「Benchmark Email」〜導入&リストの登録編〜
https://www.fvs-net.co.jp/blog/12875


メルマガ配信システム「Benchmark Email」〜メルマガ作成編〜
https://www.fvs-net.co.jp/blog/13995





まずはじめに

まずは管理画面より

  1. サイドメニューの「レポート」から確認する(過去配信したメルマガのレポートをまとめて比較することができます。)
  2. 中央部分の直近に配信したメールのレポートを個別に確認する

といったように2通りの確認の方法がございますので、
お好きな方をご選択ください。






複数のレポート(効果測定機能)の確認(比較)方法


サイドメニューのレポートをクリックすると下記のような画面が表示されます。

そこで① → ②の順番で進んでください。

※過去配信したすべてのメールを選択したい場合は「レポートを比較」の左側にありますチェックボックスにチェックを入れることで全選択できます。

※しかしデフォルトで10件表示されますが10件以上配信されている場合は、
 右下の「表示」という部分で10・25・50・100という風に表示件数を変更されて全選択を行ってください。


次に「レポートを比較」をクリックすると下記のような画面が表示されますので、
大まかなデータに関してはこちらで確認してもっと詳細を確認したい場合は、
左上の「Table」から「Graph」へ切り替えます。





個別のレポート(効果測定機能)の確認方法


一番最初の管理画面もしくはメールレポートのどちらかで確認したいメルマガのタイトルをクリックします。

そうすると下記のような画面が表示されます。

※配信したコンタクトリストを確認したい場合いは、
 右上の「リストを確認する」をクリックすることで確認することができます。(下記参照)


レポートには大まかに分けて4種類のレポートがあります。
 



基本情報


こちらは先ほどもお見せしましたが、
全体的なレポートを確認する画面になります。



※4種類のレポートどれを開いていても下記の操作が可能です。(右上の「・・・」をクリック)
 
  1. メール再送信
  2. サブアカウントに共有
  3. このメールを再利用する
  4. シェア
  5. Download PDFでダウンロード(PDF形式でダウンロード)
  6. Excel形式でダウンロード
  7. 印刷
 



レポート詳細


こちらの画面では、
  • 配信先のメールアドレス
  • 名前
  • Device(受信者がどの端末でメルマガを開封したか)
  • 開封された日付
という情報を確認することができます。

 



リンククリック


メルマガ内に配置したリンクのクリック状況を確認することができます。


クリック率(クリックスルー率)とは
受信者、購読者がリンクをクリックすること。クリック率(CTR)とはメール配信して開封された数をクリック数で割った値。


ユニーククリック【Unique Click】とは
1人のユーザーがリンクをクリックすること。あるURLが何回、特定のユーザーによってクリックされたのかがユニーククリック数の指標となる。尚同一ユーザーからの複数回クリックはこの合計数には影響されない。


URLクリックパフォーマンス
こちらではどのURLを何人の人が何回クリックしたかなどを確認することができます。


クリックマップ
実際に配信したメルマガ上でどのリンクがどの程度クリックされているかを数値化してわかりやすく確認することができます。
 



開封マップ


配信したメルマガがどういった地域で開封されたかを確認することができます。

※しかしIPアドレスの情報が不適当な場合や提供されなかった場合、それらのデータは「開封マップ」に反映されません。





最後に


今回でBenchmark Emailの登録→編集→効果測定までの流れは完結です!

これで皆さんも一通りBenchmark Emailの使い方についてご理解いただけたかと思います♪

普段からお客様や会員の方などへ定期的に配信している情報などがあればこれを機に是非導入・活用されてみてくださいね(^o^)/

もし導入などをご検討されているお客様がいらっしゃれば弊社までご連絡いただければ導入支援やサポートなどをさせていただきますのでお気軽にご相談いただければと思います!

メルマガ配信システム「Benchmark Email」〜導入&リストの登録編〜

メイン画像

こんにちは!
荒木です。

突然ですが、
みなさん自社のサービスや商品などどのようにアピールされていますか??

雑誌やテレビ、ホームページ上への掲載、SNSでの情報発信と様々な方法で、
アピールされているかと思います。

しかし昔から今も続いている情報発信ツールとして、
「メルマガ(メールマガジン)」の存在を忘れてはいませんか?

確かに今の時代メールよりもSNSなどでの情報収集が気軽にできるようになっておりますが、
今のメルマガ配信システムは驚くほど便利になっているんです!!

ちなみに弊社でも実際に導入しております(^ ^)

おまけにこちらの「Benchmark Email」は実は毎月250通以内であれば無料で始められるんです!


それでは弊社でも導入しているメルマガ配信システムである「Benchmark Email」の導入から実際の配信までをご紹介させていただきます( ´ ▽ ` )ノ

新規アカウントの取得

まず Benchmark Email のホームページを開きます。
Benchmark
https://www.benchmarkemail.com/jp/


ベンチマークトップページ
次に右上の「無料トライアル」をクリックし、
アカウントの登録画面を開き必要な情報を入力後、
「無料アカウント作成」をクリックします。

※「無料アカウント作成」をクリック後下記のような画面になりますので、
 ベンチマークよりメールが届いているかどうかを確認します。

メアド承認お願いします
すると下記のようなメールが届きますので、
「メールアドレスを認証する」というリンクをクリックします。

メール画面
上記「メールアドレスを認証する」というリンクをクリック後は下記のような画面になりますので、そのまま「ログイン」をクリックします。

こちらで新規アカウントの取得は完了です。




管理画面(ダッシュボード)の説明&マイアカウント設定


ダッシュボードについて

ログイン後下記のような画面が表示されます。

ダッシュボード
こちらが管理画面になります(以下ダッシュボード)。


ダッシュボードを開いたらまずやっていただきたい設定が・・・・。

そう!「マイアカウント設定」です!!!
こちらは後々どちらにしろしっかり設定しておいたほうがいいところなので、最初にやっておきましょう!




マイアカウント設定

ダッシュボードの右上にありますアカウント名の部分へマウスを持っていくと
アカウントに関してのメニューが表示されます。

その中で「アカウント設定」という項目をクリックすると下記のような画面が表示されます。

マイアカウント設定
デフォルトでは上記のように何も表示されておりませんので、
下記のようにできるだけ必要な項目を埋めてみましょう!

マイアカウント設定→情報入力後
上記全て入力が完了したら最後に「保存」のボタンを押してアカウントの設定は完了です。



コンタクトリストの作成

まずダッシュボードより下記の4箇所どちらからでも結構ですのでクリックしてリストの追加画面を開きます。

ダッシュボード→リストの追加
次に下記のようにリストを登録するための画面が表示されます。

※「リスト名」はいつでも変更ができますのでとりあえずデフォルの名前のまま進めます。

新規リストの作成→インポート
それでは次に各リストの追加方法をご説明します!



インポート機能を使って作成

こちらの登録方法はECサイトを運営していたり、
すでに配信先をリスト化してまとめられているお客様向けです。

リストの追加→インポート
上記「アップロード注意」をしっかりとご確認いただいた上でファイルを選択しアップロードしていただくと簡単に登録ができます。



その前にどういった項目でリストを作成すればいいかわからないという方は下記よりリストの作成方法をご説明いたします。


リスト一覧ファイルの作成方法
まず上部メニューより「コンタクト」をクリックして、
コンタクトリストのダッシュボードを開きます。

コンタクトリストダッシュボード
次に中央部分のリスト一覧の中から「サンプルリスト」をクリックして開きます。

リストを開くと下記のような画面が表示されますので、
ここで右側の「リストアクティビティー」の中から「Excel形式でダウンロード」をクリックします。

コンタクトリスト
次にExcelファイルでダウンロードする際に
含まれる項目を選択してチェックを入れます。

Excel形式でダウンロード→項目選択
チェックを入れ終わったら下の「CSVファイルに保存する」もしくは「EXCELファイルに保存する」のどちらかをクリックしファイルをダウンロードします。

※最低限上記3つの項目へチェックを入れていただければ大丈夫かと思います。


※Excel形式でダウンロードする際には「.xls」の形式でダウンロードされますが、
 アップロードする際には「.xlsx」と「.xls」はどちらでもアップロードは可能となっております。


ダウンロード後のExcelファイルを開くと下記のようになっております。
(※名と姓は変更しております。)

Excel形式でダウンロード
この状態で1行目はそのまま削除せず、
2行目から追加したいアドレスを追加していきます。

全ての入力が完了すれば再度Benchmarkの画面を開き先ほどご説明した様に
ファイルをアップロードします。

以上でインポート機能を使ってのリストの作成は以上です。



コピー&ペーストで作成

こちらの登録方法は登録したい件数が複数ある場合(例えば50件未満で)に便利な登録方法となっております。

リストの追加
上記の入力フォーム部分へメールアドレスを1行に1つのアドレスを入力し、
2件目以降はカンマ(,)などの記号で区切っている場合は削除して、
改行してご入力もしくはコピー&ペーストを行ってください。

最後に入力が完了したら右下の「リストの追加」をクリックして完了です。


※こちらの登録方法はメールアドレスのみの登録が可能となっており、
 名や姓などのアドレス以外の情報を別画面よりご入力いただく必要がございます。

下記誤った入力例となります。

リストの追加→NG-1
リストの追加→NG-2
※上記の様に誤った方法で入力し右下の「リストの追加」をクリックすると下記の様なエラーが表示されます。

リストの追加→エラー


1件ずつ登録

下記の様に好きな項目へ入力するだけで簡単に登録ができます!

1件ずつ登録
上記オプションフィールドへ記載されている項目名は自由に変更ができます。

下記「リストアクティビティー」の中から「編集」をクリックします。

コンタクトリスト→編集
顧客リストの編集
上記「オプション変更」をクリックすると
下記の様なオプション項目が表示されこちらから項目名を変更できます。

顧客リストの編集→オプション変更
変更が完了したら「保存」をクリックして完了です。




以上で「Benchmark Email」の導入&リストの登録方法は終わりです。



最後に

今回は導入とリストの登録方法をご紹介いたしましたが、
結構簡単な操作で尚且つ細かいところまで設定できるとなれば
試しに導入してみてはいかがでしょうか?

次回は実際にメルマガを作成していく「メルマガ作成編」で
どの様にメルマガを作っていくかという部分をご紹介していきたいと思います。

是非お楽しみに〜〜〜( ´ ▽ ` )ノ

もしご不明な点やこれから導入をご検討中の方は是非弊社までお問い合わせください♪

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 & ブックマークレット ライフを!!



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

Adobe XDは想像以上にサクサクだった!

2016/08/15
閲覧所要時間:約3

Adobe XD

こんにちはー、ゾエです。今更ながらAdobe Experience Design(以下:Adobe XD)を使う機会があったので、簡単にですが感想を書いてみます。
今回はあくまでも感想であり、詳しい使い方は説明していませんのであしからず。


Adobe XDって何ができるの?

プロトタイプ作成

Adobe XDは、アプリ・Webサイトのワイヤーフレームやプロトタイプを作成するためのソフトウェア(アプリケーション)です。本格的にデザインやプログラミングを行う前に、サクッと設計図や試作品を作って試してみよう!って感じですね。


Adobe XDのココがサクサク!

Adobe XDを操作している様子を動画にしてみました。かなり適当ですが、サクサク制作を進められている様子は分かるかと思います。


操作が直感的にサクサク分かる

使ったことがないツールはどんなに便利でも、使い方を覚えるまでの学習コストがネックになります。しかし、Adobe XDは機能・インターフェース共にシンプルで、すぐに・直感的に操作が分かりました。
僕は今までもAdobe製品を幾つか使っているので特にそう感じのかもしれませんが、初めての方でもすんなり使い始められると思います。


動作が軽くてサクサク動く

同じAdobe製品でもPhotoshopやIllustratorなどは、PCのスペックによっては動作が重くなることがあります。しかしAdobe XDは非常に動作が軽く、アートボードをたくさん並べてもサクサク動いてくれます。


面倒な処理を自動でサクサクやってくれる

要素のサイズを変更した際、それに関連する要素も自動的にリサイズしてくれたり、角丸の処理なども簡単です。
特に便利なのが「リピートグリッド」機能。写真+キャプションを並べる場合など、水平・垂直に素早くコンテンツを繰り返すことができます


Adobe XDのココがおしい!

アニメーション機能がやや不足

カルーセルで画像が切り替わったり、タップ(クリック)すると色や形状が変わる、モーダルウィンドウを表示させるなど、その場でアクションを起こすことが現段階ではできないようです。


レイヤー機能がない

Illustratorとの相性はまずまずですが、レイヤー機能が無いためPhotoshopのデータでレイヤーを保持したまま配置することはできないようです。
個人的にデザインはPhotoshopで行うことが多いので、そのままコピペできたら便利なのですが、コピペでオブジェクトを持ってくると当然ですが統合されてしまいます。


閲覧にパスワード制限がかけられない

制作したプロトタイプを他の人と共有することができるのですが、現段階ではパスワードなどによる閲覧制限ができないようです。


さいごに

Adobe XDは、まだ開発中のアプリケーションです。今後更に使いやすく便利になることを期待しています。現状でも簡単なワイヤーフレームやプロトタイプであれば十分作成できるので、ぜひ一度使ってみてください。
Adobe XDのダウンロードはこちら(※現在はMac OSX のみ対応)

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 を活用して、
安否確認や、会社・自宅の被害状況などの連絡行いました。

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

最後に

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

MacでThunderbirdのデータ移行

shuhei
2016/03/22
閲覧所要時間:約3

thuderbird

先日、歴代の先人様方から受け継いだMacに別れを告げ、新しいMacを買ってもらいました(ワーイ
設定やデータは「TimeMachine」で楽々移行♪

のはずがなぜかバックアップデータを認識しやがりませんでした(白目)
まぁせっかくですし無駄なデータは断捨離の精神でバッサリ捨ててしまおうと思い手動で作業を行うことにしました。

今回はその中でメール(Thunderbird)の移行の手順をまとめてみました。

ライブラリへのアクセス

移行するために必要なデータは「/ユーザー/ユーザー名/ライブラリ/Thunerbird/Profiles/」に入っています。
ですが、「/ユーザー/ユーザー名/ライブラリ」はFinderで見ても、通常は非表示になっており、アクセスできません。
※「/ユーザー/」と同じ階層にある「/ライブラリ/」や、「/システム/ライブラリ/」とは別物ですので注意してください。

スクリーンショット 2016-03-22 17.47.38
表示させる簡単な方法として、Finderメニュー内の「移動」をクリックで開き、optionキーを押すとライブラリがメニュー内に追加されます。(画像内では出ていませんが、ホームの下部に出てきます)

移行用データの取得と復元

データの取得

「/ユーザー/ユーザー名/ライブラリ/Thunerbird/Profiles/」の中に「.default」という拡張子のついたディレクトリがあります。これが必要なデータになりますので丸ごとコピーして、移行先のMacに送りましょう。

データの復元

移行先のMacであらかじめThunderbirdはダウンロードしておき、起動させている場合は終了させてください。
移行先にも、移行用データと同じ階層のディレクトリに、同じく「.default」の拡張子が付いたディレクトリがあります。
これを削除して、コピーしておいた「.default」を代わりに設置します。


以上で移行作業は完了です。
Thunderbirdを起動すると受信BOXやフィルターなど、きちんと復元されているか確認してみてください。

おわりに

今回ご紹介したのは、移行先があたらしいMacの場合の設定方法です。
既にアカウントが登録されている環境で作業を行うと、既存のデータが消えてしまいますので注意してください。
また、パスワードの管理はキーチェーンで行われている可能性もありますので、キーチェーンをあらかじめ移行しておかないと上手くいかないかもしれません。(先に移行してたので検証ができませんでした・・・)
キーチェーンの移行もThunderbirdと似たような形で移行できますので、下記のURLを参考にしてみてください。
キーチェーンアクセス: キーチェーンを別の Mac にコピーする
https://support.apple.com/kb/PH20120?viewlocale=ja_JP&locale=ja_JP


普段はやることのない移行作業ですが、やってみるとそんなに難しい作業ではありません。
パソコンがぶっ壊れた!みたいな緊急時でもスマートに対応できるよう、覚えておいて損はないかもしれません。

最近何かしらと使う頻度が高くなったEvernote

araki
2016/02/12
閲覧所要時間:約3

Evernote
はいっ!
みなさんこんにちは!
最近特に何かあればEvernoteで情報を共有しようとする荒木です。

今週末も天気が悪いみたいですね。。。
やはり天気が悪いだけでどうしてもテンションが下がってしまうという方がほとんどだと思います(~_~;)

僕もその中の一人です。笑

僕の場合なぜ天気が悪いだけでテンションが下がってしまうかといいますと、、、
僕は晴れの日はできるだけ外に出て日光を浴びながらのんびりしたり、
写真を撮るのが趣味だからです!!!

みなさんは晴れの日にはどんな過ごし方をされていますか?

「こんな休日を過ごしていますっ!!!」
「晴れの日にはここの場所がオススメですよ!!」

などなどあればぜひ教えてください( ´ ▽ ` )ノ

っということで余談ばっかりしてしまいましたが、
今回は最近個人的に使う頻度が尋常じゃないぐらい増えた「Evernote」についてご紹介しようと思います!

Evernoteとは

すでにEvernoteについてご存じの方もいるかもしれませんが、
「名前だけは聞いたことあるけど、実際に使ったことがない」や
「そもそもEvernoteって何?」という方も少なからずいらっしゃるかと思いますので、
簡単にご紹介したいと思います。

Evernoteとは
ノートを取るように情報を蓄積するソフトウェアないしウェブサービスである。


Evernoteってどんな時に便利なの?

例えば外出中にパッと思いついた事をメモしたり、画像や音声、 仕事で使うPDFなど
とにかくさまざまなものを共有できるのです!
また外出先ではスマートフォン、家の中ではPC、ちょっと友達のスマートフォンやPCを借りた場合など
さまざまな端末で自分のアカウントへログインするだけですぐ共有ができちゃうんです!!!

もぉこれを聞いただけでめちゃくちゃ便利だなぁ〜って思った方はすぐにEvernoteを始めてみましょう*\(^o^)/*

例えば、、、
  • Web上の記事でこれは勉強になるなぁ〜って思ってあとでじっくり見たい
  • 1つの端末にしか入っていない資料や画像などのデータをすぐに共有したい
  • 会議や打ち合わせなどの議事録を共有しどこでも確認できるようにしたい
  • 名刺がたまって管理がしづらい
  • 旅行でこんなところ行きたくて、その事についての情報をまとめたい
  • 今までは自分の机やPC、他には冷蔵庫などへ付箋を貼って、不要になったらはがして捨てるといった作業をデジタル化したい
  • 思い出の写真をストックしたい
などなどいろいろな生活シーンの中でEvernoteを取り入れれば、
それだけで全ての情報をまとめる事ができるんです!!!!

またあの前ストックしたWebの記事はどこ?といったように
Evernoteへ書き込む情報が増えればそれだけ管理も大変になります。。

そういった時にはノートに残す際にタグを付ける機能がついておりますので、
それを活用すればすぐに探したい情報が探せるのです!!!!!

Evernoteは使い方次第では、
本当に便利なツールなので皆さんもぜひ日々の生活に取り入れてみてください( ´▽`)


最後に。。。

みなさんどうですか?
Evernoteを使った事がない方はほんの少しだけでも
使ってみたくなったのではないですかぁ〜ε-(´∀` )

僕もまだまだ使いこなせてはいないので、
たくさんの事はブログでは書けませんが、
これからもさまざまな場面で取り入れてみたいと思います!

▼Evernoteのダウンロードはこちらから
Evernote公式ホームページ
https://evernote.com/intl/jp/


▼基本的な使い方についてはこちらをご参照ください♪
Evernote 使い方ガイド
https://evernote.com/intl/jp/evernote/guide/mac/

手軽に使える便利な 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

求人情報

スタッフ紹介