a2 Tech blog

試したこと・調べたこと・感じたことを発信するITエンジニアの日記です。仕事とは直接関係ないけど興味あることを模索していきます。

Coded UI Testをコマンドラインから実行する

f:id:ninna2:20170409015346j:plain:w360

Coded UI Test をVisual Studio で実装して、そのまま実行するケースがもちろん多いとは思いますが、夜間にバッチ的に実行したり、定期的に実行するにはVisual Studio以外から実行する方がいいでしょう。

もっというとjenkinsなどのCIツールで勝手にサイクル回して実行してくれる用にできればいいのですが、いきなりそこまでもっていくのも難しいので1歩ずつ進めていきたいと思います。とりあえず、コマンドラインからCoded UI Testを実行 してみようと思います。

続きを読む

WordPressにGistでソースコードを綺麗に表示する

f:id:ninna2:20170410203916p:plain

※過去、Wordpressでブログを運用していたものをそのまま移管しています。現在ははてなブログでブログの執筆をしております。

WordPressソースコードを載せる際に皆さんどうしていますか?色々試行錯誤した結果、Gistを使うと綺麗にソースコードが出せるので、その方法を記載しておこうと思います。操作は全てiPhoneで行なっています。PCだともっと簡単に出来るかもしれませんがiPhoneで極力やってみようっていう精神で進めていきます。

Gistってなに?

Gist とは、GitHub が提供する機能の1つで、メモや断片的なコードを格納できるものです。もちろん、バージョン管理もしてくれます。GitHub に載せるまでもないけど、誰かと共有したいとか、手軽に使えるのが特徴です。Private機能もあるので、公開したくないものも載せれます。ただし、URLが知られると見えちゃいますので完全なPrivateではないので注意が必要です。

Git Client アプリ

GistはGitHubのサービスの1つですので、GitHubにアクセスするためのクライアントソフトが必要です。今回は、CodeHubを使います。

CodeHub - A Client for GitHub

CodeHub - A Client for GitHub

  • Dillon Buchanan
  • 仕事効率化
  • 無料

Working Copy というアプリを使おうかと検討していたのですが、本格的に使うには、お金がかかるので一旦保留しました。本気で Git を使うようになったら導入を考えます。 Working Copy + Textastic の組み合わせがiPhone開発では1番という記載も見かけるのでいつか使ってみたいです。

Gist にソースコードを公開する

WordPressソースコードを載せる際には、まずGistにソースコードをアップします。 CodeHubを起動して、GitHubにログインします。サイドメニューにある"Gists"の中の"MyGists"を選択して開きます。

f:id:ninna2:20170409004551p:plain:w360

初回は何もないよ(There are no Gists)って表示されると思うので、右上のプラスボタンから追加します。Descriptionを入力して、ファイルを追加します。ファイルのタイトルとコンテンツ(今回はHelloWorld.htmlの内容を貼り付けました)を入れて、Saveします。そうすると、Gistが作成されます。

f:id:ninna2:20170409004554p:plain:w360

Gistでの準備はここまでです。この公開したいソースコードWordPressから参照するようにしていきましょう。

WordPressプラグイン(oEmbed Gist)を導入する

WordPress からGistを参照するのですが、そのためのプラグインを導入しましょう。プラグインを導入しないでできる方法もあるのですが、色々、触らないといけなくなるので、今回は簡単な方法で済ませてしまいます。プラグインとしては、oEmbed Gist というものを使用しましたので、WordPressプラグインの新規追加から検索してインストールし有効化します。

記事の中から参照する

さて、プラグインを導入できたら、実際に記事内部にGistで公開したソースコードを表示して見ましょう。CodeHubを起動して、公開したい"My Gist"を表示してください(先ほど作成したHelloWorld.htmlですね)。右上のメニューから、"Show in GitHub" でブラウザで開きます。

f:id:ninna2:20170409004557p:plain:w360

Mobileでの表示の場合、Mobile版の表示になってしまい目的の操作が出来ないので Desktop表示に切り替えます。右下の"Desktop Version"から切り替えます。

f:id:ninna2:20170409004600p:plain:w360

f:id:ninna2:20170409004603p:plain:w360

右上でぐらいにある"Embed"に公開用のURLが記載されています。そのURLをコピーしてWordPressの記事に貼り付けてあげれば、Gistで公開したソースコードが綺麗に出ます。

First Gist

GistにソースコードをアップしてWordPressから参照するという流れで、問題なく出来ることが確認できました。ソースコードWordPressに貼りたい時の1つの手として参考になれば幸いです。

iPhoneだけで持ち歩けるコーディング環境を作る!外部ライブラリ編2

f:id:ninna2:20170409135103j:plain:w360

前回は、CDN経由で外部ライブラリであるBootsrtapを使えることを確認しました。開発を行う上で、CDNに全て揃っているわけないですし、そもそも自分が作成したJavaScriptはどうするの?ってことになりますので、今回は自身の中のライブラリを参照してみたいと思います。

プログラミングの実行環境は、引き続き、iPhone6、MS Universal Mobile Keyboard(bluetoothキーボード)、Textastic(エディタ)です。

この環境がかなり持ち運びが気軽で気に入って行ってきました。カフェでもどこでも持ち出してプログラミング出来ますしね。ちょっと遠目から見たら変な人に映っているかもしれません。

準備

iPhoneでプログラミングを始めるための準備は、過去記事に書いていますので参考にしてください。今回は、HelloWorld3という事で進めていきますので、ディレクトリとindex.html の作成まで作っておきます。

ninna2.hatenablog.com

外部ライブラリのダウンロード

前回はCDNを利用しましたので、モジュールのダウンロードの必要はなかったのですが、今回は外部ライブラリをダウンロードして取り込んでいきます。今回もBootstrapを例にします。順番に必要なものをダウンロードしていきます。

まずは、Bootsrtap本体ですね。Bootsrtapのダウンロードサイトは下記です。

v4-alpha.getbootstrap.com

f:id:ninna2:20170409004545p:plain:w360

zip形式ですので、解凍しないと使えませんね。意外とこの解凍にはまりました。色々試行錯誤の結果、下記の方法に行き着きました。参考にして見てください。

ダウンロード画面で、”その他”を選び、"Textasticで読み込む"を選択します。そうすると、Textastic の Local Files に zipファイルがダウンロードされるので、それを選択するとTextasticが解凍してくれます。解凍が完了したら、その中から必要なもの(今回はbootstrap.min.cssとbootstrap.min.js)を iCloud側に Move してあげるというわけです。直感的じゃないですね。iPhoneならではのめんどくささではないですかね。他にいい方法あれば誰か教えてください。

f:id:ninna2:20170409004917p:plain:w360

f:id:ninna2:20170409004921p:plain:w360

f:id:ninna2:20170409004924p:plain:w360

同じように、JQuery と tether もダウンロードします。JQuery は公式サイトから、tether は GitHub から取ってきました。結構色々な所から情報を集めるのが iPhone だと大変かもしれません。

jquery.com

github.com

最終的に、このような構成になりました。

HelloWorld3 - css – bootstrap.min.css - js – bootstrap.min.js – query-3.1.1.min.js – tether.min.js - index.html

index.html の修正

index.html の CDN参照を変更します。変更箇所は、ダウンロードした Bootstap のCSS参照と JavaScript参照、JQueryへの参照、tetherへの参照の4箇所です。それぞれ相対パスでファイルの配置先を見るように変更します。

変更後のソースコードは下記のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    
    <title>Welcome</title>
  </head>
  
  <body>
    <p class="text-primary">Hello World!!</p>
    
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/tether.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
  </body>
</html>

実行してみる

あとは、実行して見るだけです。編集画面のメガネボタンをポチッと押してみましょう。色が変わった HelloWorld が表示されました。

f:id:ninna2:20170409004621p:plain:w360

ちゃんとローカルのファイルを見てくれているようです。ということで、これでJavaScriptなどもガリガリ書いていっても読み込めることがわかりました。一通り、できることの確認はできたので、iPhoneだけで、HTML/CSS/JavaScriptのプログラミングを始められそうです。

iPhoneだけで持ち歩けるコーディング環境を作る!外部ライブラリ編

前回は iPhoneでプログラミング にチャレンジという事で、簡単なHTMLを作成しました。今回は、プレーンなHTMLだけではつまらないので、BootStrap を用いて少しカスタマイズしていきたいと思います。外部ライブラリがちゃんと読み込めるかの確認です。

プログラミングの実行環境は、iPhone6、MS Universal Mobile Keyboard(bluetoothキーボード)、Textastic(エディタ)です。過去記事にMS Universal Mobile Keyboardについて書いてます。

ninna2.hatenablog.com

続きを読む

iPhoneだけで持ち歩けるコーディング環境を作る!

f:id:ninna2:20170409135133j:plain:w360

外にいてふと隙間時間を見つけた時にプログラミングできたらなぁというのが、そもそもの願望です。ITエンジニアやっているので、常にパソコンを持っている時って思われがちですが、昨今セキュリティがうるさいので、持ち歩いていないことの方が多いです。会社行くのに、わざわざ自分のパソコンを持て行くのも重たいし・・・

常に持っている iPhoneでプログラミング をやってみようというのが、今回の趣旨です。完全にもう趣味の世界です。どこまでできるのかチャレンジです。電車に揺られている時に浮かんだアイデアをささっと試してみる、夢のようですね。

必需品

必需品としてまず、iPhoneもしくはiPad本体。できるだけ画面のでかいものが良いはずです。と言いつつも、私はいまだ iPhone6 です。ちょっと古いですね。もう2年以上使ってます。電池の持ちはかなり悪くなってきました。

次に、モバイルのbluetoothキーボード。これがないとおそらく生産性が100倍変わってきます。私は最近購入した MicrosoftUniversal Mobile Keyboard を使用しています。こいつの虜です。私の使用した感想は過去記事に書きました。参考にしてください。

ninna2.hatenablog.com

ソフトウェア(アプリ)

プログラムはメモ帳さえあればどこでもできるよっていう派の人もいますが、さすがにそれはいまどき辛すぎるので、プログラムを書くためのエディタは導入したいところです。こいつの出来次第で生産性が100倍変わってきますので、有償でも納得のいくものを選びたいと思います。世の中の他の方々が色々評価をしてくれていたりするので、それを参考にしつつ、いくつか使ってみたりして、Textastic Code Editor に落ち着きました。¥1,200は少し高いですが、機能を考えれば、必要な出費だと思っています。今後使わないと元とれないのでガンガン使っていきたいと思います。

Textastic Code Editor 6

Textastic Code Editor 6

  • Alexander Blach
  • 仕事効率化
  • ¥1,200

code syntax もやってくれるし、Safari から見ることもできるから必需品です。

f:id:ninna2:20170409004707p:plain:w360

iPhone で “Hello World

やっぱり始めは、Hello World でしょう。ということで、HTMLでHello Worldをやってみます。

準備として、今回の作成するHTML用にディレクトリを作成しておきます。 Textasticを起動して、Local Files か iCloud 上に “HelloWorld” というディレクトリを作成します。私は、iCloud上に保存したい派なのでiCloudに作ります。(気がついたのですが、私のiCloudが容量不足に陥っていました。月額¥130課金でついでに50GBに拡張しました。)

f:id:ninna2:20170409004607p:plain:w360

これで、格納する入れ物は出来ましたので、表示するページ本体を作成しましょう。まず空のファイルを作成します。index.html というファイルをHelloWorldディレクトリの配下に作成します。encodeingはUTF8、改行はCR、TemplateはHTML5としておきましょう。

f:id:ninna2:20170409004611p:plain:w360

次に、そのファイルの中に、下記のコードを記載します。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Welcome</title>
</head>
<body>
    <p>Hello World!!</p>
</body>
</html>

Template としてHTML5 を選択すると自動生成コードができるので、ちょこっと追記しただけです。コードの説明はするまでもないので割愛します。

ここまでできれば、あとは実行するだけです。HTMLを参照するだけなので、実行というのは表現が正しいかどうかはわかりませんが・・・

コードの編集画面の左したにあるメガネボタンを押してみてください。すると、"HelloWorld!!“の画面が表示されます。Safariで開きたければ、"Open in Safari"で開くこともできます。

f:id:ninna2:20170409004614p:plain:w360

第一弾として、プログラムを書く、実行するための環境と、簡単な動作確認まではできました。全部iPhoneでやって見るというのは、意外と実現可能なのかもと思わせてくれる結果になりました。もう少し高度なことが出来ないと、遊び程度で終わってしまいますので、次回はもう少し発展をさせてみたいと思います。

MS Universal Mobile Keyboard

f:id:ninna2:20170413231608j:plain:w360

今日、MicrosoftUniversal Mobile Keyboardを購入したので使用感をレビューしたいと思います。技術ネタばっかりだと寂しいので、自分が試したものについてはちょくちょく報告していきたいと思います。

購入経緯

まず、なぜ購入したのかを少しだけ・・・今年からブログを始めたのですが、机の前には座ってパソコンを開いてゆっくりとブログを書く時間がない。ITエンジニアっていそがしいんですよ笑。なので、隙間時間でちょこちょこiPhone片手に文章を打ち込むことが多くなりました。ブログを始めるまでは、iPhoneで文字を打つことなんてLineとブラウザの検索ぐらいのもので特に困っていなかったんですけどね。

iPhoneってソフトウェアキーボードを出すと、実際に使える領域が広くないので不自由なことに気がつきました。そして入力に時間がかかる。隙間時間の有効活用なのに、文字入力に時間がかかってしまってその時間がもったいないなと。そんなジレンマを脱出しようと外付けキーボードを探し始めたのが一昨日ぐらいです。夜中に探し出すときりがないですね。

そして今日、ヨドバシAlinaで現物触って納得して購入しました。

見た目

こういうガジェットは持っていてカッコよくないとテンション上がらないので、カバー付きでスマートな感じのUniversal Mobile Keyboardは素晴らしいと思います。iPhoneはシルバーを使っているので、グレーに白のデザインはすごくマッチします。

f:id:ninna2:20170409004637j:plain:w360

シルバーのiPhoneiPad持っている方は、グレーを、ブラックのiPhoneの方は、ブラックを選べば統一感が出せると思います。

f:id:ninna2:20170409004625j:plain:w360

打感

キーボードなので打ち心地も重要です。少し前に、LogicoolのKEYS-TO-GOを持っていましたが、文字を入力している感じがしなくてあまり使いませんでした。今回のUniversal Mobile Keyboardは、キーボード打っているって感じですごく好きです。キーピッチもそれなりに広いのでブラインドタッチも普通にできます。

機能性

まず、モバイルなので電池の持ちが気になりますが、購入後10分ぐらいしか充電していませんが、1時間以上使えています。公式でも1回の充電で最長半年持つ (本当か!?)と記載されているので、充電は頻繁にしなくても大丈夫だと信じたいです。私は主にiPhoneで使用することにしていますが、AndroidWindowsにスイッチ1つで切り替えられるのは、かなり良さげ。

ケースになっている上面カバーについても、取り外し可能で、かつ、iPhoneなどのスマホタブレットを立てることができすごく便利。別途スタンドを買う必要がないです。

f:id:ninna2:20170409004653j:plain:w360

あと、何気に便利なのが、上段に付いている音楽の再生停止、次の楽曲へのボタン。キーボード使っている時って音楽聴いていることが多いと思います。iPhoneは基本アプリを切り替えないと操作できないですが、このボタンで操作できます。Apple純正のイヤホンならその機能がイヤホン側に付いているので特に不自由しないですが、bluetoothのスピーカーなどを使用している場合に重宝します。

欠点

ここまで比較的、いい面ばかり書いてきましたが、1番気になるのは、重さです。モバイルキーボードなので、持ち運びをするわけですが、少し重めです。キーボードとして使うには、重たい方がズレないしいいのですが、持ち運び時にそれなりに重量があることは認識しておいた方がいいと思います。

まとめ

普通のキーボードに比べて、少し割高感はありますが、モバイルキーボードとしてはすごく良いと思います。私的には KEYS-TO-GO よりは安いのでいいかなと納得しています。重さだけ気にならなければ買って損はないと思いますよ。これでiPhoneでブログを執筆するのが少しはかどりそうです。更新頻度あがるかな。

F1 オープンデータWebService

f:id:ninna2:20170413225528j:plain:w360

面白そうなものを見つけたので備忘として残しておきます。Formula one (F1) の各種データが、Web Serviceで取得できることを知りました。何かサンプルアプリケーションを作ろうと思った時に、外部WebServiceとして使ってみたり、データ分析をする元データに使ってみたり、色々できそう。

続きを読む