yasutomogのブログ

作業の備忘録としてリンクと一緒に簡単な説明を残す

lumenのログ出力制御(rotateの方法)

デフォルトの設定

  • デフォルト設定のままだと、「ルート/storage/logs」配下に
    lumen.logが吐かれる。
    全てのログがこの1ファイルにずっと吐き続けられる。

laravelの設定

  • 「ルート/config/app.php」のlog(キー値)に対して設定してあげると
    rotateの制御をしてくれるみたい。

lumenでの対応

やりたいこと

  • 日付単位でrotateさせたい
  • ログを今後管理するのを考えた時に、日付はファイル名に付加しないで日付のディレクトリを配置して、その下に吐かれるようにしたい

対応方法

  • 「ルート/app」直下にApplication.php(以下のファイル)を作成
<?php

namespace App;

use Monolog\Logger;
use Laravel\Lumen\Application as LumenApplication;
use Monolog\Handler\StreamHandler;
use Monolog\Formatter\LineFormatter;
use Monolog\Handler\NewRelicHandler;
use Monolog\Handler\RotatingFileHandler;

class Application extends LumenApplication
{

    /**
     * Register container bindings for the application.
     *
     * @return void
     */
    protected function registerLogBindings()
    {
        $this->singleton('Psr\Log\LoggerInterface', function () {
            return new Logger('lumen', $this->getMonologHandler());
        });
    }

    /**
     * Extends the default logging implementation with additional handlers if configured in .env
     *
     * @return array of type \Monolog\Handler\AbstractHandler
     */
    protected function getMonologHandler()
    {

        $errorLogger = new RotatingFileHandler(storage_path("logs/{date}/error.log"), 0, Logger::ERROR, false);
        $infoLogger = new RotatingFileHandler(storage_path("logs/{date}/info.log"), 0, Logger::INFO, false);

        $handlers = [];
        $handlers[] = $this->setLoggerFileFormat($errorLogger);
        $handlers[] = $this->setLoggerFileFormat($infoLogger);

        return $handlers;

    }

    /**
     * Loggerのファイル名と日付フォーマットを設定
     *
     * @param $logger
     * @return mixed
     */
    private function setLoggerFileFormat($logger) {

        $logger->setFilenameFormat('{filename}', 'Ymd');
        $logger->setFormatter(new LineFormatter(null, null, true, true));
        return $logger;

    }

}

  • 「ルート/bootstrap/app.php」の中で$appのインスタンス生成しているところを
    作成したApplication.phpを生成するように変更
$app = new App\Application(
    realpath(__DIR__.'/../')
);

参考URL

laracasts.com

Sencha Ext JS6とPhoneGap Buildの連携

PhoneGap Build

前回はSencha Ext JS6とcordovaの連携について書きましたが、今回はSencha Ext JS6とPhoneGap Build(Adobe PhoneGap Build)について試してみたいと思います。

yasutomo.hatenablog.com

PhoneGap Buildがなにができるかというとリモートビルドで、ローカルの開発環境にいちいちcordovaやPhoneGapの環境を構築しなくても、Webアプリだけ作れれば、WindowsからもMacからもAndroidiOSのネイティブアプリ構築ができます。単純に環境構築が面倒くさいという点と、昔はiOSアプリに作るならまずMac買ってからということで、こういうサービスの需要があるのだと思います。

環境構築

  • 前回の記事で作ったものをそのまま流用します。
  • PhoneGap Buildのサービスのアカウントは作成しておいてください。

PhoneGap Buildに連携までの手順

1.app.jsonの編集 プロジェクトルート直下にある、app.jsonファイルを以下のように編集します。

  • 編集前

f:id:yasug:20151218004442p:plain

  • 編集後

f:id:yasug:20151218004451p:plain

2.local.propertiesの作成 プロジェクトルート直下に、local.propertiesファイルを作成してください。 中身はPhoneGap Buildで作成したユーザとパスを記載。

f:id:yasug:20151218004612p:plain

3.Sencha Cmdでビルド実行

sencha app build remote

※既にPhoneGap Build上にアプリがある場合、無料アカウントだと1つしか作成できないので、ビルド前に削除しておいてください。

4.Web上で確認 以下のようにリモート上でビルドされたものが見えると思います。

f:id:yasug:20151218004735p:plain

まとめ

2回に分けてSencha Ext JS6でハイブリッドアプリ開発について書いてみました。 PhoneGap Buildは作成できるアプリの数に制限はありますが、無料で使用することも可能なのでアカウント作って試してみて頂ければと思います。

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を起動して、実際にiPhoneiPadなどのデバイス接続してビルドすると実機でも試せるようになります。

まとめ

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

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ステータスコードを取得してハンドリングするような実装にする。

参考サイト

mozilla/pdf.js · GitHub

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

How to catch promise runtime Javascript errors? - Stack Overflow

laravel-centos-vagrant-nginx

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

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

vagrant環境での開発

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

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

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

成果物

yasutomog/laravel-nginx · GitHub

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にインストール

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

senchalabs/AppInspector · GitHub

明日は、Shinobu Kawanoさんです!

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 です。