つかさラボのBlog@hatena

技術系ブログのはず

Ionicで作る モバイルアプリ制作入門の感想

f:id:tsukasa-labz:20180305020622j:plain

Ionicとは

Ionicは、Google社の「Angular」というアプリケーションフレームワークをベースに HTML5アプリの開発に特化して作られたフレームワークです。

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉より引用

なぜIonicを勉強しようと思ったか

正直なところ、Twitterでたまたま見かけたからです。
Twitterで見かけるまではMonacaで選択できるフレームワーク程度の知識しかありませんでした。
元々スマホアプリ開発に興味があり、AndroidアプリをGoogle Playに公開※1していました。
そのため、見かけた時に購入することを決定しました。

読んでみた感想

良かった点
  • iOS/Android別のUIデザイン
     → Onsen UI同様、OS毎に見た目が変わるのはやはり有り難い
  • 公式ドキュメントのURLが必ず書いてある
     → これは地味に有り難く、リファレンスを確認しながら進められる!
  • リファクタリングが実践的
     → 見よう見まねで作成したコードが、再利用性の高いコードになりました!
  • IonicViewで審査無しにアプリを配布
     → 年会費無しにiPhone/Androidで実機確認できるのは素晴らしい!

悪かった点
  • Android Studioのインストール説明などが簡潔
     → 開発初心者を対象としていないためか、かなり省略されております
  • ページ数の割には価格が高い※2
     → ページ数で価値が決まるとは思いませんが、やはり割高感があります
  • 「Webサイトが作れるならアプリが作れる」とあるが、AngularやTypeScriptを覚えないといけない
     → これは私の勉強不足ですね、精進します(汗)

総括

やや割高感はありますが、内容がかなり濃厚なので買う価値有りだと思います。
CHAPTER04ではJSON形式で取得したデータを表示するニュースアプリのようなものを作成しました。
よくあるメモアプリやタスク管理アプリと比べ、より実践的で作っていてとても楽しめました。

Ionicを使うにあたり、AngularやTypeScriptなども勉強しないといけないと痛感しました。
今年中にはRuby on Railsでバックエンドを作成し、Monaca/Ionicでスマホアプリをリリースしたいと思います。

補足

※1 現在は諸事情により公開しておりません
※2 買おうと思っていたプロを目指す人のためのRuby入門と比較

書籍名 判型 ページ数 価格
プロを目指す人のためのRuby入門 B5変形判 472ページ 3,218円
Ionicで作る モバイルアプリ制作入門 A5判 194 ページ 3,910円

Ruby25に参加した感想

f:id:tsukasa-labz:20180304235521p:plain

Ruby25(ルビィトゥエンティファイブ)とは

プログラミング言語Ruby 25周年記念イベント
25年を振り返り、皆さまとお祝いし、Rubyの今、そして未来を展望する

公式サイトより引用

Ruby25に参加した感想

私の感覚では8~10周年ぐらいのイメージでしたので、Ruby25周年ということに非常に驚きました。
新参者というイメージがありますが、実はJavaとあまり変わらないのですね。
イベントではRubyの歴史、未来、名前の由来などについてお話されていました。
サプライズで実の娘が2人登壇し、親バカエピソードを暴露されるなど、意外な一面も。

まつもとさんは当時、会社員で1人だけ私服通勤の上、仕事中にRubyの開発をされていたそうです(笑)
このエピソードが1番印象に残っており、マネしようかなと一瞬考えましたが
今の時代だとPCやインターネット履歴の監視、作業工番による時間管理などが厳しくなっているのでマネするのは難しそうです。
私は言語を作りたいというより、アプリやウェブサービスを作りたいという思いが強いので、Rubyを活用させて頂く方向で貢献したいと思います。

最近は仕事でRubyに触れることも無く、Railsチュートリアルも放置気味になっていましたが、再開するいいきっかけになったかと思います。
イベントの資料や動画が公開され、わざわざ行かなくても良いという考えもあるかとは思いますが、実際に行ってみると良い刺激になりました。
今後もこのようなイベントや勉強会等には積極的に参加し、エンジニアとして成長できればと思います。
ブログではツールやサービスの紹介、技術書の感想がメインになってしまっているので、技術ネタを書けるように勉強せねば。

日時

2018年2月24(土)
13:00-18:00

場所

東京都港区港南2-15-4 品川インターシティホール

チケット

  • 一般(2,000円)
  • 学生(無料)
  • Ruby 貢献者(無料)

スケジュール

12:00

開場

13:00 - 13:20

オープニング

13:20 - 13:50

特別講演
Rubyの1/4世紀
高橋 征義
一般社団法人日本Rubyの会 代表理事
日本Rubyの会代表理事兼株式会社達人出版会代表取締役プログラマ。
著書に『たのしいRuby』『Rails3レシピブック』(共著)等。好きな作家は新井素子。
www.youtube.com

13:50 - 14:40

基調講演
Ruby after 25 years
まつもと ゆきひろ
一般社団法人 Ruby Association 理事長、その他
Rubyのパパ。
www.youtube.com

14:40 - 15:10

休憩

15:10 - 15:25

Rubyの今
Ruby on Ruby on Rails
松田 明
Asakusa.rb
Rubyコミッター。Ruby on Railsコミッター。kaminari、action_args、active_decoratorなどのライブラリの作者。RubyKaigiのチーフ・オーガナイザー。Asakusa.rbの発起人。
www.youtube.com

15:25 - 15:40

Rubyの今
RubyとInfrastructure as Code、そして大規模インフラ
近藤 宇智朗
GMOペパボ株式会社 技術基盤チーム シニア・プリンシパルエンジニア
ECサイト、オンライン ゲーム開発などを経て、2013年よりGMOペパボ技術基盤チーム。
同年より福岡市内に移住。
共著に『パーフェクトRuby』『パーフェクトRails』などがある。 mrubyを組み込んだLinuxコンテナランタイム「Haconiwa」の作者で、Haconiwa関連の活動としてRubyKaigi 2016でのトークが採択され、また第9回福岡Ruby大賞を受賞。
現在は、Haconiwaをベースとしたクラウドサービスである「ロリポップ!マネージドクラウド」にアーキテクトとして参加している。
www.youtube.com

15:40 - 15:55

Rubyの今
mruby、今IoT、組込界隈でこう使われています、最新事例紹介!
石井 宏昌
NPO軽量Rubyフォーラム
Rubyからmruby作るように経産省に提案書いて以来、mrubyと一緒にいます。皆さんにmrubyをもっと知ってもらえますように。
www.youtube.com

15:55 - 16:10

Rubyの今
Data Processing and Ruby in the World
田籠 聡
トレジャーデータ株式会社
データ転送、分散処理、ストリーム処理等のOSSの開発・メンテナンスなどを行うプログラマ。
Fluentd, MessagePack-Ruby, Norikraなどのコミッタ/メンテナ/開発者。
トレジャーデータでは分散データ処理基盤の設計・開発などを行う。
www.youtube.com

16:10 - 16:40

休憩

16:40 - 17:50

Rubyの未来
Matz & Miyagawa 未来を語る特別対談
宮川 達彦
Principal Software Architect at Fastly
Perl Hacker. Podcaster at rebuild.fm. Principal Software Architect at Fastly. Born in Tokyo, Lives in San Francisco.
www.youtube.com

17:50 - 18:00

クロージング

わかばちゃんと学ぶ Git使い方入門の感想

gitとは

Git(ギット)は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。 Linuxカーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発され、それ以降ほかの多くのプロジェクトで採用されている。 Linuxカーネルのような巨大プロジェクトにも対応できるように、動作速度に重点が置かれている。現在のメンテナンスは濱野純 (Junio C Hamano) が担当している。 Gitでは、各ユーザのワーキングディレクトリに、全履歴を含んだリポジトリの完全な複製が作られる。 したがって、ネットワークにアクセスできないなどの理由で中心リポジトリにアクセスできない環境でも、履歴の調査や変更の記録といったほとんどの作業を行うことができる。 これが「分散型」と呼ばれる理由である。

Wikipediaより引用

なぜgitを勉強しようと思ったか

SIerではソース管理にTFSVSSSVNを使用することがほとんどでした。
そんな中、とある客先ではgitを使用してソース管理を行っており、これを機に使い始めました。
何となく誰かが設定した環境でコミット、プッシュ、プルを行っている状態でイマイチ仕組み等は理解出来ていませんでした。
いつかちゃんと勉強しようと思っていたものの、結局何もしないまま今に至りました。
WEB系を目指す上で改めてきちんと勉強しようと思い、わかばちゃんと学ぶ Git使い方入門を購入しました。
f:id:tsukasa-labz:20180217154216j:plain

読んでみた感想

良かった点
  • 漫画になっているだけあってとてもイメージしやすい
  • プルリクの練習ができる
悪かった点
  • どのリポジトリで作業をしているのかわかりにくい
  • 画像内の文字が一部小さくて読めなかった

23.8インチディスプレイで100%表示

良いことばかり書くとステマ記事っぽくなるので、あえて悪い点もあげています。
どのリポジトリを使用しているかは画像をよく見ればわかりますし、画像内の文字が小さいのもKindle版では拡大ができます。
どちらも勉強をしていく上で致命的なものでは無く、改善したほうがより良くなるというものです。

総括

恥ずかしながら業務で使用していた際はスカッシュやスタッシュと言った機能を全く知りませんでした(汗)
「git pull」は「git fetch」+「git merge」であるということも、本を読むまで考えたことすらありませんでした。
入門とは言え何となくで使っていた頃と比べ、理解が深まったと言えそうです。

gitの機能面以外で特に驚いたのは、プルリクの練習ができるということです。
ここまでできるというのは本の値段に対して、過剰とも言えるサービスではないでしょうか?
プルリクを送った後、数時間後にはマージされました。
f:id:tsukasa-labz:20180219024413j:plain そのうち贅沢に慣れ、「マージされるのが遅い」などとクレームをつける人が出てきて、サービスが無くならないことを祈るばかりです。

HTML5モバイルアプリ開発講座(Onsen UI入門編)の感想

Onsen UIとは

f:id:tsukasa-labz:20180211235953p:plain:w200

Onsen UIは、下のような特徴を持つライブラリです。

  • モバイルアプリの開発に特化したUIコンポーネントの集まりです。
  • ネイティブなiOSとAndroidのデザインガイドに準拠したデザインと機能を持っています。
  • 無料で利用でき、完全にオープンソースなソフトウェアです(Apache v2 license)。

Onsen UIを使うと、モバイルWebアプリの上でネイティブUIと同等のUX(ユーザー・エクスペリエンス)を提供することができます。

公式サイトより引用

講座概要

モバイルアプリの画面を簡単に作成することのできる、UIフレームワーク『Onsen UI』を使ったアプリ開発を学ぶ講座です。
Onsen UIを使うことで、パフォーマンスが高く、マテリアルデザインやフラットデザインに準拠したより本格的なアプリを開発することができます。

イベントサイトより引用

受講した感想

2時間という短い時間だったので、アプリのテンプレートをインポートし、テキストを書き写す形で進行して行きました。
HTML5モバイルアプリ開発講座(Monaca入門編)と進め方は同様です。
作成したのはローカルストレージに、データを保存するメモアプリです。

f:id:tsukasa-labz:20180218161459p:plainf:id:tsukasa-labz:20180218161500p:plain

※削除ボタンはセミナー修了後に個人的につけてみました。

テンプレートを使用したとは言え、短時間でメモアプリが作成でき、自分でも驚きました。
以前、Androidアプリ(WebViewを使用したブラウザアプリ)を作成しました。
その際はそれなりに時間がかかったことを考えると、非常にMonaca/Onsen UIは非常に有用だと思いました!

テーマローラー

テーマローラーを使用するとボタンやダイアログ等のデザインを簡単に変更できます。
独自カスタムに加え、プリセットを使用すると↓のようにさらに簡単にデザインを変更できます。

f:id:tsukasa-labz:20180217141017p:plainf:id:tsukasa-labz:20180217140900p:plain

この点、アプリ開発を行う上で、センスの良いデザインが行えない私には非常にありがたいと感じました。

オートスタイリング

オートスタイリングによりAndroid(左)、iOS(右)で見た目が変わる例。

f:id:tsukasa-labz:20180217142819p:plainf:id:tsukasa-labz:20180217142815p:plain


Androidのマテリアルデザイン、iOSのフラットデザインをよく理解していなくても自動でそれっぽいデザインで表示されるのは素晴らしい!
この機能を使用したくない場合はオフにしてAndroid/iOSで統一したデザインを使用することもできます。
Onsen UI独自のタグだけでOSや画面の向きによる条件分岐も行え、使いこなせば非常に強力な武器となりそうです。

ソースコードやその他のデモはこちらから。

タイムテーブル

  • Onsen UIとは
  • アプリの作成
  • 実習

講座情報

  • 場所:半蔵門
  • 時間:2時間(14:00 - 16:00)
  • 費用:5,400円(税込み)

持ち物

  • ノートPC(Google Chromeを事前インストール)
  • モバイル端末(iOS 9 以上、Android 5 以上)

HTML5モバイルアプリ開発講座(Monaca入門編)の感想

Monacaとは

f:id:tsukasa-labz:20180211201747j:plain

Monacaは、クラウドベースの開発プラットフォームです。
HTML5とJavaScriptを用いることで、iOSとAndroidの両OSに対応したクロスプラットフォームなアプリ開発を実現しました。
また、MonacaではWebブラウザを通じて全サービスが提供されます。
そのため、クライアントソフトのインストールなく、誰でも簡単にアプリ開発が行えます。

公式サイトより引用

講座概要

18万ユーザーを突破したクラウド型アプリ開発ツール『Monaca』を利用してアプリ開発実習を行う講座です。
MonacaはWeb技術を利用してiOS/Androidの両方に対応したアプリを開発することができるツールです。
開発効率を求めるプロから教育機関まで、幅広く利用されています。

イベントサイトより引用

受講した感想

内容自体は「クラウドでできるHTML5ハイブリッドアプリ開発」の簡易版であると思われます。
f:id:tsukasa-labz:20180211203848j:plain:w200

2時間という短い時間でのセミナーだったので、用意されているテンプレートにテキストを書き写す形で進行して行きました。
作成したのはカメラを起動し、撮影した写真をアプリ内に表示するというものになります。

APIの呼び出し方はほとんど同じ形式になっているそうで↓が基本形。

navigator.camera.getPicture(成功時処理, 失敗時処理, オプション);


↓は実際に作成したアプリのソースコード(JavaScript部分のみ)になります。

var option = {
    saveToPhotoAlbum: true // 撮影後端末に保存
};

// カメラを起動
navigator.camera.getPicture(onSuccess, onError, option);

// 成功時に呼び出しされるコールバック関数
function onSuccess(imageURI){
    document.querySelector("#photo").src = imageURI;
}

// 失敗時に呼び出されるコールバック関数
function onError(message){
    alert("Error:" + message);
}

以前からMonacaに興味があったものの、なかなか行動に移せなかったためいいきっかけになったと思います。
これを機にスマホアプリ開発をやっていければと思います。

タイムテーブル

  • ハイブリッドアプリとは
  • Monacaの紹介
  • 開発環境のセットアップ
  • ネイティブ機能の利用(Cordova)
  • 実習
  • アプリのビルド
  • Monaca提供Enterpriseプラグインの紹介
  • サービス連携

講座情報

  • 場所:半蔵門
  • 時間:2時間(10:30 - 12:30)
  • 費用:5,400円(税込み)

持ち物

  • ノートPC(Google Chromeを事前インストール)
  • モバイル端末(iOS 9 以上、Android 5 以上)

Firefoxで最後のタブを閉じてもブラウザを終了しない方法

標準設定では最後のタブを閉じると、ブラウザが終了します。
しかし、下記の手順を行うだけで最後のタブを閉じても、ブラウザを終了しないようにできます。
以前はTabMixPlusというアドオンで設定していました。
残念ながらFirefox Quantum(バージョン57)以降では、使用できなくなったためメモ。

*注意* 下記の操作は全て自己責任で行ってください

1. Firefoxを起動
2. アドレスバーに「about:config」と入力し、エンター
3. 「危険性を承知の上で使用する」をクリック
f:id:tsukasa-labz:20180110215949p:plain


4. 設定名「browser.tabs.closeWindowWithLastTab」を検索
5. 値を「false」に変更
f:id:tsukasa-labz:20180117232713p:plain

Firefoxでブックマークを新しいタブで開く方法

標準設定ではブックマークからページを表示すると、カレントのタブに表示されます。
しかし、下記の手順を行うと、新しいタブで表示されるようになります。
個人的にはブックマークも検索バーの結果も「新しいタブで開く」を標準設定にしておいてほしいと思っています。
Firefoxをインストールするたびに設定を行うのでメモ。

*注意* 下記の操作は全て自己責任で行ってください

1. Firefoxを起動
2. アドレスバーに「about:config」と入力し、エンター
3. 「危険性を承知の上で使用する」をクリック
f:id:tsukasa-labz:20180110215949p:plain


4. 設定名「browser.tabs.loadBookmarksInTabs」を検索
5. 値を「true」に変更
f:id:tsukasa-labz:20180114185439p:plain