[Sass / Compass] ソースマップをChromeで見られるようにしたい

2013/02/5

こんにちは。きんくまです。

アプリのアップデートの申請を先週末に済ませました。なので、今週中には審査の結果が出るかと思いますです。

さて、アプリのサポートページというかランディングページといいますかそれを今作り直してます。
そんで前のバージョンでは、Sass用ライブラリBourbonというのをヒネて使ってみたのですが、Compassの方が人気があるので、今回はおとなしく使ってみることにしました。

で、ソースマップが実用化されてるらしいので、そうかそうか。Sassでやったらどうだろうとググってみました。

ところでソースマップって?

ここでソースマップとは何かを説明します。

まず最近はcssやjsの生産性を上げる動きがあります。それには、言語をそのままを書かずに、scssやCoffeeScript、TypeScriptなど別の言語をいったん書いて、そこからcssやjsにコンパイルします。
この別の言語にはいろいろと工夫がしてあるので、ベタでcss、js書くよりは早くて楽に書けるようになっています。

ただ、ChromeやFirefoxなどブラウザでデバッグをするときに、読み込むのはコンパイル済み(変換済み)の生のcss、jsなので、エラーや注意してみたい箇所があった場合に、オリジナルソースの.scssや.coffeeファイルではどこなのかというのが探しにくくなっていました。

そこで登場したのがソースマップという仕組みです。
コンパイル前のオリジナルソースと、コンパイル後の生のcss,jsをひもづけるようにしたのです。
そうすれば、エラーがあってもオリジナルソースのどこなのかがすぐにわかるので、修正がしやすくなっています。

Sass / CompassのソースマップをChromeで見られるように

このソースマップという仕組みは最近できるようになってきたので、少しブラウザに設定などが必要です。

すごく丁寧に説明してあるサイトがありましたので、紹介です。Thanks.

Bricss – Using Sass source maps in WebKit Inspector

以下の文は上の方が教えてくれたのを写しているだけです。

コンパイルするとき

sassをコンパイルするときは

--debug-info

をつけるそうです。こっちは試してないです、、。

Compassを使っているときは
config.rbで

sass_options = { :debug_info => true }

を追加します。

このとき書き出し形式をcompressedにはしないようにします。expandedとかでよいのかも。

output_style = : expanded

これでファイル側は準備OKです。compass watchしていたら、一度止めてもう一度コマンドを打ち直しましょう。

Chromeブラウザの設定

URLの欄に以下を入力して設定画面を開きます。

chrome://flags/

Enable Developer Tools experimentsをEnableにしましょう。

source_map_fig1

そうしたらDeveloper Toolsの右下の歯車アイコンを押して、
General > Enable source maps

source_map_fig2

Experiments > Support for SASS

source_map_fig3

をそれぞれチェックします。それから一度ブラウザを落として、立ち上げ直します。
それで、さきほど書き出しておいたcssファイルをみると、対象のエレメントがcssではなくscssをさしています。やったー!

source_map_fig4

注意とか

これすごく便利なんですが、Experiments機能をONにしてるとdangerousらしい(セキュリティ的になのか、、?)ので必要ないときは切っておいた方がよいみたいです。うー、でも実際はメンドイよね、、。

あと、これはあくまで開発用なので、リリースする際は、コンパイルの設定を:debug_info => falseか、この行自体をコメントアウトしておくとよいかと思われます。
コメントアウトはscssは/* */じゃなくて//でもコメントアウトできるってエラい人が言ってた。

LINEで送る
Pocket

[iOS] アプリ開発日記 HabitKeeper 1.4

2013/01/27

こんにちは。きんくまです。

日課管理アプリのHabitKeeperの開発日記みたいのです。

現状は、当初予定していた機能は組み込み終わりまして、あと追加でちょびっとやっています。
動画をとってみました。

1日表示とカレンダー表示でスワイプ操作ができるようになったので、便利になったかなと。
あと、グラフにもラベルが追加されて実用的になってきたかなと。
バッジの対応も何件か問い合わせがあったので、対応してみました。
パスコードを今組み込もうとしているので、それが終わったら審査に出そうかなと思ってます。

審査がスムーズにいけば2月中には出せるかな。

LINEで送る
Pocket

[AS3] Air for iOS(Adhoc)とAndroidで書き出したファイルをネットワーク越し(Over The Air = OTA)にインストール

2013/01/18

こんにちは。きんくまです。

1月からの新アニメは面白いのが結構ありまして。で、琴浦さんが好きな感じです。
HPに書いてあった原作の出版社がマイクロマガジン社とか書いてあって、あれ?これってもしかしてと思ったら、昔出版されてた「ゲーム批評」という雑誌の出版社で、懐かしさでいっぱいになりました。
初期の頃はよく読んでたんですよねー。途中からあんまりゲームやらなくなって見なくなってしまったのですけど。
自分はこういうマイナー雑誌のコラムとかが結構好きでした。

さてここから本題です。
FlashでAir for iOSとAir for Androidでそれぞれ書き出したファイルを他の人(クライアントとか)に確認してもらうときに、ネットワーク越し(iOSではOver The Air = OTAとかいうらしいです)でできると良いです。

iOSの場合はAdhoc書き出しが必要になります。
ふだんやってるネイティブの開発環境のXcodeでAdhocをやった場合と少し違っていたのでメモっておきます。

ファイル構成

ここでは仮にアプリ名をsampleとします

HTMLファイル
・インストールのリンク一覧が載ったhtmlファイル
(このファイルを用意しないで連絡するときにメールにリンク直書きでも可)

iOS用
・sample.ipa(アプリ本体 Adhocで書き出しておく
・sample.plist(拡張子がplistのテキストファイルです)
・xxxxxxxx.mobileprovision(プロビジョニングファイル Adhoc用にしておく) flashでもProvisioningは埋め込まれる

—-
2013/01/25 追記
クライアントからインストールできないとの連絡があり、調べてみました。

何故だかは全くわからないのだけど、Flash CS6 ver 12.0.2.529でAir for iOS書き出しをした場合は、

certificate:
development(開発用)

provisioning profile:
iOS Team Provisioning Profile(XcodeのOrganizer > LIBRARY > Provisioning Profiles の右下でRefleshを押すと自動で追加されるプロビジョニングファイル)

だとインストールができた。

逆に言うと、Xcodeで書き出すように、

certificate:
distribution

provisioning profile:
Distributionタブで作ったAdhoc用のもの

だと何故だかインストールができなかった。

なんで??? これって開発用の証明書で配布しちゃってOKってことなの???
ていうか何でそれが通るのかわからんです。

うーん、今後仕様がどう変わるのかわかりませんが、自分が試したところではこうなっているようです。
—-

Android用
・sample.apk(アプリ本体)

Basic認証やhttpsについて

上記ファイルたちをネットワーク上に置くのですが、Androidの場合はBasic認証がかかっていると駄目なようです。

>> apkファイルをAndroid端末(実機)にインストールする方法|Android|モバイル/スマートフォン|PHP & JavaScript Room

iOSの方は今までの経験からBasic認証がかかっていても、https越しでも問題なくインストールできました。

htmlとplistの書き方

htmlファイルの例

こんな感じのファイルがあればインストールする人もやりやすいかと思われ。

air_for_ios_android_over_the_air_fig1

※2013/01/25 コード修正

<!DOCTYPE> 
<html>
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width" />
<title>Adhocアプリのインストールのサンプルです</title> 
<style>
body{
	background:#fff;
	margin:0px;
	padding:0px;
	font-family: "Hiragino Kaku Gothic Pro W3", sans-serif;
}
p, dl, dt, dd{
	margin:0px;
	padding:0px;
}
#content_wrapper{
	font-size:14px;
	line-height:160%;
	background:#fff;
	width:700px;
	margin:0 auto;
	padding-top:15px;
	padding-bottom:15px;
	padding-left:30px;
	padding-right:30px;
}
h1{
	font-size:18px;
	margin-bottom:30px;
	color:#666;
}
h3{
	font-size:16px;
	margin-bottom:15px;
	font-weight:normal;
	border-left:5px solid #764ABC;
	padding-left:10px;
}
.install_area{
	border:1px solid #ccc;
	padding:15px;
	margin-bottom:40px;
}
</style>
</head> 
<body>
<div id="content_wrapper">
<h1>Adhocアプリのインストールデモ タイトルですよ</h1>

<h3>iOS版</h3>

<div class="install_area">

<p>iPadのSafariからご覧ください<br>
下記リンクをクリックしてインストールしてください<br>
<a href="itms-services://?action=download-manifest&url=http://xxxxx/xxxxxx/sample.plist">>> iOSアプリをインストール</a></p>
</div>


<h3>Android版</h3>

<div class="install_area">

<p>Android端末のブラウザからご覧ください<br>
下記リンクをクリックしてインストールしてください<br>
<a href="http://xxxxx/xxxxxx/sample.apk">>> Androidアプリをインストール</a></p>
</div>

</div>

</body>
</html>

気をつけるのはiOSアプリへのリンクにitms-services://?action=download-manifest&url=をつける必要があるところです。
あとそのときのURLは絶対パスとなります。

Xcodeから書き出す場合はプロビジョニングファイルをアップする必要がないのですが、Air for iOSではipaに埋め込めないので別でアップしてあげます。

すみません!Air for iOS でも埋め込まれてました。

plistファイルの例

sample.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>items</key>
	<array>
		<dict>
			<key>assets</key>
			<array>
				<dict>
					<key>kind</key>
					<string>software-package</string>
					<key>url</key>
					<string>http://xxxxx/xxxxx/xxxxx/sample.ipa</string>
				</dict>
			</array>
			<key>metadata</key>
			<dict>
				<key>bundle-identifier</key>
				<string>com.foo.apps.sample</string>
				<key>bundle-version</key>
				<string>1.0.0</string>
				<key>kind</key>
				<string>software</string>
				<key>title</key>
				<string>サンプルアプリですよ</string>
			</dict>
		</dict>
	</array>
</dict>
</plist>

bundle-identifierやbundle-versionはFlashやFlash Builderから書き出したときに使ったものと揃える必要があります。
ちなみにbundle-identifierは、そのアプリの固有のidです。リバースドメインでつけます。
私の場合だと例えば、com.kumade.apps.sampleとかそんな感じ。

ではでは。

LINEで送る
Pocket

[AS3] Flash Builder4.7で英語メニューにする

2013/01/17

こんにちは。きんくまです。
Flash Builder4.7をCreative Cloudでインストールしました。
そしたら私の設定が全体をアンチエイリアスなしにしてあるので、ウインドウや各タブのタイトル部分が日本語だとうまく読めない感じになってました。
なので、英語化する設定のメモです。

Application / Adobe Flash Builder 4.7 / Adobe Flash Builder 4.7アイコン -> 右クリックからShow Package Contents
Contents / MacOS / Adobe Flash Builder 4.7.iniをエディタで開く

2行目の
ja_JP

en_US
に変更する

これでメニューが英語になります。

ウインドウやタイトル関係の書体変更は
General / Appearance / Colors and Fonts / View and Editor Folders /
Part title font と View message font
となります。

LINEで送る
Pocket

[iOS] 日課 / 習慣 / ルーチンワークを記録するiPhoneアプリのHabitKeeper バージョン1.3にアップデートしました

2013/01/15

こんにちは。きんくまです。

昨日は首都圏にも久しぶりに大雪が降りまして、こどもたちと雪だるまを作ってました。
こどもたちは超ハイテンションでした。大人(嫁)は会社の通勤のことを考えてテンション低めでしたw

さて日課/習慣記録アプリのHabitKeeperが1.3にアップデートされました。
>> iTunesでみる

今回の新機能は

– 各日課ごとのカレンダーを追加しました
– アプリのナビゲーションをタブベースからリストベースに変更されました
– URLスキームが利用可能になりました
habitkeeper://

です。あとアプリのカレンダーを和暦にしてある場合のカレンダーの曜日がずれる不具合も修正しました。
URLスキームを加えたので、さきほどランキングに入っていたランチャーアプリの作者様たちへ登録申請の連絡をしてみました。加えてくれたらいいな。

それで今までは、日課をまとめて見せていたのですが、個別のカレンダーがついたことで、一覧性があがりました。

 

やった日(チェックあり)とやらない日(白)、またはやるべき日(グレーの点あり)が載っています。

次のアップデートとか

いろいろとご要望をいただいていて、どれにしようか迷っているのですが、次回のアップデートは小粒のアップデートにしようかなと、

・1日表示画面、カレンダー画面のスワイプでの切り替え機能
・グラフ機能の改善

にしようと思ってます。カレンダー表示でのスワイプは競合アプリでは左右で月替え、上下で日課替えという機能がついてたり、ついてなかったりしまして。これを実装できたら使いやすくなるかなと思います。
1日表示のスワイプ左右きりかえは週末に技術的な検討つけておいたので、あとはカレンダーの上下左右がムズかしそうだなーと。できるかな?左右だけか上下だけかだったらできそうなんだけど。うーん。

グラフ機能は、実は要望がきてない部分だったりするんですがw、自分的にどうしても前々から改善したくて、値にラベル貼ったり平均値を表示したいなと思っとりました。
グラフは前にあんまり利用していないというメールをいただいたのですが、これって現状が見るだけの価値がないからなんじゃないかなーと。改善してちょっとは見てもらえたら嬉しいなと思ってます。

もし次回のアップデートがうまくいけば、日課や習慣を記録して閲覧するというアプリの基本機能としては十分かなと思っているので、あとは目標管理やパスワードロック、バックアップ、メモ追加などのオプションを組み込んでいきたいですね。
そう、リマインダーの要望もいただいたのですが、iOSの標準で用意されているリマインダーのリピートサイクルとこのアプリのリピートサイクルがうまく合っていないため、つけるとかえってユーザーが混乱するか使いにくい使い勝手になりそうだったので、現在は保留にしています。
iPhone版が完成したらiPadにも対応したユニバーサルアプリにして、、などと夢はつきませんが、ゆっくりやっていきたいと思っています。

LINEで送る
Pocket

[iOS] デバッグ時に時間計測するシンプルなクラスをつくった

2013/01/11

こんにちは。きんくまです。

アプリのアップデートの申請がおととい終わりました。
最近は審査が始まるまでに受付から5〜7日ぐらいかかっているので、うまくいけば来週か再来週にはリリースされると思います。

それで、作っているときに画面遷移の時間がひっかかる部分がありまして。
どうもボタンを押してから次の画面に移るまでに止まってしまっている状態なんです。
iPhone5だとほとんど気にならないのですが、iPhone4だとちょっと気になるスピード。
どこが詰まっているところなのかなと計測したいなと思いました。

時間計測のライブラリで何か良いのないかな?とググってみたんですが、うまく見つけられなかったので作ったのが今回のクラスです。

GitHubにアップしました
>> KinkumaDesign/KKMeasureTimeLogger · GitHub

簡易なデバッグツールなんで、ボトルネックの検討をつけるみたいな目的に使います。

使い方

1.
KKMeasureTimeLogger.h と KKMeasureTimeLogger.m をプロジェクトに入れる

2.
計測したい実装ファイルに #import したらコードを書く

    /*
     * 始めにこのメソッドを使う
     * モードは2種類
     *  KKMeasureTimeLogModeAtOnce  > lap をすると同時にログを出す
     *  KKMeasureTimeLogModeAfter   > stop したときにまとめてログを出す
     */
    [KKMeasureTimeLogger startWithLogMode:KKMeasureTimeLogModeAfter];

    //途中計測(何度でも使用可)
    [KKMeasureTimeLogger lap:@"好きなメッセージをここに書きます"];

    //終了処理
    [KKMeasureTimeLogger stop];

3.
出力結果例

-- Time result
From start 0.000014 sec. From last lap 0.000004 sec <= button tapped in master view
From start 0.001058 sec. From last lap 0.001044 sec <= detail view did load
From start 0.001190 sec. From last lap 0.000132 sec <= detail view view will appear
From start 0.355751 sec. From last lap 0.354561 sec <= detail view view did appear

startしてからの時間と前にlapしたときからの時間の2つが、好きなメッセージと一緒に表示されます

利点

シングルトンなので、別々のクラスから使ってもアプリを通して計測することが可能です。
GitHubのサンプルコードではリストナビゲーションで親ビューから子ビューに遷移するときにかかる時間を計測しています。(..ていうか、これ自分が作ってたアップデートで詰まってた部分がまさにこれでした)

上の例では親ビューのボタンが押されてから子ビューのviewDidLoadが完了するまでに0.001044秒かかっていることがわかります。

あとNSLogは意外と時間がかかってしまうので、出力をすぐに行うか、まとめて行うかの2つのモードを用意しました。まとめて行えばNSLog自体は最後に1回なので気にしなくて大丈夫です。

厳密にはこのクラスの呼び出し時間もかかってしまっているので、実際よりは時間も遅くなっているのですが、あくまで検討材料を手軽に提供するみたいな感じでございます。

もし良かったら使ってみた下さいませ。

---

おまけ
時間計測でググったときに、こんなページを発見しましたです。
試してないのですが、もう少し細かく計るときに良いのかもしれないです。

>> iOSアプリでのパフォーマンス測定方法 - Awaresoft

LINEで送る
Pocket

[日記] 2013 あけましておめでとうございます

2013/01/6

2013年あけましておめでとうございます。きんくまです。
今年もよろしくお願いします。

2013_nenga

年始に思いついたことをまとまりなく、つれづれと書いてきます。

ブログ

このブログの記事が他の開発者さんたちに地味に役に立ってる話を聞いたので、良かったです。
自分もプログラミングを始めたときに、わからないことがあって他の方の情報にずいぶん助けられたのでお返しはできているかな。
入門用の記事はアクセス数が多くてニーズがあるんだなーと思ったり、でも一方ハマったポイントの対処法の記事はニーズは少なくても困ってる人からすると助かる情報かもなーと思ったり。

去年1年間のアクセス数などは別エントリで載せてみようかと思ってます。

HabitKeeper

自作アプリのアップデート対応の進捗状況は、年末年始にコツコツやっとりまして70%ぐらい。
タブベースからリストベースに変更したので、中身を大分作りかえました。結構大変だった。
あとは、いくつかの画面を作ったり、ツールアイコンをわかりやすく作り替えたりとかかな。
1月中にはリリースできると思います。

売り上げは正直お小遣い程度ですが、代わりにいろいろと勉強になっています。
機能面はもちろん、ユーザーからの要望への対応、値付けなどなど。

自分はゲームや、エッジな表現を生かした作品のようなものというよりは、こういった「あるとちょっと便利なツール系」が得意みたいです。FlashやFireworksでもそういった小さな機能拡張ツールを前によく作っていたのでその延長線上みたいな。去年は、そういった自分の得意分野を自覚できたことが大きな収穫だった気がしています。

勉強したいこととか

英語の勉強はだらだらながら3年続きました。年を重ねるごとに前に進んでいることは確かなんですが、なかなか難しいですね。今年も続けていきたいと思ってます。

プログラミングではサーバー側を少しずつやっていきたいです。
ためしにPHP+MySQLで投稿+閲覧のみのひと言投稿システムをローカルに作ってみたりしてました。
最近のPHPは普通にOOPができるみたいなんで、一般に言われているほど悪い言語でもないような気がしてます。

あとは、プログラミングには関係ないんだけど確率・統計を勉強したいです。
前にソーシャルゲームのガチャで確率の話が出て少し興味があったんだけど、それ以外にも音声認識にも確率の話がでてきてたり、アプリの売り上げが統計的にどうなの?とか分析できたら面白そうだと思ったりしまして。

というわけで

今年もゆるーく、ブログを更新していこうと思ってますのでよろしくお願いします。

LINEで送る
Pocket

ページトップへ戻る