ニトリネットのオーダー詳細情報を要約して表示するJavaScript

JavaScript Tips ブックマークレット

ニトリネットのオーダー詳細情報の情報をスクロールせずに取得するJavaScriptを書いた。

www.nitori-net.jp

consoleから実行すると画像のようにJSONを書き込んだtextarea要素をページトップに挿入する。

f:id:wifeofvillon:20180811164212p:plain

usage

  1. コードをコピペする
  2. ブラウザの開発者ツールのconsoleにコピペして実行する

自分で使う分にはJSON形式で取れればよかったので連想配列をJSON形式で吐いてるだけなんだけど、TSVとかにパースするとそのままGoogleスプレッドシートとかに貼れて便利だと思う。

code

{
  let data = {
    date:   '1970/01/01',
    count:  0,
    items:  [],
    price:  0,
    tax:    0
  };

  // 日付
  data.date = $('.dispOrderInfo > p:eq(1)').text().match(/[0-9]{4}\/[0-9]{2}\/[0-9]{2}/)[0];

  // 個数
  data.count = $('.item_area').size();

  // アイテム詳細
  for(var i = 0; i < data.count; i++){
    let item = {
      title: '', count: 1, price: 0
    };

    // アイテム名
    item.title = $(`.item_area:eq(${i}) .item_spec_details > a`).text();

    // 単価(税抜)
    item.price = $(`.item_area:eq(${i}) .item_info_area .order_item_info:eq(0) > dl:eq(0) .price`).text().replace(/(円|,|\s)/g,'');

    // 個数
    item.count = $(`.item_area:eq(${i}) .item_info_area .order_item_info:eq(0) > dl:eq(1) .item-quantity`).text().replace(/\s+/g,'');

    data.items.push(item);
  }

  // 商品金額合計(税別)
  data.price = $('#total_figures_totalProductPrice').text().replace(/[円|,|\s]+/g,'');

  // 消費税
  data.tax = $('#total_figures_tax').text().replace(/[円|,|\s]+/g,'');

  // JSON書き出し
  $('.main_content').prepend(`<textarea style="width:800px; height:128px;">${JSON.stringify(data)}</textarea>`)
}

TL;DR

引っ越しに伴い大量の注文をしたため、それを別帳簿に写すときにスクロールがだるいという動機で書きました。
for文の書き方を忘れたり正規表現の書き方を忘れたりしていたので普通にコピペした方が速かったなと思いました。
ニトリネットがjQueryを使っているのでそれを使用しています。
もしニトリネット担当者の方がこの記事を見たら注文データのCSVダウンロード機能をつけてもらえると最高だなと思います。

GitリポジトリからiOSアプリを構築する方法（QA担当者用）

iOS Apple Xcode QA Tips

※Mediumの以下のエントリの日本語版です

medium.com

このエントリはQAスタッフやテスターがGit（GitHub）リポジトリからiOSアプリケーションを作成する方法についてのメモです。この記事では、次のことを想定しています。

  • 読者はiOSアプリケーション開発者ではない
  • (エミュレータでなく)実機でテストをする必要がある
  • 読者は自身のAppleアカウントを持っている
  • チームの管理者(開発者やリーダーなど)にプロジェクトに読者を追加するよう依頼することができる
  • チームのGit(GitHub)リポジトリにアクセスしてコンピュータに複製する権限および手段がある
  • スケジュールがとてもヤバく、他の望ましい方法を取る時間がない(例：TestFlight、DeployGate）

TestFlight - Apple Developer　

DeployGate - Distribute your beta apps instantly

上記に加えて、以下の経験があるとわかりやすいかもしれないです。

  • ADBコマンドでAndroid apkを端末にインストールしたことがある
  • なんでもいいのでIDEを使用したことがある

Steps

  1. Appleアカウントをデベロッパーアカウントに登録する
  2. チームの管理者にあなたをメンバーとして招待するよう依頼する
  3. Xcodeをインストールする
  4. XcodeでGitリポジトリをクローンする
  5. XcodeでAppleアカウントを設定する
  6. Appleデバイスをコンピュータに接続してアプリをビルドする

1. Appleアカウントをデベロッパーアカウントに登録する

まず、Apple Developerアカウントを取得する必要があります。 AppleアカウントをApple Developerアカウントとして登録することができます。

2. チーム管理者にあなたをメンバーとして招待するように依頼する

次に、あなたのチーム開発者にあなたをApple Developer [People]のメンバーとして招待するように依頼してください。プロジェクトにあなたのEメールアドレスを追加した後、招待メールが送信されます。

3. Xcodeをインストールする

Xcodeをダウンロードしてインストールします。 Xcode Betaを使用する必要がない場合は、App Storeから（通常の）Xcodeを入手できます。

※日本語版注：以下のスクリーンショットにはXcode Betaのものも含まれます

4. XcodeでGitリポジトリをクローンする

最初にXcodeを起動すると、Xcodeは以下のようなビューを表示します。 "Clone an existing project"をクリックすると、Xcodeは新しいウィンドウを開きます。 GitリポジトリのURLを入力したら、ソースファイルを取得してプロジェクトを開くことができます。

f:id:wifeofvillon:20180804231325p:plain

f:id:wifeofvillon:20180804231419p:plain

5. XcodeでAppleアカウントを設定する

Xcodeであなたのチームプロジェクトを開けるようになったと思いますが、プロジェクトによっては警告が表示されるかもしれません。左ペインの上部にある左のフォルダアイコンをクリックしてプロジェクトディレクトリを開きます。

[Add Account...]をクリックし、Apple IDを入力して[Accounts]画面を開きます。それでも警告が残っている場合は開発者に確認してください。

f:id:wifeofvillon:20180804231730p:plain

f:id:wifeofvillon:20180804231751p:plain

f:id:wifeofvillon:20180804231807p:plain

f:id:wifeofvillon:20180804231821p:plain

6. Appleデバイスをコンピュータに接続してアプリをビルドする

これで、元々用意されているエミュレータや実際のAppleデバイスでアプリを実行できます。デバイスをコンピュータに接続して選択し、三角(再生？実行？)のボタンをクリックします。 （中央のテキストエリアでビルドの進捗状況を知ることができます）。

f:id:wifeofvillon:20180804232029p:plain

その後、git-pullで最新のソースをビルドして試すことができます。 （私の場合は、GitHub Desktopを使ってリポジトリを管理しています。使い慣れた方法で試してみてください。）

Ex. 実行中のログを取得する

Xcodeを使用してデバイス上で実行されているアプリケーションのログファイルを読むことができます。ツールバーの[Window] - [Devices]を開き、[View Device Logs]をクリックします。

f:id:wifeofvillon:20180804232124p:plain

f:id:wifeofvillon:20180804232127p:plain

TL; DR

QAをするなら断然TestFlightやDeployGateで配布されたアプリを使う方がいいので、もちろんこれは最後の手段なんですけど、このエントリを読んでいるということはもうスケジュールがやばいということだと思います。頑張ってください。

参照記事

Android端末でGoogle Play開発者サービスのアップデートをアンインストールする方法

Android Setting Tips

Google Play開発者サービスのアップデートをアンインストールする方法（工場出荷時のバージョンに置き換える方法）について説明しています。

medium.com

Google Play開発者サービスについて

Google Play開発者サービスは、Androidアプリが使用するコア機能のいくつかをサポートするもので別に開発者向け機能というわけではありません。古いバージョンを使用しているユーザーもいるかもしれないのでアプリ内でチェックする必要があります。

古いバージョンでのアプリの挙動を確認したい場合は、開発者サービスのアップデートを削除＝アプリを出荷時状態まで戻すことで近い状態にすることができます。

ただ、上で述べた通りいろいろなアプリが開発者サービス内の機能に依存しているので、アップデートのアンインストール後にエラーが発生することが想定されます。

Google Play開発者サービスのアップデート削除方法

  1. 「設定」>「アプリ」>「Google Play開発者サービス」を開く
  2. 「アップデートのアンインストール」をタップする
  3. システムメッセージに同意する

f:id:wifeofvillon:20180621123339p:plainf:id:wifeofvillon:20180621123335p:plainf:id:wifeofvillon:20180621123329p:plain
アップデートのアンインストール手順(Galaxy S4, Lollipop)

Tips

  • このフローは一部のアプリによって中断されることがある。(例：Androidデバイスマネージャ、Google Pay)この場合、これらのアプリを無効にした後にアンインストールを実行できる。(手での有効化必須)
  • 日本語だと「Google Play開発者サービス」だけど英語での正式名称はGoogle Play services
  • Marshmallow以降では右上のケバブをタップするとアップデートのアンインストールが表示される。

f:id:wifeofvillon:20180621123325p:plain
アップデートのアンインストール(ZenFone4, Nougat)

Android実践プログラミング 現場で生まれた設計パターン

Android実践プログラミング 現場で生まれた設計パターン

Android改善プログラミング

Android改善プログラミング

Bluetooth機器がサポートしているプロファイルを調べる方法(Mac)

QA Tips macOS

Note: このエントリはHow to Know That Your Bluetooth Device Supports Which Profiles (英語)を和訳したものです

半月くらいAndroidアプリのBluetooth接続に関する機能のテストをしていて、私物のBluetooth機器がサポートしているプロファイルを知りたいという状況になったので、MacとBluetooth機器をペアリングして調べる方法を書いておきます。

f:id:wifeofvillon:20180615172743j:plain

Bluetoothのプロファイルについて

「Bluetooth機器がサポートしているプロファイル」の意味がわかる人はこの部分を読まなくていいです（私自身が理解するのに時間がかかったので書いておきます）。

雑に言うと、Bluetooth機器は用途に応じて接続先の機器をコントロールします。ヘッドセットなら「音声を聴く」「音量を操作する」「マイクで音声入力をする」などです。

こういったコントロール方式＝プロファイルが多く規定されていますが、その中には最終的な動作がカブっているものも多いです。上で挙げたヘッドセットの「音声を聴く」という機能に限定して言えば、大抵のヘッドセットはHSP (Headset Profile)をサポートしていますが、新しい機器であればそれに加えてA2DP (Advanced Audi​​o Distribution Profile)をサポートしていることがあります。

接続先となるアプリケーションの実装がプロファイルごとに異なる場合「古い機器で動かない」ということも起こり得ます。

参考：Traditional Profile Specifications | Bluetooth Technology Website

MacからBluetooth機器がサポートしているプロファイルを調べる方法

ここではMacOSのPCとBluetooth機器をペアリング設定した状態でサポートしているプロファイルを調べる方法を書いています。Windowsでもほとんど同じ手順で調べることができるようです。

参考：Bluetooth デバイス プロファイル サポートの詳細情報を得る方法

  1. Appleアイコンをクリック
  2. 「このMacについて」をクリック
  3. 「システムレポート」をクリック

f:id:wifeofvillon:20180615174816p:plain
「このMacについて」の「システムレポート」をクリック

システムレポートの「ハードウェア」の下に「Bluetooth」という項目があります。一番上が本体の仕様で、その下にペアリングされている機器の情報が並んでいます。

f:id:wifeofvillon:20180615175657p:plain
“FozentoFt1”がHFPとHSPをサポートしているヘッドセットであることがわかる

もちろんそれぞれの機器のマニュアルを参照することがベストですが、イヤホンなど安価な小物の場合失くしやすいですしそもそも載っていないということもあるので、そういうときは試してみてください。

OFTEN Bluetooth スピーカー IP67防塵＆防水認証 お風呂専用 スピーカー 吸盤式　内蔵高質マイク　スピーカーフォン【長時間持続再生】 耐衝撃 ブルートゥース 防水 ワイヤレス　4色入れ（オレンジ）

OFTEN Bluetooth スピーカー IP67防塵＆防水認証 お風呂専用 スピーカー 吸盤式　内蔵高質マイク　スピーカーフォン【長時間持続再生】 耐衝撃 ブルートゥース 防水 ワイヤレス　4色入れ（オレンジ）

【Android】続・端末標準の電話機能でSIPを使う方法(受信・送信)【GalaxyS7】

Android SIP Tips Setting 技術

この前Nexus5(とZenFone4)でのSIP電話の設定から通話までをまとめたが、Galaxy S7のSIP設定で2時間近く吹っ飛んだので書く。

これを読みにきた人はSamsungに対する何かそのような気持ちを募らせていることと思うが、とりあえずこの前書いたわりと標準的なAndroid端末での記事を読んでからこれを読んでほしい。

wifeofvillon.hatenablog.com

description

SMARTalkとかChiffonみたいなサードパーティアプリを使わず、050から始まる電話番号も使わず、Android端末Galaxy S7の電話機能でSIP電話を受ける・かける方法。

スクショはGalaxy S7 (Android 7.0)のものを掲載。

overview

  1. Android端末Galaxy S7にSIPアカウントを割り当てる
  2. SIPアドレス宛てに電話をかける

Galaxy S7にSIPアカウントを割り当てる

ZenFone4は親切に、Nexus5も余計なことをせず見せてくれる通話アカウント画面だが、Galaxyシリーズの場合当該Activity(com.android.phone.settings.PhoneAccountSettingsActivity)を直接叩くことでやっと開ける。

特定のActivityとかServiceを直接起動するアプリはいくつかあるらしい。ここではQuickShortcutMakerを使った方法を紹介する。

play.google.com

  1. QuickShortcutMakerを起動する
  2. Phone(com.android.phone)を探す
  3. Phoneの中のPhoneAccountSettingsActivity(com.android.phone.settings.PhoneAccountSettingsActivity)を探す
  4. tryをタップしてActivityを開く

当該Activityを選択→実行→(直接開けるActivityであれば)Activityを開く

あとは他のAndroid端末と同じ(多分)

参考サイト(英語)

brouken.com

forums.androidcentral.com

SIPアドレス宛てに電話をかける

他のAndroid端末だと「連絡先(Contacts)」のカードに「SIP」という欄があって、そこからSIP電話をかけることができるんだけどGalaxyシリーズはそれがない。ではどうするかというと普通に電話番号欄にuser@example.comみたいな文字列を登録する。

で、それをやろうとすると入力制限(数字記号のみ)に引っかかるので、

  1. コピペするか
  2. 向こうからかけてもらって登録する

みたいな対応が必要になる。

tl;dr

Samsungの「どうしてもSIPを簡単に使わせたくない」という気持ちが垣間見える。つらい。

ゼロからはじめる　ドコモGalaxy S7 edge SC-02Hスマートガイド

ゼロからはじめる　ドコモGalaxy S7 edge SC-02Hスマートガイド

*.mdファイルを読み込んで整形してHTMLファイルに書き出すスクリプト

Node.js JavaScript Markdown 技術

*.mdの内容をブロック要素ごとに分けて*.htmlとして出力するスクリプトを(けっこう前に)書いた。

f:id:wifeofvillon:20180312132109p:plain

github.com

description

＊「利用規約とかライセンスとかのマークアップがアプリのAssetとサーバー上とで違うのdiff確認しづらくない？」
＊「そのへんマークダウンで管理したいよね〜」

みたいな雑談が聞こえた後30分くらいで雑に書いた。

usage

npm installしてnpm testすると、SAMPLE.mdの内容を元にSAMPLE.html内の{{%}}を置換するかたちでTEST.htmlを生成する。

feature

マークダウンテキストをまるまるhtmlにパースして<body>に突っ込むのではなく、ブロック要素に分けてパースするようにした。

dependency

  • fs: ファイルのReadWriteはNode
  • markdown.js: マークダウンテキストのパース

github.com

課題

あまりにも雑に書いたので実際に使うならなんかもうちょっと考える必要がある。

そもそもReactなりVueなり使えばいいのでは……と思ったけどそれだとアプリのAssetで使えないのか……

Nodeクックブック

Nodeクックブック

【QA】QAとして開発チームにお願いした4つのこと

技術 チームマネジメント QA

このエントリではゴリゴリの開発者ではない人間が、QAとしてアプリケーション開発チームに参加した後、実際にチームメンバーにお願いした内容を紹介する。

f:id:wifeofvillon:20180310200737j:plain

※この記事は以下のエントリ(英語)を和訳・追記したものです

medium.com

前提として

書いた人のスペック

ここ数年仕事としてソフトウェア開発はしてなかったけど、個人的にHTML5+JSベースのツールを公開したりはしていた。

求人票に書かれていた条件は次のような感じで、アプリケーション開発に関する知識は求められていなかった。

  • 日本語と英語でコミュニケーションがとれる
  • 文章でバグの内容を説明できる

そこへたまたま

  • アジャイル＆GitHub/カンバン/チャットツールベースのプロジェクトを経験している
  • GingerbreadかHoneycombくらいまでの古いAndroidアプリ開発の知識がちょっとある
  • テストケースを自分で作れる
  • MaterialDesign万歳

みたいなスキルセットで参加したので、1ヶ月ちょっと働いたあたりで「ちょっと待遇面について話そう」ということになった。そのときした話がこのエントリの元になっていて、待遇面の変化についてはまた別に書く。先に言っておくと時給が3割以上上がった。

どういう仕事をしているかというのはこの前別のブログに書いた。

growgrass.hatenablog.com

読んでみて欲しい人

このエントリは次のような人にとって役に立つかもしれない。

  • チームが大きくなってきてQAを雇いたいなーと思い始めたマネージャー
  • すでにQAと仕事をしていて、実機を使ったテストを依頼する開発者
  • 元々開発やってて初めてQAとしてプロジェクトに加わる人

1. 開発者の事情は不必要に考慮したくない

当たり前なんだけどユーザーの大半は開発側の事情を知らないし、考慮しようとも思わないので、QAとしてはそういう実際のユーザーの気持ちを尊重していきたい。

例えばバグを報告したときに「KitKatではそのAPI使えなくて〜」とか「実装するのめちゃくちゃ難しくて〜」みたいな開発者側の情報は書いてもいいけど、それよりも先に「バグなのか仕様上しょうがないのか」「直すのか直さないのか」を答えてほしいという気持ちがある。

メンバーに誠実であろうとしてロジックとか閾値とかOS仕様を説明したくなる気持ちはすごく分かる。分かるけど私は読み飛ばしていくからな(後述)。

2. テストの方法や質問への回答を明確に書いてほしい

結果的にたまたま偶然開発知識がある人間が参加してしまったけど、QAとして開発知識を持たない人間を雇う利点は客観的なブラックボックステストができるということだと思う。開発側の事情に忖度して「これ変だけど仕方ないか」って考え始めるともう人の手でわざわざ端末操作して目視で確認する意義がなくなる。
あと本来読まなくていいものを読んだり、確認しなくていいものを確認したりするようになると、限られた時間内で上げられる成果が小さくなるので極力やりたくない。

何人かで協力してバグを修正したり新機能を実装していく中で、「これは他のメンバーのために残しておいたほうがいい」と判断した情報をTrelloのカードに追記するのはすごくいいことなのでやってくれていいんだけど、私がいちいち「誰向けの情報か」を判断せずに読み飛ばせるよう、開発者向けの情報とQA向けの情報は明確に区別して記載してほしいというお願いをした。

3. フォーマットは守ろう

ここまでに挙がったことはフォーマットを守ってコメントを書けば達成できるので全然難しいことじゃない。

  • 確認してほしい環境(弊社の場合DeployGateのビルドバージョン)
  • 確認してほしい箇所
  • どうなっていてほしいか(もしくはその逆)

動作確認に必要な情報って基本これだけなので、開発メンバーの間で共有しなければいけない話は<hr>とか入れて区切るとかインデント下げるとか2秒でできる工夫をしてほしい。

以前はTrelloのカードにPull RequestのURLが貼ってあるだけみたいなカードでも動作確認していたんだけどあまりにも精神衛生によくないのと、純粋に効率が悪いので「今後はねーから！」宣言をした。これは具体的に言うと

  1. Pull RequestのMerge元のブランチ名を確認して
  2. ブランチ名から配布パッケージを探して
  3. Pull Requestのコメントを読んで再現手順を確認して
  4. 実機で動作確認をする

という手順で作業をすることになる。最初のステップで既にGitHubを使った開発知識がないと詰むし、PRに再現手順書いてるならそれカードにコピペするだけで私がリンク踏む必要なくなるよね？と念押しした。

ただ弊社環境、CIが止まってビルドされるまで時間がかかることがよくあるので、そういう場合はDeployGateの配布パッケージを書く代わりにブランチ名を書いてもらうようにした。

4. 変な質問をするかもしれないけど実装者を責めているわけではない

「変な質問」というのはほとんどが開発者にとって当たり前であることを確認するような質問で、もちろん実装者を責めているわけではない。実際にあった例でいうと「SMS送信の権限与えてないのにSMSに返信できるのはOKなの？」みたいな話。

人間は良くも悪くも慣れる生き物なので、ずっと同じ機能を実装していると慣れて見落とすことがある。「テスト用の文言を入れたままリリースしてユーザーに指摘される」みたいなミスは最悪だけどいろんな会社のいろんなプロダクトでよくある。そういうミスを防ぐためにPull Requestを送って複数人の目で確認してQAが実機で確認する、というプロセスを踏んでいるので、品質を上げるためだと思ってほしい。

最後に

デザイナーと開発者とQA、なんなら事務方を加えてもいいんだけど、みんな目指すべきゴールは「ユーザーの満足」なので、良いものができるように協力してやっていきましょう。

Android改善プログラミング (SHOEISHA DIGITAL FIRST)

Android改善プログラミング (SHOEISHA DIGITAL FIRST)

入門 Androidアプリケーションテスト

入門 Androidアプリケーションテスト

tl;dr

この日本語版を書いていて思ったんだけど、

みんな目指すべきゴールは「ユーザーの満足」なので

最後のこの部分を見失いがちなプロジェクトが巷にはすごく溢れているんじゃないだろうか。リーダーとか営業とか役員とかホールディングスとか受注元とかの顔色を窺って「いかに無難にそのプロジェクトを終わらせるか」が目標になってしまうケースは今までたくさん見てきた。

なので、こういう「ゴールを見失わないチーム」にいられることはとても幸せなことだし、できれば世の中の全てのチームが(業種問わず)そうなればいいよねと思う。

もちろんこういう気持ちになれるのは金銭報酬とか拘束時間とかの待遇に納得しているからなので、そういう合意を取らずに綺麗な目標だけ押し付けてくる職場は当たり前だけどよくないと思う。