2015-12-11

Sencha Ext JS6のハイブリッドアプリ（cordova）開発

Sencha Ext JSとハイブリッドアプリ

これまでSenchaでハイブリッドアプリ開発をするときには、Sencha Touchとcordova/PhoneGapを組み合わせてきましたが、Sencha Ext JS6になってデスクトップ用とモバイル用のUIが統合されたので、Sencha Ext JS6とcordovaを組み合わせて動かすところまで試してみました。Xcode7からは、Appleの有料開発者ライセンスがなくてもiPhoneなどの実機で試せるようになったので開発の敷居は下がり、実際に手を動かすモチベーションは上がったかなと思ってます。

環境構築

まず今回試した開発環境は、以下になります。
* Sencha Ext JS6（6.0.1）
* Sencha Cmd（6.0.2.14）
* cordova（5.4.0）
* node.js（5.0.0）
* Java（1.7）
* Xcode（7.1）

実際に試してみた手順

1.適当なディレクトリでSencha Cmdを使いプロジェクト生成

sencha -sdk ~/Library/Sencha/ext-6.0.1 generate app MyApp ./

f:id:yasug:20151211021826p:plain

2.Sencha Cmdを経由してcoedovaコマンドを実行して初期化

sencha cordova init com.mycompany.MyApp MyApp

少し気をつけたほうがいいのは、僕の環境では最初1.8系のJavaを入れていて、1.7でいけるなら1.8でもと思って試したのですが、そのときに以下のようなエラーが出たので。ひとまずは1.7で実行するのが無難です。

f:id:yasug:20151211022126p:plain

また「export JAVA_HOME=/usr/libexec/java_home -v 1.7」とかでJavaのバージョン切り替えてそのまま再実行しようとすると、今度は既にcordovaあるよって感じの以下のエラーがでるので、再実施するときには、一度cordovaディレクトリを削除してから実行してください。

f:id:yasug:20151211022135p:plain

うまくいくと、以下のような感じになります。

f:id:yasug:20151211022143p:plain

3.プロジェクトルートディレクトリ直下に配置されている、「app.json」のbuild部分を編集します。

編集前

f:id:yasug:20151211022153p:plain

編集後

f:id:yasug:20151211022200p:plain

4.ネイティブ化するためのビルドコマンドをSencha Cmdで実行します。

sencha app build modern

以下のような感じで、SUCCESSが表示されていればOK。

f:id:yasug:20151211022211p:plain

5.エミュレーターの起動

sencha app emulate modern

上記のコマンドを実行するとエミュレーターが起動して、以下のような画面が表示されるはずです。

f:id:yasug:20151211022219p:plain

6.実機で確認「プロジェクトルート/cordova/platforms/ios」配下に「MyApp.xcodeproj」ファイルが配置されているので、このファイルからXcodeを起動して、実際にiPhoneやiPadなどのデバイス接続してビルドすると実機でも試せるようになります。

まとめ

ここまでいけばあとは、通常のSenchaを使った開発の流れにのってネイティブ開発も進めていけるかと思います。次回は、PhoneGapのリモートビルドを試す方法を書こうと思います。

2015-05-23

PDF.jsの分割リクエスト設定

JavaScript PDF.js

PDF.jsを使ったサンプルの作成と確認

github

github.com

PDF.js

FireFoxではデフォルトで使用されているjsライブラリ。
ライブラリの中でpdfデータを変換してcanvasで表示してくれる。
デフォルトの設定では、最初にPDF情報を取得して、その後は1ページ単位にリクエストを投げてデータを取得している。
PDFで使用されるフォントも必要なタイミングで動的に取得して使用している。
HTTPステータスコードは200と206以外をエラーとしてハンドリングしている。
FireFox以外のブラウザを使用する場合には、compatibility.jsをインクルードする。

確認内容

1ページ単位にデータを取得している部分を1リクエストにできるか確認。
- disableRangeプロパティに、trueを設定することで可能。
- git clone したルート・ディレクトリで、gulp webserverして、 range_off_check.htmlとrange_on_check.htmlをそれぞれ開発者ツールのネットワークで確認。
フォントファイルの読込タイミングと設定値の確認
- cMapUrlプロパティにcmapsのディレクトリを指定する。
  - cmapsは、pdf.jsをgit cloneしてきて、node make genericをして生成されたものを使用。
- cMapPackedプロパティに、trueを指定する。
- font_file_check.htmlを開いた時には、range_on_check.htmlでは読み込まれていない、bcmapファイルがloadされることを、開発者ツールのネットワークで確認。
HTTPサーバによって、リクエストの投げ方が変わることを確認
- git clone したルート・ディレクトリで、gulp webserverした場合とnode mockServer.jsした場合とで、range_on_check.htmlにアクセスした時の動きが異なることをネットワークで確認。
エラーハンドリング
- node.jsでレスポンスを返しているところで、200としている部分を404や500などにしてサーバ再起動。
- PDFJS.getDocument(url) にエラー時の関数を指定することで、エラーオブジェクトを取得することが可能。
- 取得したエラーオブジェクトからHTTPステータスコードを取得してハンドリングするような実装にする。

参考サイト

GitHub - mozilla/pdf.js: PDF Reader in JavaScript

pdf.jsを使いブラウザで見られるPDFスライド表示ツールを作った | Web Scratch

How to catch promise runtime Javascript errors? - Stack Overflow

2015-01-24

laravel-centos-vagrant-nginx

laravelのもくもく会に参加してきました。

<a href="http://istyle.connpass.com/event/10859/">【増員】Laravel もくもく会 #1 (2015/01/24 13:30〜)</a>

【増員】Laravel もくもく会 #1 - connpass

vagrant環境での開発

vagrant
centos6.5 64bit
nginx
Laravel
以下の2つの記事を参考にして環境構築していきました。

<a href="http://qiita.com/yuppi/items/d5da1c15ae70f4b0abbb#laravel42%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">CentOS 6.5 + nginx 1.6.1 + Laravel 4.2のインストールメモ - Qiita</a>

CentOS 6.5 + nginx 1.6.1 + Laravel 4.2のインストールメモ - Qiita

[ Vagrant ] 01: LEMP環境にてPHP5.5（ laravel）の開発環境を作る | Sharable

成果物

yasutomog/laravel-nginx · GitHub

2014-12-20

Sencha Advent Calendar 2014 - 12月20日 App Inspector for Sencha

App Inspector for Sencha の紹介

App Inspector for Senchaについて

chromeの無料エクステンション
chromeにインストールして、開発者ツールから使うことができる
Senchaで作られた画面の解析に役立つ

インストール

Googleで「sencha chrome」とかで検索してもらえればいいです。
下記リンクからchromeにインストール

<a href="https://chrome.google.com/webstore/detail/app-inspector-for-sencha/pbeapidedgdpniokbedbfbaacglkceae?hl=ja">App Inspector for Sencha™</a>

App Inspector for Sencha™ - Chrome ウェブストア

アプリ詳細タブ

Senchaで作られた画面で開発者ツール開いて、Senchaメニューを選択するとアプリ詳細タブが開かれます。
この画面がどのバージョンで作られているかなどの情報を見ることができます。

f:id:yasug:20141220020655p:plain

コンポーネントタブ

コンポーネントタブを選択すると、どのような部品をつかって構築されているか、組み方をしているかをリストで確認できます。
コンポーネントをクリックすると、画面の対象部分が以下のイメージのように赤くハイライトされます。

f:id:yasug:20141220020941p:plain

コンポーネントをクリックすると、そのコンポーネントのプロパティやメソッドを確認することができます。

f:id:yasug:20141220021400p:plain

f:id:yasug:20141220022409p:plain

ストア

ストアタブを選択すると、画面で使用しているストアを一覧で確認できます。
そのストアには何件のレコードが入ってるか確認することができて、レコードの中身も1件ずつデータを確認することが可能となっています。

f:id:yasug:20141220022516p:plain

レイアウト

無駄に入れ子になっているコンポーネントを教えてくれます。

f:id:yasug:20141220022756p:plain

イベント

記録ボタンをクリックしてから画面上で色々触ってみてください。
発生したイベントが随時リスト表示されていきます。
どのコンポーネントで何というイベントが発生しているかを確認することができます。

f:id:yasug:20141220022926p:plain

まとめ

1から開発するときよりかは、既にあるアプリやサンプルの確認時に、どうやって作ってるのかなどを視覚的に把握するのに使えると思ってます。
ソースも公開されているので、興味ある人はこちらも見てみて下さい。

<a href="https://github.com/senchalabs/AppInspector">senchalabs/AppInspector</a>

senchalabs/AppInspector · GitHub

明日は、Shinobu Kawanoさんです！

2014-12-07

Sencha Advent Calendar 2014 - 12月7日 Ext5のPieチャート

Advent Calenderが来ると、今年も終わると感じますね。
今回は、Ext5を使ったPieチャートを紹介したいと思います。

tnkerさんのブログで、Ext4のPieチャートをかっこよくするってのがあったんですが、
Ext5ではもう少し簡単にかっこよくできたので、それを紹介してみます。

Ext JSの中でもトップレベルのダサさを誇るPieチャートコンポーネントをどうにかしてあげよう ;) | blog.tnker.com

Sencha Fiddleでサンプルを作ってみました。
さくっとサンプル作るのにSencha Fiddleは楽でいいですね。

https://fiddle.sencha.com/#fiddle/eku

簡単なものならデフォルトで、theme作らなくてもそれっぽく作れるので試してみて頂ければと思います。

明日は、中村久司 (@martini3oz) | Twitter です。

2014-09-15

AngularJSを使ったForm（フォーム）のValidation（バリデーションチェック）

AngularJS Form Validation

現場のAngularJS導入がほぼ決まりなのでサンプル実装

一先ず色々やるんじゃなくてバリデーションだけ導入
プロジェクトに馴染むなら双方向バインディングとルーティングも検討する

FormのValidationのサンプル実装

<a href="https://github.com/yasutomog/angular-form-validation">yasutomog/angular-form-validation</a>

yasutomog/angular-form-validation · GitHub

サンプル実装のバリデーション種類

必須入力
最小文字列数
最大文字列数
複数項目の一致
メールアドレス
ラジオボタンの必須
数値入力
アルファベット入力
電話番号

2013-12-20

Sencha ExtJSのrequiresとuses

皆さんrequiresとusesってどう使い分けてるの？

Sencha ExtJSでファイルをロードさせるためには、requiresかusesを使います。どちらもファイルをロードすることが出来るのですが、使い分けはどうするのでしょう。
僕はrequiresだけしか使ってませんでした。

APIリファレンスを読んでみる

requires：クラスがインスタンス化される前にロードされる
uses：クラスがインスタンス化される前に確実にロードされているわけではない

requiresは、意味も分かりやすいし使い道のイメージしやすいですね。実際にこれまでもrequiresの方ばかり使ってたし。。usesってじゃあいつ使うんだよってところが悩ましい。確実にロードされているわけではないって言い回しがもどかしい。

blogの発見1

調べてると下記のblogを見つけました。

読書メモ: Ext JS 4 First Look / Capter 1 | Sunvisor Lab. Ext JS 別館

このblogのDynaic class loadingというところの記述です。

f:id:yasug:20131219111736p:plain

RequiresとUsesのそれぞれの説明はリファレンスと同じ感じですね。デッドロックの話で、usesだと大丈夫ということで、少し理解が深まります。ただ、そもそもこのデッドロックするクラス設計自体おかしいなということで、usesを使う理由にはならないのかなと。

blog2の発見2

もう少し調べてみると、下記のblogを発見。

ExtJS PerfectDay #006 講義メモ | Sunvisor Lab. Ext JS 別館

このblogのクラスシステム - uses・requiresというところです。

f:id:yasug:20131219133453p:plain

絶対使う場合はrequiresで、configなどで使い分ける場合はuses。これはとてもしっくりきました。 configなんかで、複数クラスを使い分けるような場合には、無駄なロードを減らすためにusesを使いましょうということかなと。

実際に試してみた

ローカル環境、下記のようなSenchaコマンドを叩いてもらうとプロジェクトが自動生成され、Webサーバ上に配置すると画面表示までいけます。

 sencha -s ~/Library/Sencha/ext-4.2.1.883 generate app AdventCalenderSample ./adventCalender/public_html

f:id:yasug:20131219140317p:plain

新たに簡単なフォームパネル（AdventCalenderSample.view.Form）を作って、自動生成されたタブパネルの中に埋め込むように改修してみます。ソースのイメージとしては下記のような感じです。

Ext.define('AdventCalenderSample.view.Main', {
    extend: 'Ext.container.Container',

//    uses: ['AdventCalenderSample.view.Form'],

    requires:[
        'Ext.tab.Panel',
        'AdventCalenderSample.view.Form',
        'Ext.layout.container.Border'

    ],

    
    xtype: 'app-main',

    layout: {
        type: 'border'
    },

    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'west',
        width: 150
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Center Tab 1',
            xtype: 'sample-form'
        }]
    }]
});

画面表示して下記のように開発者ツールなどで、ファイルの読み込みを確認してみて下さい。

f:id:yasug:20131219142148p:plain

次に、ソースのusesのコメントアウトを外して、requiresの「'AdventCalenderSample.view.Form',」をコメントアウトして下さい。再度、画面表示してみてファイルの読込を確認してみてください。 requiresで定義しているとMainのViewが読み込まれたタイミングで一緒にロードが走っているのが分かります。usesで定義しているとrequiresと比べて後の方に読み込まれるのが分かると思います。

まだファイル読み込みされていない時にExt.createなどでインスタンスを作ろうとすると、そのタイミングでロードが走るということですね。
インスタンスを作成する時に、newを使っているとファイルロードされないので、Ext.createを使った書き方で統一しましょう。

おまけとお礼

今回の調査で見つけたblogはどちらも中村さんが書かれたものでした。
ありがとうございました！

yasutomogのブログ

Software Engineerの雑記