カテゴリー: 技術

技術的な話題

  • WCAN「Webアクセシビリティの学校 2018 in 名古屋」に参加しました。

    WCAN「Webアクセシビリティの学校 2018 in 名古屋」に参加しました。

    2018年6月23日に開催されたWCAN「Webアクセシビリティの学校 2018 in 名古屋」に参加してきました。

    「ウェブアクセシビリティ」という固いテーマでしたが、会場は満員でウェブアクセシビリティのことを勉強したい人がこんなにいるんだ、と驚きました。
    聞けば他の会場でも満員御礼が続いているそうです。

    参加者の男女比は半々ぐらいで幅広い年齢層の方が参加されており、印象的にはフロントエンドのエンジニアさんが多そうな感じでした。

    セッションは講師の植木さんがしゃべり続ける感じではなく、要所要所で参加者に質問を投げかけて挙手を促したり、隣り合った参加者同士でワークショップ的な作業をしてもらうような進行でした。
    私のように「新しい知識も得たいし、同じ業界の方との出会いも欲しい」と思っている人間にとってはとてもありがたい形式です。

    「学校」というタイトルに合わせて始業のベルが鳴ったり、途中でTシャツプレゼントじゃんけん大会があったりと、長時間のセミナーでも飽きさせない工夫が随所にあって勉強になりました。
    所々で流された自作の動画には「こんな時どんな顔すればいいかわからないの」状態になってしまいましたが…（笑）

    聴覚や視覚に障害のある方が普段どうやってウェブサイトに接しているのか？具体的な事例が聞けてとても勉強になりました。
    スクリーンリーダーの例で言えば、まさかあんなに高速で読み上げさせているだなんて、思ってもいませんでした。
    視覚の代わりに聴覚が発達したりするんですかね？
    驚きです。

    あと、私もウェブ制作の講師をする時にはウェブアクセシビリティの話題に触れることがあるので、その時に使えそうな話のネタをたくさん聞くことができたのも良かったなぁと思いました。

    イベントのページはこちら↓
    WCAN 2018/06「Webアクセシビリティの学校 2018 in 名古屋」https://wcan.doorkeeper.jp/events/73241

  • WordPressで制作したウェブサイトを常時SSL化（http→https）する

    WordPressで制作したウェブサイトを常時SSL化（http→https）する

    ChromeがHTTP接続のウェブサイトへの警告を強化

    Googleのウェブマスター向けブログに、2017年10月リリース予定Chrome62においてhttp接続のウェブサイトへの警告を強化する、との記事が投稿されました。

    秘密にする必要のあるデータは、パスワードとクレジット カードの情報だけではありません。ユーザーがウェブサイトに入力するあらゆる種類のデータに対して、ネットワーク上のその他のユーザーがアクセスできないようにする必要があります。そのため、Chrome バージョン 62 以降では、ユーザーが HTTP サイトにデータを入力すると、「Not secure」警告が表示されます。

    https://webmaster-ja.googleblog.com/2017/07/next-steps-toward-more-connection.html

    Firefoxについても同様の対応がとられており、今後は「http接続のウェブサイトは安全ではない」という認識が一般的になっていくと思われます。

    そこで、Wordpressで制作したウェブサイトを常時SSL化（http → https）する手順を備忘録として投稿します。
    ※前提として既に独自SSLの設定は済んでいるものとします。

    1.「.htaccess」ファイルに下記の内容を追記します。

    <IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
    </IfModule>

     

    2.Wordpressの管理画面「一般設定」のURL欄を書き換えます。

    管理画面「一般設定」 http を https に

     

    3.画像等のパスを書き換えます。

    ウェブサイトがhttp接続だった頃に投稿した記事内の画像等は、パスがhttp://で始まっているとブラウザによってはアラートが出ます。

    ひとつづつ書き換えていくのは大変なので、プラグインの「Better Search Replace」や「Search Regex」等を使用するとパスを一括置換できます。

  • WordPressで「google analytics by yoast」と「Contact Form7」を使ってGAのイベントトラッキングを利用する場合の注意点

    WordPressで「google analytics by yoast」と「Contact Form7」を使ってGAのイベントトラッキングを利用する場合の注意点

    WordPressでGoogle Analyticsのイベントトラッキングを利用しようとして少しハマったので記録しておきます。

    発端はメールフォームを設置するプラグイン「Contact Form7」の送信完了イベントをGAに送信しようとして、うまくいかなかったことでした。

    イベントが送信されないだけでなく、「Contact Form7」の送信完了メッセージも出ていなかったので、最初は「Contact Form7」のスクリプトでコンフリクトが起きていると思っていました。
    （以前他のブログでコンフリクトが起きたことがあったので）

    そこでJavascriptを使用しているプラグインを全て止めてみたりしましたが、解決しません。

    ちょっと困ってしまいましたが、ブラウザのコンソールをよく見てみると

    Reference Error: ga is not found

    というエラーが出ています。

    これはどうもGAのタグの埋め込み等に使っているプラグイン「google analytics by yoast」の方に問題がありそうだということで、今度は「wordpress　yoast　ga　イベント」等で検索をかけてみると、下記のブログ記事が見つかりました。

    WordPress SEO by Yoastでイベントトラッキングが使えない時
    http://15g.jp/wordpress-seo-by-yoast%E3%81%A7%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0ga%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84%E6%99%82/

    Contact Form7の問い合わせをGoogle Analyticsでトラックできなかった原因と解決法
    http://locatimefree.com/contact-form7-google-analytics-event-tracking-problem-solution/

     

    上記の記事に全て書いてありますが、結論としてはプラグイン「google analytics by yoast」を使っていて、GAにイベントを送信したい場合には、GoogleAnalyticsのリファレンスにあるように

    ga('send', 'event', 'category', 'action');

    と書くのではなく

    __gaTracker('send', 'event', 'category', 'action');

    と書く必要があるようです。

     

    上記のブログ記事に辿り着くまでに少し時間がかかったので、備忘録として残しておきます。

Top