C# で Android開発

Javaではこうだけど、Xamarinではこう、という正解がわからないので、合っているのか自信がない。エラーにはなってないけど。

続きを読む

C# で Android開発

7.3.1 のみ。わかりやすくて読みやすい本だと思う。

続きを読む

C# で Android開発

Androidアプリ開発の本を見ながら、C# で開発してみる。
今回は Chapter 6 まで。苦労した・・・。
まだまだ全然前半戦なのに、先が思いやられる。

続きを読む

Visual Studio で Xamarin 頑張る(Androidのみ)

Android でのすんげーちょっとした開発案件があり、Java でやってもいいのだけれど、周りが C# 使いなので Xamarin 無料になったということで調べた。

blogs.msdn.microsoft.com

ここで紹介されてたこのハンズオンした。良き資料。田淵さんすごい。

GitHub - ytabuchi/XamarinHOL: Xamarin ハンズオン用のレポジトリ&ドキュメントです。

続きを読む

はじめてのMonaca

Fujitsu extended Advent Calendar 2016 の 8日目です。
せっかく2枚目を作成して頂いたので、ギリギリ関連会社のような気がしますので参加させて頂きます。

今回は、ひょんなことからMonacaの初心者向けセミナーに参加したので、復習のために超初心者向けに簡単に紹介をします。

お決まりですが、
記事は全て個人の見解です。会社・組織を代表するものではありません。

npmだのES6だのは出てきません。
他と比べてレベルが低いことはご容赦ください。

はじめに

Monacaとはなにか?というのは本家にそのものがあるので譲ります。

ja.monaca.io

Monaca とは?
Monaca は、アシアル株式会社が提供する、スマートフォンタブレット向けアプリの開発ツール、Web サービスなどの総称です。Monaca では、スマートフォン向けのアプリ開発が、誰でも簡単にできるように、各種開発ツール・ Web サービスに加え、サポート ( StackOverFlow での議論の場、情報提供用のブログ、ツールの取扱説明書など ) も提供しています。

Monaca では、ハイブリッド 技術を駆使して、モバイルアプリを開発できます。また、Monaca では、HTML5 を使用した、クロスプラットフォーム開発を実現するため、PhoneGap/Cordova を採用し、加えて、開発効率を向上させるため、クラウド技術を使用した、統合的な開発ツールおよび Web サービスを提供しています。これにより、「 ハイブリッド モバイル アプリ 」 の開発を、容易に開始できます。また、Monaca が提供する開発ツールは、特定のフレームワークには依存していないため、柔軟性があり、現在の開発工程・開発環境にも、スムーズに導入できます。また、Cordova プラグインの組み込みも簡単に行えます。

Monaca での開発の概要 - Monaca Docs


セミナーで使用したテキスト。Amazonでは新品は買えないようです。

テキストの内容としては、タイトル通り、プログラミング初心者またはWeb開発を全くやったことがない方には丁度良いかもしれません。

開発準備

Githubのアカウントがあればそれが使用できます。
f:id:yossk:20161207205116p:plain

登録後、ダッシュボードを表示します。
f:id:yossk:20161207210220j:plain

携帯にデバッガをインストールします。お使いのデバイスに合わせて。後々わかりますがこれがすごい便利です。

Monaca

Monaca

  • Asial Corporation
  • ユーティリティ
  • 無料
play.google.com

はじめてのプロジェクト

無料コースでは3つしかプロジェクトが作れないので、とりあえずデフォルトのものは削除し、プロジェクトを作成します。
色々テンプレートがありますが、今回は No Framework を選択し、サンプルアプリプロジェクトを作成します。
f:id:yossk:20161207214810j:plain
f:id:yossk:20161207214957j:plain
f:id:yossk:20161207215331j:plain

作成したプロジェクトを開くと、Web上のIDEが表示されます。
設定でテーマを安定のMonokaiに、キーバインドは安定のvimで。
vimにするとエディタの補完が効かなくなるので注意。キーバインドEmacsにした場合は・・・、しないからわかりません。
f:id:yossk:20161207220036j:plain
f:id:yossk:20161207220228j:plain
f:id:yossk:20161207220434j:plain
f:id:yossk:20161207220627j:plain

次に携帯の設定。携帯に前述したデバッガを入れ、起動します。
f:id:yossk:20161207221839j:plain
f:id:yossk:20161207222011j:plain
f:id:yossk:20161207222018j:plain

ここで、このデバッガがすごいところは、Web IDEで変更した内容が携帯のほうに自動更新されるところ。
画像では伝わらないですけど。
f:id:yossk:20161207222500j:plain
f:id:yossk:20161207222635j:plain

JavaScript動作確認

JavaScriptがちゃんと動くのか?の簡単なテストを行ってみました。
使用するライブラリは Fabric.js。
Fabric.js Javascript Canvas Library
CDNでは動作しなかったので、ファイル(fabric.min.js)をダウンロードし、新たに作成したディレクトリ js 以下に追加しました。
HTMLファイルは以下のように。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script type="text/javascript" src="js/fabric.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>
</head>
<body>
<canvas id="main"></canvas>
</body>
</html>

stylesheetも少し。

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
  background-color: #CCFFFF;
}

JavaScript部分。

window.addEventListener('load', function() {
  document.getElementById('main').width= window.innerWidth;
  document.getElementById('main').height = window.innerHeight;
  
  var canvas = new fabric.Canvas('main');
  
  var circle = new fabric.Circle({
    radius: 60,
    fill: 'green',
    left: 100,
    top: 175
  });
  
  var triangle = new fabric.Triangle({
    width: 100,
    height: 100,
    fill: 'blue',
    left: 50,
    top: 50
  });
  
  var rect = new fabric.Rect({
    left: 200,
    top: 300,
    fill: 'red',
    width: 100,
    height: 100
  });

  canvas.add(circle, triangle, rect);
});

Web IDE 上ではこのように。
f:id:yossk:20161207234111j:plain

携帯では以下のように。
f:id:yossk:20161207234610p:plain

終わりに

どうでしょうか?可能性を感じませんか?
ハイブリッドアプリはパフォーマンスが良くないとは聞きますが、その点は要件次第でしょうか。
ただ、JavaやSwiftが使えないフロントエンドエンジニアでも携帯アプリを作れるというのはすごいメリットではないでしょうか?

簡単ですが、以上です。

WEB+DB Vol.93 読んだ

積んでたのを今更。

WEB+DB PRESS Vol.93

WEB+DB PRESS Vol.93

続きを読む