NP Log

ブログ

  • Selenium Grid on Azure and LambdaTest

    EhimeJSという勉強会で初心者歓迎LT会が開催されるということで、JSはあまり得意ではないのですが、ちょうどクロスブラウザのテストが気になっていたのでSeleniumの練習を兼ねて参加してきました。

    当日の様子はこちら。（@PET_HAL さんのまとめ）

    数年前にSeleniumを仕事で使ったことがあって、その時はJavaとPythonでテストプログラムを書いたのですが、今回はJSがテーマということでざっと調べたところ Node.js の記事がいろいろ見つかったので Node.js で書くことにしました。

    そしてテスト環境ですが、仕事で主にmacOSを使っていて、Chrome / Firefox / Safari はローカル環境で問題ないので、Edge / IE をメインのテスト対象として考えました。ここで、MSのブラウザは Edge_Chromium がメインになっていくと思うので Edge_HTML / IE 対応にはあまりコストをかけたくないというのが正直なところですが、運用しているウェブサイトの利用状況を見るとそれなりにユーザー数もあるので、であればテストを自動化することでモチベーションにつながればということもあります。

    Edge_HTML / IE を試すには Win10 の仮想マシンが必要と考えて、だとすれば Azure を使ってみるのも良いかなと思い Azure の VM で Selenium Grid (hub + node) を立てることにしました。結論としては、環境構築自体は割とスムーズにできて、手元のターミナルからリモートマシンの Chrome / Firefox / Edge_HTML / IE11 を Node.js で動かすことができました。

    少し手間取ったのはリージョンの選択とVMサイズの変更。いろいろリージョンを変えてVMを探してみたのですが、少し金額が高めのスペックしか選択肢に表示されず。ちょっと様子がわからなかったので、サポートに問い合わせたところ、希望するリージョンとVMのスペックをリクエストすれば選べるようになりますとのこと。ということでリージョンを変えて希望のスペックが選択できました。

    Seleniumについては主にこのページを参考にしました。
    Setting up your own test automation environment

    ローカルでのテストの仕方やリモートテストに関する情報がまとまっています。ここで LambdaTest というサービスも紹介されていたので試してみました。

    EhimeJS で発表した資料はこちらに公開しています。
    Selenium Grid on Azure and LambdaTest
    LTで説明したのは前半の20枚くらいです。後半に環境構築での注意点とか、まだ試してはいませんが、気になる記事をまとめておきました。少しでも参考になれば幸いです。

  • AWS障害発生 – とりあえずのメモ書き

    Service Health Dashboard

    AP-NORTHEAST-1 に障害が発生していて運用中のウェブサーバーにアクセスできず。
    AWS側の対応を待つしかないのですが、別のリージョンに作ったテスト環境があって、インスタンスを立ち上げてみるとこちらは問題なさそう。

    ここしばらくプライベートサブネットにあるDBサーバーのメンテナンスをしていなかったので、NATを作成してupdate。更新が完了したらNATを削除してインスタンスを再起動。

    [2019.08.27]
    (参考)複数のAvailability ZoneにプロビジョニングしたELB(ALB) / AutoScaling Groupから特定Availability Zone上のリソースをパージする

    [2019.11.21]
    RDSのマスターの異常検知によってフェイルオーバー機能が働いて、リードレプリカがマスターに切り替わっていたようです。WordPressを使って運用しているサイトなのですが、公開ページは問題なくてダッシュボードにログインできない状態になっていました。手動でフェイルオーバーを実行してマスターとスレーブを切り替えて正常に稼働することを確認しました。

  • ダッシュボードのスタイル調整（印刷用） – WordPress

    あまり利用する機会はないかもしれませんが、ダッシュボードのあるページを印刷する際に admin menu は不要かもと思って
    試してみました。

    Admin pagesのカスタマイズ方法はこちら（Plugin API/Action Reference/admin enqueue scripts）

    概要は、メディアクエリの print を定義して、
    adminメニュー領域を非表示にする。
    ダッシュボードのコンテンツ領域(#wpcontent)の左側マージンをなくす。

    以上です。

  • Polylangメモ – WordPress Plugin

    Polylang

    プラグインPolylangを使って、ホームページ多言語化　その１：インストールして使ってみる | ゆうそうとITブログ
    プラグイン導入に際し、参考にさせていただきました。m(__)m

    Language switcherはウィジェットとして設置するので、使用するテーマがウィジェットに対応している前提。

    テーマのウィジェット対応

    上のページの例だとfunctions.phpのID home_right_1 とテンプレート側のID sidebar-1 が異なるので、実装する際はこのIDを揃える。

    外観 -> ウィジェット から Language Switcher を追加。

    Language Switcher(Widget)

    How to display the widget flags horizontally?

    デフォルトだと選択する言語が縦に並ぶので、横に並べたい場合のスタイル指定。

  • Rails Girls Ehimeに参加しました

    昨年末からehime.rbで少しずつですが Ruby on Rails を勉強していまして、
    今回 Rails Girls Ehime が開催されたのでスタッフとして参加してきました。

    スタッフといってもイベント当日のお手伝いは特にしていなくて、開催前のお手伝いでイベントのお知らせページの一部をGitHubで更新した程度です。マスターリポジトリをフォークして、ブランチを切ってファイルを編集。コミットしてPRを送ってマージされたらフェッチしてフォーク先を更新、みたいな手順を何度か行いました。これはこれでgit操作の勉強になりました。

    イベント自体は2日目の土曜日のみお邪魔して参加者と同じ立場でRailsの環境づくりとチュートリアルを試しました。昨年末かあるいはその前だったか作成済みのRails環境があって、今回のチュートリアルの環境に合わせるにはいくつかバージョンアップが必要でした。

    herokuへのdeployをする際にherokuコマンドのバージョンアップを促すメッセージが出たので、更新を実行したところ更新できず。下記のherokuのドキュメントによると、どうやらnpmでのheroku(cli)のインストールはおすすめではないらしい。

    で、なんとか環境が整ったのでチュートリアルを進めていきました。で、herokuへのdeployもできて、次の課題でファイルのアップロードに対応しようとしたところで、deployしたところでエラー発生。

    調べていくと、

    Gemfileの編集で gem 'carrierwave' これを追加する場所がまずかったようです。(developmentの中にのみ書いていた)
    そんなこんなでエラーを起こしつつもherokuでの動作確認までできました。

    あとLTで参考になるサイトとか書籍の紹介があったのでいくつか書いておきます。

    Progate – Ruby on Rails5
    Paizaラーニング – 「Ruby on Rails」入門講座

    クロスコミュニティ四国
    鎌玉のよしなしごと

    今後も引き続いてRailsの勉強会が愛媛で定期的に開催されるとのことで、プログラミング初心者の方もお気軽にご参加いただければと思います。

    Rails Girls Ehime – June 2019 のまとめ

  • CodeLabsのbarcode scannerを試してみました。 – Firebase

    チュートリアルはこちらから。
    Detect Barcodes in an Image using Firebase MLKit

    サンプルソースにはML Kitのプロジェクトがいくつか含まれているので、
    その中から barcode-scanning/starter を適当な場所に置いて AndroidStudio で開きます。

    Nextボタンで進めていきます。

    Firebase consoleで入力するパッケージ名ですが、
    誤：com.google.firebase.codelab.barcode-scanning
    正：com.google.firebase.codelab.barcode_scanning
    のようです。

    あと appのbuild.gradle ですが、

    implementation 'com.google.firebase:firebase-ml-vision:17.0.0'
    ...
    }

    apply plugin: 'com.google.gms.google-services'
    com.google.gms.googleservices.GoogleServicesPlugin.config.disableVersionCheck = true

    このように disableVersionCheck = true を追加してエラーを回避しました。
    （他に正しい方法があるのかも…）

    emulatorでアプリが起動することを確認して、USBで実機を接続。
    実行すると、書籍のバーコードが読み取れました。

  • Docker の WordPress で PHPUnit を試してみる

    先日の WordPress Meetup で Docker 環境を試しました。
    ゆるウェブもくもく会 #1 ＠ミュゼ灘屋

    当日は phpunit コマンドが実行できることを確認して終了。
    その後、実際にプラグインを追加してテストが通るところまで確認できたので、いくつか試したことをメモっておきます。

    まずはこちら。Docker公式のドキュメント。
    Quickstart: Compose and WordPress
    これでローカルの起動までは簡単にできるのですが、WordPressのファイルがホスト側にマウントされないので、
    Dockerにシェルで入って操作、編集する必要があります。

    次に参考にさせていただいた記事。
    Docker ComposeでWordPressを構築する
    こちらだと docker-compose.yml を置いた場所に /html/ というフォルダができるので、ここから WordPress の各種ファイル操作ができます。

    ただしこの環境だと phpunit まわりが入っていないので、必要なコマンド群を手作業でインストールする必要があります。
    WordPressのイメージのカスタマイズで参考にした記事がこちら。

    Custom WordPress Docker Setup

    Dockerfile を編集して必要なコマンドをインストールすれば良さそう。
    と調べているうちに、必要なものが一通り揃ったものがありました。感謝。

    akahigeg/wordpress-plugin-unittest-on-docker – GitHub

    こちらのソース一式をクローンなりダウンロードなりして、

    $ docker-compose up -d

    とすれば、phpunit用にカスタマイズされたWordPressのイメージで起動できます。
    Dockerfileを編集した場合は、

    $ docker-compose down

    して、

    $ docker-compose build
$ docker-compose up -d

    という操作をすれば良さそうです。

    少し気になるのが Docker 内のファイルのパーミッション。
    この環境だと my-plugin の owner が root になるようで、

    $ docker-compose exec --user www-data wordpress bash

    このようなユーザー指定で操作を試しているところです。

    補足

    site health を開いて、不要なテーマを削除しようとすると FTP ログインが求められたので、
    wp-config.phpを開いて、

    define('FS_METHOD','direct');

    を追加しました。

  • Cookiecutter Django のテスト

    Cookiecutter Django

    最初の設定項目の説明

    python3環境とcookiecutter実行

    cookiecutter設定項目

    必要な環境に合わせて適宜変更…

    出来上がったプロジェクトフォルダに移動して、

    ビルド・実行、停止

    メールアドレスでユーザーを追加する際のactivation

    Mailhog

    Mailhog

    ビルドをやり直す場合

    （参考）Quickstart: Compose and Django

    Docker docs – Quickstart: Compose and Django

  • アクセシビリティに関するメモ

    Twitterでアクセシビリティについて話し合うようなメッセージが流れていて、都合で参加できなかったのでわかる範囲でまとめておきます。

    どちらかというと、視覚障害者（音声利用者）寄りの内容です。

    音声利用（スクリーンリーダー）をするには、それぞれのOSについて下記のようなツールがあります。
    私自身は晴眼者で、音声利用をする機会はほぼなくて、盲ろう者（視聴覚重複障害）のボランティアの経験が少しある程度です。
    紹介しているツールについての詳しい知識はありませんのであらかじめご了承お願いします。

    音声利用ツール

    Mac, iPhone, iPad

    VioceOver for Mac
    VoiceOver for iPhone

    Windows

    ナレーター for Windows
    PC-Talker for Windows
    NVDA for Windows

    Android

    Android ユーザー補助機能の概要
    Android TalkBack を有効にする

    WordPress

    当サイトもそうですが、仕事でWordPressを使う機会が多いので、WordPressのアクセシビリティについて探してみました。
    Make WordPress Accessible
    ここから辿っていくと良さそうです。
    例えば Readability を開いてみると、

    Good practice:

    Start with a short summary of the content
    Divide the rest of the text in short blocks
    Use headings and lists and meaningful link text
    Avoid large blocks of text

    という説明があります。

    音声利用の場合、コンテンツを全て読み上げてからでないとそこに何が書かれているかわかりませんので、あまり階層が深くて複雑なページ構成になっていると、読みたい記事があってもなかなかたどり着けないと思います。上に引用したように、先頭にサマリーがあって、テキストが比較的短いブロックに分かれていて、見出しやリンク文字列が理解しやすい、大きなブロックは出来るだけ避ける、といった配慮が必要と思います。

    参考資料

    Web Content Accessibility Guidelines (WCAG) 2.0
    論文作成・発表アクセシビリティガイドライン（Ver.3.0）
    総務省:みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)

  • Firebase In-App Messaging API – Android Studio

    Firebase の In-App Messaging を試してみるものの、一向に表示される様子がなく…
    Android Studio の Logcat を眺めてみると、

    PERMISSION_DENIED: Firebase In-App Messaging API has not been
    used in project ??? before or it is disabled.

    のようなログがありました。

    Enable it by visiting …

    ここにあるURLを開いてみると、

    Firebase In-App Messaging API が有効になっていない？

    ということでした。
    ENABLE をクリックして、再度 Firebase console からテストを実行。
    emulatorでアプリを閉じて開きなおすとメッセージが表示されました。