rubygemづくりの為のselenium実験

やったこと

  • rubygemづくり
  • テーマ、海外の人が好きそうな漢字をslack絵文字に登録するgem
  • webの操作にseleniumを試す

selenium実験

slackカスタムページの表示、ログインはできた。 inputタグの取得と画像のアップロードが未達。

require 'selenium-webdriver'
#chrome用で
driver = Selenium::WebDriver.for :chrome

#DOMが生成されるまで読み込みを待つ
driver.manage.timeouts.implicit_wait = 10

#カスタム絵文字のページへ
work_space_name = "hoge-kuri"
driver.navigate.to "https://#{work_space_name}.slack.com/customize/emoji"

email = "hoge@gmail.com"
password = "hoge1234"

#loginする
driver.find_element(:id, "email").send_keys(email)
driver.find_element(:id, "password").send_keys(password)
driver.find_element(:id, "signin_btn").click

#inputタグを拾う
emoji_img = driver.find_element(:id, "emojiimg")
emoji_name = driver.find_element(:id, "emojiname")

text = "hoge"
img = "/images/test.png"

emoji_img.send_keys(img_path)
emoji_name.send_keys(text)

まとめ

nokogiriは使った事があったがseleniumは初。簡単にウェブページを操作出来てのめりこんだ。やり過ぎてBANされないように適宜sleepなどを使ってサーバーに負荷をかけないように気をつける。 DOMが動的に変化する場所のセレクトが上手くいかなかった。そこを改善していきたい。

Macバックアップ自動化 〜ポストTime Capsule〜

やったこと

  • 自動バックアップ構築(今回はローカル)

参考:TimeCapsuleが生産終了になったので、Wifiルーター + ネットワークHDD(NAS)に移行しました - give IT a try

重要テーマ

  • TimeCapsuleが生産終了
  • セキュリティ面やWifi規格のサポートを考慮すると今後別手段が必要

ポイント

  • バックアップはまめにとる必要があるが面倒

 自動化前提(Time Mahine利用)

  • 有線キライ

  • 安全性を増すため複数バックアップ

 クラウド(メイン) + ローカル(保険) -> クラウドは次回に

構成

ハードを探し出すとキリがないのでブログを参考に

f:id:yasuaki6:20180827195642p:plain

ONUはNURO契約時のデフォルト。nuro光ケーブルが繋がる

ルーターWi-Fiを飛ばす。ASUSは狙い撃ちで電波をとばせるそう

HDDはルーターに繋ぐ事でUSB記録装置が無線で使える

あとから気づいたのですが、RT-AC68Uは普通の外付けHDDをUSB接続するだけでTimeMachine対応のNASを構築できるみたいです。

との事できちんとブログを参考に手頃なHDDに♪ ここも探し出すとキリがないので^^;

セットアップ

そして速度チェーック

は、速い💦

f:id:yasuaki6:20180827202915p:plain

HUAWEIONUでもそこそこ早かったけど、 ASUSの5Gに繋いだらこんな顕著な結果に💦 無線でコレはなかなかなのでは。

ブラウザでルーターの設定画面にいくと Time Machineのメニューがあり非常にわかり易い💡 f:id:yasuaki6:20180827013518p:plain

GUIでポチポチHDDを選択するだけで簡単にルーター側の設定が完了 f:id:yasuaki6:20180827201250p:plain

  • Time Machineの設定(mac側)

"Time Machine環境設定"でASUSサーバーをディスクに選択し ルーターで設定したユーザとパスを入力すれば設定完了 f:id:yasuaki6:20180827201332p:plain

バックアップしてみた

初回は200GB以下で、10時間程かかったが、 二回目以降は数分でバックアップが取れていた(勿論自動で)👍

まとめ

Time Machineで自動化&無線でバックアップ環境が整ってTime Capsuleの代替に良さそう。 ASUSルーターの性能が思いの外良く、ひとまずバックアップを取るだけなら問題なさそう。 次回はコレで復元をしてみる

ルーター、HDD合わせて2万くらいで手頃。セットアップも簡単で10〜20分で済み手軽。 このルーターは他にも色々クラウド機能等があるようなのでいろいろ弄ってみると面白いかもしれない。

ただ今回RT-AC68Uがアマゾンで注文してから珍しく20日もかかったので、品薄なのかも。ASUSの新しいモデルの方が入手し易いかもしれない。

rakeの概要

やったこと

参考資料を読む、サンプルのハンズオン

参考資料

rakeについて

  • コマンドラインツールを扱うライブラリ
  • Ruby-Makeの略でRubyで何かを作ったり、定型的な処理をしたいときに役立ってくれるツール
  • Rakefileに実行内容を記述しrakeコマンドで呼び出す

taskについて

  • タスク名と依存(事前)タスクを設定
  • タスクに”作業”を割り振る
  • すでに生成されているファイルなどがあってもタスクは実行される
  • defaultタスクは予約語
# 例
task "タスク名" => ["依存タスク群"] do
 作業内容
end
# rakeコマンド実行
$ rake タスク名

# deafultに設定してあればtaskの指定を省略出来る
$ rake

ファイルタスクについて

  • ファイル生成特化タスク
  • taskと同様に名称、依存ファイル、作業内容を定義する
  • taskと違い、差分だけビルドする(時短、リソースの合理化)
  • Kernel#fileのインスタンスメソッド

    よく使うメソッド

  • name - タスクの名称。ファイルタスクの場合、ファイルパス。
  • prerequisites - 依存先であるタスク名の配列。
# 例1
file "ファイル名" => ["依存ファイル群"] do
 hoge
end
# 例2 ブロック引数にはタスクそのものを渡す事が出来る
file "hoge" => ["fuga", "foo"] do |t|
  puts "タスク名は#{t.name}、依存ファイルは#{t.prerequisites.join('')}です"
end

ディレクトリ生成機能

  • directoryメソッドを使う
  • ブロックは追加出来ない
# taskでそのまま書くと
task "mkdir" do
  mkdir hoge_dir
end
# directoryを使う
directory hoge_dir
# ネストしていても一発で作成できる
directory "./nest1/nest2/dir"
タスクの説明文

タスクの上に書く

desc "hogeしてくれるタスク"
task "hoge"

rake -tで一覧を確認

★タスクの動的生成

rubyで書ける!DSLによる賜物とのこと
1.upto(5) { |i|
  desc "task no.#{i}"
  task "task_#{i}" do |t|
    puts "Invoke #{t.name}"
  end
}
$ rake -T
rake task_1  # task no.1
rake task_2  # task no.2
rake task_3  # task no.3
rake task_4  # task no.4
rake task_5  # task no.5

Cプログラム実行とコンパイル

gist2b85770c470a10d1f9052e70c12b5145

本日のお試しツール

markdownの下書き用にBoostnoteを導入。 Electron謹製で気になっていた。 リニアに出るキレイなプレビューにニンマリ(´∀`) ドキュメント書き上達したい。

所感

久々にrubyを触った( ´∀`)

rakeはパワフルなツールで奥深いと思った。

rubyの頭に切り替えるため、 夏休みに入ったら途中でやめてしまったチェリー本を終わらせたいと思う🍒 それでまた言語仕様の理解を深めたい。

css tutorial続き(細かい作り込み、アイコン、表、行間等)

やったこと

気づき

  • Bracketsをメインに作業したが、codepenでのアイコン表示やボタンの色等、両者間で微妙に違いやズレがあった(プレビューブラウザは共にchrome
  • アイコン作成で余分な部分を上塗りで見えなくする為に大きな余白を取らなければいけなかった。
  • formのデザインはアプリの入力部分となり、使用感(UI・UX)に大きな影響を与える重要な所だなと再認識した。いかにツールとして手間をかけずに使えるようにするかを考える醍醐味があると感じた(デザイン=問題解決

見た目は似せることが出来たけれども、、

  • タグかクラスかはたまたIDで指定するのか。。
  • widthかflex-basisで指定するのか。。
  • remか%かpxで指定するのか。。  などすごく悩みながら進めた。個々のケースでどれがベターなのかがまだまだ😱

ツールについて

リニアに見た目がわかるエディターを探してとりあえずBracketsを使ってみたが、他に良いものがないか質問すればよかった。

所感

とにかく難しい。やり方もいろいろあり、セレクタがきちんと出来ていなかったりしてもエラーも出なかったりなので非常に難しく感じた。弄りながらまぐれで出来たのと違い、狙って計算して出来るようになるのには相当な経験が必要だと思った。 今回みたいな1ページだけ似せるのとは違い、サイトやアプリ全体でのデザインを統一する場合は緻密に計算してつくる必要があると学んだ。

flexboxでレイアウトを決めてみた

やったこと

レイアウトと色分けで全体像がでてきた

雰囲気が出てきた💫 スクリーンショット 2018-08-03 1.55.21.png

flexboxでcontainer化して配置

mainのarticleはhtml上でasideのバナーより先に記述されているが、 orderを使って右に来るように配置 スクリーンショット 2018-08-03 2.05.28.png

所感

widthを使わずにflex: 1;で横幅いっぱいに広がるのが便利だった。 逆に画像はwidthで指定しないとだめだと気づくまで手こずった。 cssの苦手意識があったのはfloatが苦手だったからかもしれないと気づく。 flexboxだとレイアウトがパスルのようにはめられたのでfloatより簡単に感じた。

コメントを頂きました

@machidaさんより f:id:yasuaki6:20180803211546p:plain

flexboxの"order"がややこしかったので図解してみた

やったこと

  • flexboxについて調べ学習した
  • orderプロパティについて分かりづらかったのでこれだけ図解でまとめた

参考:order使用例

orderプロパティとは

  • 個別のアイテムの順序を指定出来る
  • アイテムはデフォルトでは0の値を取り、正や負の整数値を設定する👈重要❗

前提

1~10の要素についてCSSのみで並べ替えを行う

基本html

<div class="samplebox" id="flex1">
        <p class="p1">ボックス<strong>①</strong></p>
        <p class="p2">ボックス<strong>②</strong></p>
        <p class="p3">ボックス<strong>③</strong></p>
        <p class="p4">ボックス<strong>④</strong></p>
        <p class="p5">ボックス<strong>⑤</strong></p>
        <p class="p6">ボックス<strong>⑥</strong></p>
        <p class="p7">ボックス<strong>⑦</strong></p>
        <p class="p8">ボックス<strong>⑧</strong></p>
        <p class="p9">ボックス<strong>⑨</strong></p>
        <p class="p0">ボックス<strong>⑩</strong></p>
    </div>

例1

スクリーンショット 2018-07-29 23.12.24.png

例1  ”row”で並べ、orderは特に何も指定しない
#flex1 {
    display: flex;
    flex-direction: row;
}

例2

スクリーンショット 2018-07-29 23.13.12.png

例2  単純な逆順であれば”row-reverse”を使う
#flex2 {
    display: flex;
    flex-direction: row-reverse;
}

例3

スクリーンショット 2018-07-29 23.46.52.png

例3  8番目の要素(p8)のみ−1とする
#flex3 .p8 {
    order: -1;
}

★並べられた要素はデフォルトが”0”で、ひとつの要素を−1とすると、それが一番先頭になる(ややこしい)

例4

スクリーンショット 2018-07-30 0.07.17.png

例4 2つの要素(p4,p6)を指定し、それぞれ1,2とする
#flex4 .p4 {
    order: 1;
}
#flex4 .p6 {
    order: 2;
}

★例によって0以上の整数にした要素は末尾に移動する。元の順序も残るからか、1、1の指定でも4→6の並びになる挙動を確認できた(追記:正しくは同順の場合HTML記述順になる) サンプルページではなぜか10、11指定だった(?_?)

例5

スクリーンショット 2018-07-30 0.19.55.png

例5      1〜10で任意の整数を当て並べ替える(寧ろ分かりやすい😃)
#flex5 .p5 {
    order: 1; <=0でも可
}
#flex5 .p2 {
    order: 2;
}
〜〜  中略  〜〜
#flex5 .p1 {
    order: 9;
}
#flex5 .p6 {
    order: 10;
}

所感

いわゆる配列のインデックスとは考え方が違うので、ややこしかった。 なんとなく数字を入れればそれっぽく動くが、きちんと理解しないと後で困ると思った。 実際にorderで自由に並べ替えるメリット、使い所はどういう所なのかはピンと来なかった。

追記

使い所として、HTMLで読み込ませる順序とレスポンシブ対応に便利とのこと👉なるほど❗