ほんじゃらねっと

ダイエット中プログラマのブログ

「完全自動運転」が待ち遠しいので実現後を想像してみる

f:id:piro_suke:20141104170225j:plain

車の運転って結構めんどくさいんですよね。運転そのものはまあまあ楽しくないこともないですが、やっぱり運転中は集中しないといけないですし、まわりに面白いものがあっても運転してると見ることができないですし。早く自動運転で車が自動的に目的地まで連れて行ってくれるようになってほしいです。それか、専属の運転手がほしいです。

電車で行けって話ですが、子供連れだとやっぱり車がいいんですよね。わーわー騒いでても怒られないですし、サクッとコンビニやトイレに立ち寄ることもできますし、何より家族だけのプライベート空間を確保できるのが良いです。休日の電車とか大抵混んでて座れないですしね。

続きを読む

Node.jsで作成した自動化プログラムをGUI化してより多くの人に役立ててもらおう

プログラマの仕事は、人が行う作業を代わりに行なってくれるプログラムを書くことであり、それはつまるところ「作業を自動化」することだ。

長くプログラマをやってると忘れちゃうけど、

コマンドプロンプトを開いてコマンドを実行するのは、

プログラマ以外にとってはとてもハードルが高い。

作業を自動化するためのツールをGUI化するメリットについて考えてみた。

後半でNode.jsでのGUI化の方法についても紹介する。

GUI化するとメインの処理とは別で画面の作成や入力処理を実装する必要があり、

単純に開発時の作業が増えるのだけど、CLIと比較してそれだけのメリットがあるのか?

まず思いつくことで、一番重要なのは

GUI化することで作成したツールを

プログラマ以外の人が抵抗なく使えるようになるので、

対象ユーザーがグンと増える、ということ。

自動化ツールを必要としているのはむしろプログラマ以外の人たちであると考えると、

CLIスクリプトをソースと一緒に提供して頑張って勉強してもらうよりも、

GUIアプリを提供してそれを使ってもらう方が当然使ってもらいやすい。

もう1つ、CLIツールよりもGUIの方が良いな、と思うのは

「入力パラメータの保存と選択がしやすくなる」、ということ。

例えばリモートのLinux環境やDBを操作するような自動化ツールの場合、

色々な接続先に対して使うので、

接続先アドレスやユーザー名を保存しておき、一覧から選べると使いやすい。

GUI化するとメニュー等でメイン機能以外のサブ機能を持たせやすくなるので、

こういった入力の簡略化がしやすい。

あと出力についても、テキストだけでなく

グラフ等テキスト以外の形式で見せることができるので、

データの内容に適した分かりやすい出力ができる。

Node.jsで作成したスクリプトのGUI化方法

今まで書いてきた記事を見返すと、

どの自動化ツールもGUI化すればより多くの人にメリットを提供できそうなので、

今後は自動化ツールを提供する時は

できる限りGUI化したものを提供するように心がけたい。

GUI化の形としては

  • Webアプリ
  • デスクトップアプリ
  • スマホアプリ

があるけど、自動化ツールを作るならまずはデスクトップアプリだろう。

Javascript/Node.jsでデスクトップアプリを作る方法としては、

「Electron」で作るのがおそらく実績として一番多いんじゃないかと思うのだけど、

ちょうど数日前にGoogleが「carlo」という、

Node.jsアプリをより手軽にGUI化できるライブラリをリリースしたようなので、

今後はこちらも選択肢になりそう。

github.com

まだ試してないので、なにをどこまでできるのか近いうちに検証してみたい。

UIフレームワークを選択する

どういう形でGUI化を行うのであれ、

GUI化する場合はレイアウトとかコンポーネントのデザインを考慮する必要がある。

Node.jsベースのアプリをGUI化する場合、

WebアプリだろうがElectronだろうがcarloだろうが、

UIはHTML、CSS、Javascriptで作成するので、

ハイブリッドに使えるUIフレームワークを1つ習得しておくと使い回しが効いて良い。

大抵はAngular/React/Vueのいずれかのフレームワークと、

それに対応したUIフレームワークを組み合わせて使う感じだと思う。

私は今のところ「Vue.js + VuetifyJS」がお気に入り。

https://vuetifyjs.com/ja/getting-started/quick-startvuetifyjs.com

VuetifyJSはアプリ風レイアウトができること、

画面サイズによってレスポンシブにレイアウトを変更できること、

コンポーネントが十分に揃っていることが気に入ったポイント。

スマホ用WebアプリとElectronアプリを作ってみたけど、

どちらもアプリの形式に関わらずサクッと書けた。

他にもBulmaとかOnsenUIとか、色々フレームワークがあるので、

試してしっくりくるものを選ぶのが良いと思う。

bulma.io

onsen.io

おわり

GUI化に慣れていないうちは、

考えることが多くて「めんどくさ...」となることが多いけど、

何個か作ってるうちに慣れるはずなので頑張ろう。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:mio
  • 発売日: 2018/05/29
  • メディア: 単行本(ソフトカバー)

Windowsでタスクスケジューラを使用せずにnode.jsスクリプトを定期実行する

会社の自分のPC(Windows)で何かを定期的に実行したいときは

だいたいPythonなりnode.jsなりでスクリプトを書いて

タスクスケジューラに登録しておく。

のだけど、

タスクスケジューラは未ログイン時に実行しようとすると

ログインアカウントを登録しておく必要があったり、

パスワードを変更した時に更新を忘れて実行に失敗しまくってたり、

そのログイン失敗のせいで社内ネットワークから閉め出されちゃったり、

色々と困ることがある。

Linuxのcrondと同じような仕組みができないか、と探してみたら

「pm2」と「node-cron」の組み合わせで実現できそうだったので、試してみた。

続きを読む

Web Speech Synthesis APIを使って、正月のかるた読み上げ無間地獄タスクを自動化する

f:id:piro_suke:20170104012805j:plain

正月休み、帰省した実家で娘たちがかるた遊びにハマり、

ほぼ毎日祖母やいとこと遊んでいた。

楽しそうだし、瞬発力やら記憶力やらが鍛えられそうで大変良い。

大変良いのだけど、

かるた遊びの困ったところは、プレイヤー以外に読み手が必要だというところで、

その際はだいたい近くでダラダラしている人間(私)が呼ばれて参加させられる。

最初はこちらも娘達に相手をしてもらえるのが嬉しいので喜んで参加するのだけど、

毎回同じ内容を読み上げるので、何回かやっているとげんなりしてくる。

しかしダラダラしている手前、断るのも難しい。

そこで、「繰り返し作業は自動化や!」と

「テキスト読み上げ」でググったら出てきたWeb Speech Synthesis API を使って、

かるた自動読み上げツールを作ってみた。

続きを読む

自動化のための「トリガー」について考える

f:id:piro_suke:20160901012222j:plain

何かしらの作業を自動化する際、

その作業を起動する「きっかけ(イベント)」を何にするかを考える必要がある。

例えば定期的に実行するなら、「曜日」や「時間」がきっかけになるし、

自分が実行したい時に実行するなら(それを自動化と呼ぶかどうかはさておき)

「手動実行」がきっかけになる。

この「きっかけ」をうまく設定できるかどうかで、

期待通りのタイミングで作業が行われるかどうか、

無駄な負荷を避けられるかどうかが決まるので、

作業の自動化において結構重要な要素となる。

続きを読む

ボケてきたのかタイムカードの打刻を忘れてしまうので、打刻漏れ防止用チェックプログラムを作成した

f:id:piro_suke:20160620020919j:plain

毎朝出社時に社員カードで入室し、

入室したのと同じカードで出勤打刻をするのだが、

入って数歩のところにタイムレコーダーが置いてあるにも関わらず、

打刻が漏れることがある。

どうやら、

雨の日に途中で傘を置いたり(傘立てはドアとタイムレコーダーの間にある)

誰かと会って話しながら入室したりすると

ルーチンが壊れて打刻を忘れてしまうことがあるようだ。

どれだけ変化に弱いルーチンなんだ、という話だが、

ともあれ打刻が漏れると手続きが面倒なので、

自動チェックの仕組みを考えた。

続きを読む

WindowsのタスクスケジューラからGruntスクリプトを起動する方法

f:id:piro_suke:20160422003356j:plain

どうせ自動化するなら完全自動化したいよね、

ということで今回は作成したGruntスクリプトを

Windowsの起動時や毎日の決まった時間に実行できるように

タスクスケジューラに登録する方法を紹介する。

この記事はGruntを実行する環境が整っていることを前提としているので、

未インストールの方は下記の記事を参考にしていただきたい:

blog.honjala.net

続きを読む

一日使い続けるだけで通信速度が低下する古いルーターを毎日再起動させるNode.jsスクリプト

先日iPad miniとiPhone 6sを導入してから、

うちの古いルーターが2日間隔くらいで再起動しないと

通信が遅くなってネットに繋がらなくなるようになった。

どうやら新しいiPadとiPhoneはWi-fi環境だとガシガシ通信するようで、

ルーターのキャパをすぐに超えてしまうみたいだ。

ルーターを新しくすればすぐに解決しそうな話だが、

とりあえず1日1回再起動すれば快適に使えるようなので、

ルーターを再起動するスクリプトを書いてみた。

続きを読む

プログラミングはしたくないけど自動化はしたい人のための、Grunt.jsによる作業自動化入門

前回書いたNode.js入門記事の続き。

blog.honjala.net

前回から引き続き、

いかにプログラムの勉強無しで自動化できることを増やすか、

もとい、

いかに他部署のノンプログラマに自動化ツールを使わせて自分への作業依頼を減らすか、

をマイテーマに少しずつ情報をまとめていく。

Node.jsを紹介しただけでは、「Javascript…難しそう。いつかやるわ。」

となりそうなので、

今回はプログラミング要素最小限で使えるGruntを紹介する!

続きを読む

PythonでExcelの表からINSERT用SQLを生成して初期データ作成を楽にする

職場はメイン言語がJavaなので、プロジェクトでPythonを使う機会は ないのですが、キャプチャを撮ったりExcelを操作したりする作業を 「こっそり自動化」するスクリプトPythonで書いたりしています。

最近はSE作業で何かとExcelを使うことが多いので、 Excel作業の自動化をいろいろと模索しています。

PythonExcel操作できるライブラリはいくつかあって、 xlwingsExcelPythonなんかが話題になっていたので 調べてみたのですが、後々他のメンバーに作成した ファイルを共有したりすることを考えると、 Excelと切り離して処理が書ける方が良さそうです。 (xlwingsはVBAPythonを呼び出す必要があり、ExcelPythonはアドオンを入れる必要がある)

結局、オーソドックスなxlrdxlwtを使っています。

今日は以前から面倒だと思っていた、 初期データ作成用INSERT文を作成するスクリプト、 というか関数を作りました。 Windows環境で使うことを想定しています。

下記のような、1行目がテーブルのカラム名で、 2行目以降がデータになっているシートを読み込んで、 行ごとにINSERT文を作成して別ファイルに出力します。

ID NAME ADDRESS
1 山田 大阪府
2 岡田 東京都

出力先ファイルやテーブル名は引数で指定します。 複数のシートを一括処理可能です。

使用例:

output_insert_sqls('テストデータ.xlsx', 'C:/Users/test/Desktop/insert_data.sql', 
    [   
        '会員一覧' 
        ,'商品一覧' 
    ],  
    [   
        'users'
        ,'products'
    ]   
)

他にも、CREATE TABLE文やDELETE文を生成する関数を追加すれば、 色々と作業を楽にしていけそうです。

セルを処理している部分は文字列とfloatしか考慮しておらず、 荒めのコードになっているので、またブラッシュアップしていきます。

unicode_literalsは今回初めて使い、どういう原理か 全く分かっていませんが、とりあえずこれをインポートすることで Windowsのパスが正しく認識できるようになりました。

迷惑をかけないExcel

迷惑をかけないExcel

Node.jsとwebshotパッケージでWebサイトのスクリーンショットリスト作成を自動化する

Web開発を仕事にしていると

「マニュアルやプレゼンに使うのでWebアプリのスクリーンショットをくれ」

と依頼されることがよくある。

ChromeのFireshotのようなブラウザの拡張機能を使ったりすれば

1画面ずつ撮っていけるのだけど、

chrome.google.com

たくさんのページのスクリーンショットを、

変更がある度に撮り直すのは面倒なのでなんとか自動化したい。

「node-webshot」モジュールを使う

探してみると、

Node.jsの「node-webshot」パッケージを使えば

手軽にスクリーンショット撮影スクリプトが作れそうだ。

www.npmjs.com

Node.jsでWebKitブラウザの機能を利用可能にするPhantomJSの

スクリーンキャプチャ機能をラップしたものらしい。

PhantomJS | PhantomJS

PhantomJSはブラウザで行っている処理を

色々自動化するのに使えそうなので、また調査してみよう。

「node-webshot」パッケージは

下記のnpmコマンドでアプリにインストールできる。

npm install webshot --save-dev

URLのリストを作って、連続でスクリーンショットを撮るスクリプトを作成する

早速このwebshotパッケージを使って

スクリーンショット自動撮影スクリプトを作ってみる。

URLのリストを読み込んで

各URLのスクリーンショットを保存するようなものを作っておけば

画面に変更があってもコマンド1つで再作成できるので良さそうだ。

下記のようなスクリプトを作成してみた。

capture_screen.js

var webshot = require('webshot');
var fs = require('fs');

// 保存ファイル名とURLのリストを作成する
var baseUrl = 'http://test-domain.com';
var links = { 
    '01_login': baseUrl + '/login.html',
    '02_top': baseUrl + '/top.html',
    '03_shohin_list': baseUrl + '/shohin_list.html',
    '04_shohin_edit': baseUrl + '/shohin_edit.html'
};

// 各URLのスクリーンショットを指定したファイル名で「shots」フォルダに保存する
Object.keys(links).forEach(function (key) {
    var href = links[key];
    webshot(href, 'shots/' + key + '.png', {}, function () {}); 
}); 

URLリストの部分は撮影したいWebサイトのアドレスに合わせて変更する。

今回はデフォルトの設定で撮影を行っているが、

生成される画像のサイズ等はwebshot関数のオプションで指定できる。

サーバサイドJavaScript Node.js入門 (アスキー書籍)

サーバサイドJavaScript Node.js入門 (アスキー書籍)

  • 作者: 清水俊博,大津繁樹,小林秀和,佐々木庸平,篠崎祐輔,高木敦也,西山雄也,Jxck
  • 出版社/メーカー: KADOKAWA / アスキー・メディアワークス
  • 発売日: 2014/02/27
  • メディア: Kindle版
  • この商品を含むブログを見る

Geb(GroovyのSeleniumライブラリ)でのWeb画面キャプチャが簡単でめちゃ便利

自社のホームページやWebシステムの画面キャプチャを保存する作業は、 それほど頻度は高くないけどいざやるとなるとめんどくさいものだ。

Seleniumでどうにかしようと調べてみたら、GroovyからSeleniumを 扱うためのGebというライブラリが便利そうだったので試しに作ってみたら、 思ったより簡単にできた。

auto_capture.groovy

@Grab('org.gebish:geb-core')
@Grab('org.seleniumhq.selenium:selenium-firefox-driver')
@Grab('org.seleniumhq.selenium:selenium-ie-driver')
@Grab('org.seleniumhq.selenium:selenium-chrome-driver')

import geb.Browser
import geb.Configuration
import org.openqa.selenium.firefox.FirefoxDriver
import org.openqa.selenium.ie.InternetExplorerDriver
import org.openqa.selenium.chrome.ChromeDriver
import org.openqa.selenium.WebDriverException

System.setProperty('webdriver.chrome.driver', './chromedriver.exe')
System.setProperty('webdriver.ie.driver', './IEDriverServer.exe')

//ブラウザ起動時の設定
Configuration conf = new Configuration()
conf.baseUrl = '.'

//起動するブラウザを選択。Firefoxが無難。
conf.driverConf = 'firefox'
//conf.driverConf = 'chrome'
//conf.driverConf = 'ie'

//キャプチャ画像を保存するフォルダを指定
conf.reportsDir = new File('./captures')

def loginUrl = 'http://gebtest.jp/'
def loginId = 'testlogin'
def loginPw = 'testpw'

def clientUrls = [
    top: 'http://gebtest.jp/top/',
    shohin_list: 'http://gebtest.jp/item/itemList',
    shohin_detail: 'http://gebtest.jp/item/itemDetail',
    cart: 'http://gebtest.jp/cart',
    chumon: 'http://gebtest.jp/chumon'
]

//ここからメイン処理。ブラウザが起動して処理を順次実行する
Browser.drive(conf) {
    //goで指定したURLを開く
    //クローズドなサイトの場合は最初にログイン処理を実行しておく
    go loginUrl
        report 'login_page'
        $('form', id: 'login').id = loginId
        $('form', id: 'login').pw = loginPw
        $('.login_btn').$('a').click()

        //URLのリストをループで回す
        for (url in clientUrls) {
            //別のURLを開く
            go url.value

                if (url.key != 'top') {
                    //Javascriptの処理を呼び出すこともできる!
                    //ここではキャプチャに不要な要素を非表示にしてる
                    js.exec('return \$('#sub_navi').hide();')
                }

            //report関数で現在開いている画面が引数をファイル名としてreportsDirで指定したフォルダに保存される
            report url.key
        }

    //終了後にブラウザを閉じる場合は下記のコメントを外す
    //quit()
}

Firefox以外のブラウザ(ChromeやInternetExplorer)を使用する場合は ドライバアプリを入手する必要がある。下記のSeleniumの本家サイトからダウンロード可能。 http://www.seleniumhq.org/download/

試してみたところ、 Firefoxは標準対応だけあって、サクサク問題なく動く。 Chromeは動くけどやたら動作が遅かった。 IEはうまく動作しなかった。IE11ではうまく動かないとかどこかの掲示板に 書いてあったけど、未確認。

Gebのドキュメントはこちら http://www.gebish.org/manual/current/

上記のスクリプトをベースに、 キャプチャの必要なURLのリストを作成し、 Javascriptで画面を調整する処理を書けば、 手作業よりも楽にキャプチャ画像を用意できると思う。

目の前でブラウザが自動で立ち上がって動作するのを見るのは、なかなか楽しい。

実践 Selenium WebDriver

実践 Selenium WebDriver

日経新聞に自社情報が掲載されたら通知されるようにする

日経新聞を読むことが社会人のたしなみと 考えられている会社は多いと思う。 うちもそうなのだけど、ついつい流し読みになってしまって 重要な記事を見逃し、上司と話が合わない、なんてことがよくある。

そこで役に立っているのが、日経新聞電子版の「キーワード管理」機能。 ここに検出したいキーワードを登録しておくと、メールで通知してくれたり、 電子版アプリで強調表示してくれたりする。

自社名とか、自社の業界、関連分野に関するキーワードを登録しておくと、 見逃す心配なくさらーっと読み流せる。

http://www.nikkei.com/

池上彰の新聞活用術

池上彰の新聞活用術