つかさのBlog@hatena

技術系ブログのはず

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

WEBサービス Android iOS スマホアプリ セミナー・イベント

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入門編）の感想

WEBサービス Android iOS スマホアプリ セミナー・イベント

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で最後のタブを閉じてもブラウザを終了しない方法

OSS 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 OSS

標準設定ではブックマークからページを表示すると、カレントのタブに表示されます。
しかし、下記の手順を行うと、新しいタブで表示されるようになります。
個人的にはブックマークも検索バーの結果も「新しいタブで開く」を標準設定にしておいてほしいと思っています。
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

CodePen - オンラインエディタ

WEBサービス

■CodePenについて
CodePenというWEBサービスを紹介させて頂きます。
こちらはHTML, CSS, JavaScript等に対応したオンラインエディタとなっています。
ちょっとしたコードの動作確認やブログ等での共有にとても便利です。
f:id:tsukasa-labz:20180118212818p:plain
↑の画像で書いているコードはhttps://codepen.io/tsukasa-labz/pen/baQMVPで確認できます。

一時的な利用であれば会員登録しなくても利用可能ですが、ブログで共有等をやっていきたいので無料プランで登録してみました。
GitHub, Twitter, Facebookアカウントでも可能ですが、私はメールアドレスで登録しました。

■感想など
サービスは全て英語となっておりますが、英語が苦手な私でもなんとか使えています。
有料会員になるとGitHub同様、ソースコードを非公開に設定できるなどの機能も使用可能になります。
リアルタイムに共同編集なども利用できるようですが、使用していないためよくわかりません。
私は開発時に部分的なテストをしたり、ブログ等でコードを共有する目的ですので、無料プランで十分だと感じています。

今後、当ブログで活用していきたいと思います。
使っていて便利な機能や小技等があれば、別途記事にしたいと思います。

Firefoxで検索バーの結果を新しいタブで開く方法

Firefox OSS

標準設定では検索バーにキーワードを入力し、エンターを押すとカレントのタブに検索結果が表示されます。
しかし、下記の手順を行うだけで、検索バーからの検索結果が新しいタブで表示されるようになります。
個人的には標準設定をこれにしておいてほしいと思っています。
Firefoxをインストールするたびに設定を行うのでメモ。

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

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


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

ブログ始めました。

雑談

マイクロソフトのかずきさんに憧れてブログを始めました。
Ruby on Rails, Android, Firefox, C#, jQuery, OSSに関する記事を中心に書いていきたいと思います。

かずきさんのブログは↓↓↓
かずきのBlog@hatena