こんにちは。きんくまです。 スマホ向け、フルスクリーンコンテンツを作るときの個人的なメモです。 フルスクリーンの定義はいろいろとあると思いますが、 今回想定した条件は ・ウインドウに対して、コンテンツの高さが足りても足りなくてもよい（＝スクロールが発生してもしなくてもよい） ・横スクロールなし、縦スクロールのみ ・ヘッダーフッターメニューが画面に対してposition:fixedでついている といったものです。 作ってて、画面中央に何かを表示したいときの座標を求めるときに、正確な値を取得する方法がよくわからなかったので、やってみようと思いました。 ・ウインドウの幅・高さ ・コンテンツの幅・高さ がわかれば、中央ぞろえを計算することができます。 そのとき、どのプロパティがどういうものかを実際にデモを作って調べてみました。 検証用のhtml すんごく個人用なので、display:noneに書き

こんにちは。きんくまです。 ※2013/08/10修正 コメントいただきました！ 以下の情報は先日公開されたTypescript 0.9.1で直ってました。 どうやら0.9.0だけのようです！ 以下もと記事です ——————————— 今回はTypeScriptのenumの挙動についてです。 C言語の場合 C言語だと（ひょっとしたらコンパイラに依存するかも。今回はLLVM） enum Color{ Red, Green, Purple, Blue, Yellow }; と書いたときは、 Red -> 0 Green -> 1, Purple -> 2, Blue -> 3, Yellow -> 4 となって、0スタートではじまって、1ずつインクリメントされます。 enum Color{ Red, Green, Purple = 8, Blue, Yellow }; 上のように途中で値を設定

こんにちは。きんくまです。 Retina対応を調べてました。 わかりやすくまとめられてました。 >> Webサイト＆WebアプリのRetina対応方法まとめ | KRAY Inc で、sassでmixinとかあるんじゃないかなと思ったら公開されてました。 >> FREE! Sass (SCSS) mixin for including retina images (useful when developing for iOS). どちらも貴重な情報ありがとうございます！ んで、これを組み合わせて、スプライトシート版にしたいなーと思って、ちょっとだけ加えたのがこれです。名前が長いんで、適当に短くするとよいかも。 @mixin background-image-retina-with-spritesheet($file, $type, $width, $height, $posX, $posY

こんにちは。きんくまです。 ちょっと前に調べたことがありまして。タイトルのとおり、html5 / JavaScriptで音を鳴らす方法についてです。 いきなりなんですけど、html5 / JavaScriptって、動画 / 音声関連が非常に不安定だと思ってます。不安定というか、各ブラウザに同じように対応させようと思うと、キツいといいいますか。Chromeみたいに突っ走っているブラウザばっかりじゃないんですよね。モバイル関連とか、IEとかIEとか。 愚痴はこのぐらいにして、調査報告です。 まず、htmlで音を鳴らすには２種類の方法があります。 1) HTML5のaudioタグ 2) JavaScript APIのWeb Audio API 1) HTML5のaudioタグ audioタグは、<audio src=”sample/xxxx.ogg” > とかやれば、勝手にいろいろとやってくれる

こんにちは。きんくまです。 設定ファイルをJSONで書いて読み込むということをやろうとして、はまったのでメモです。 jQuery.getJSON()を使ってやってみたところ、どうにも読み込みハンドラが呼ばれないのです。 $.getJSON('path/to/jsonfile.json', function(jsondata){ console.log(jsondata); //これが呼ばれない }); んで、いろいろと試したりしたのですが、どうにもうまくいかず。 リファレンスを読んだところ、 Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data

こんにちは。きんくまです。 アプリのアップデートの申請を先週末に済ませました。なので、今週中には審査の結果が出るかと思いますです。 さて、アプリのサポートページというかランディングページといいますかそれを今作り直してます。 そんで前のバージョンでは、Sass用ライブラリBourbonというのをヒネて使ってみたのですが、Compassの方が人気があるので、今回はおとなしく使ってみることにしました。 で、ソースマップが実用化されてるらしいので、そうかそうか。Sassでやったらどうだろうとググってみました。 ところでソースマップって？ ここでソースマップとは何かを説明します。 まず最近はcssやjsの生産性を上げる動きがあります。それには、言語をそのままを書かずに、scssやCoffeeScript、TypeScriptなど別の言語をいったん書いて、そこからcssやjsにコンパイルします。 この

こんにちは。きんくまです。 １月からの新アニメは面白いのが結構ありまして。で、琴浦さんが好きな感じです。 HPに書いてあった原作の出版社がマイクロマガジン社とか書いてあって、あれ？これってもしかしてと思ったら、昔出版されてた「ゲーム批評」という雑誌の出版社で、懐かしさでいっぱいになりました。 初期の頃はよく読んでたんですよねー。途中からあんまりゲームやらなくなって見なくなってしまったのですけど。 自分はこういうマイナー雑誌のコラムとかが結構好きでした。 さてここから本題です。 FlashでAir for iOSとAir for Androidでそれぞれ書き出したファイルを他の人（クライアントとか）に確認してもらうときに、ネットワーク越し（iOSではOver The Air = OTAとかいうらしいです）でできると良いです。 iOSの場合はAdhoc書き出しが必要になります。 ふだんやってる

フォーマットはタブを切り替えることで、６つまで設定することが可能です。 例2) CSSを書いているときに、画像のwidth,heightを目視で調べて、 またエディタに戻って打ち込んで、、、という作業は続けているとすごく疲れます。 そんなときに、こんなフォーマットを書いておきます。 width:%wpx; height:%hpx; left:%xpx; top:%ypx; それで、またスライスを選択して、挿入ボタンを押すとこんなコードが吐き出されます。 width:99px; height:95px; left:47px; top:60px; あとは、挿入ボタンのとなりのクリップボードボタンを押して、クリップボードに転送して、 好きなエディタに戻ってコピペすれば楽ちんです。 フォーマットには好きな文字列をいれることが可能なので、案件や普段使っている書き方を 書いておくと良いと思います。 ま

こんにちは。きんくまです。 文字コードの本を読んでいます。 >> プログラマのための文字コード技術入門 (WEB+DB PRESS plus) どうやって文字を表すのかということや、ビットを駆使してなんとか文字を詰め込んだりしてたことがわかって面白いです。 それで、base64という符号化の仕組みが本の中で出てきました。 >> Base64 名前を聞いたことがあっても、どういうものかいまいちわからなかったので、調べてみました。 そんで実際にエンコードしてみようと思い、プログラムを書いてみました。 #include <stdio.h> #include <string.h> int charToBinary(char s, char *binstr, int offset){ int encoded; int i; for(i = 0; i < 8; i++){ encoded = ((s

こんにちは。きんくまです。 先日の土曜日にF-siteで話す予定でした。 が、金曜日に父が亡くなりまして、急遽行けなくなってしまいました。 当日、会場にこられた方や、スタッフの皆様にはご迷惑をおかけしました。 すみませんでした。 ただ、せっかく作った発表用のものがありますので、アップします。 今回お題はjsflを使って何かをするというものでした。 それで、仕事の効率化みたいなものは、他の方々がすばらしいものを作ってくるだろうなと思ったので、 私はネタ担当と勝手に思い、「jsfl使ってこんなこともできたよ！」というものを作ろうと思いました。 なので、ブラウザからflashのステージ上や同時接続している他のブラウザにも描き込む お絵描きチャットを作ってみました。 flashとサーバーの通信は、WindowSWF（拡張パネル）からSocket通信をしています。 ブラウザとサーバーはWebosoc

こんにちは。きんくまです。 CSS3アニメーションのこんなコードを書いて、あるエレメントに適用しました。 @-webkit-keyframes flapping { 0% { -webkit-transform:scale(0,0); opacity:1; } 100% { -webkit-transform:scale(1,1); opacity:0; } } でも、iPadでスクロールさせたときに、CSS3 アニメーションが止まってしまい、困ってしまいました。 正確に言うと、0%のキーフレームの位置からそれ以上進まなくなってしまうのです。 ググったところ、こんな感じのページを発見。 >> GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 CPUからGPUのレンダリングの切り替えのタイミングでsafariがちらつくとのこと。 最初からGPUレンダリングを使えば、そ

このブログについて こんにちは。きんくまです。 フロントエンドエンジニアです。自作のiPhoneアプリを作っています。 ・web (JS / TypeScript) ・iOS (Swift / Objective-C), ・Animate/AIR (ActionScript3), などフロントエンド寄りのプログラムや日記をゆるーく更新してます 作ったもの フォルダとメモ帳 – フォルメモ (iPhone) ジッピー電卓 無料版 - 消費税と割引計算機 (iPhone・iPad) ジッピー電卓 Pro 消費税と割引計算機 (iPhone・iPad) Rapid Calc スマホで使えるお手軽電卓！(ブラウザ版） MinimalClock シンプルなデスクトップ用デジタル時計 mac版（フリーソフト） Habit Keeper 日課 / 習慣 / ルーチンワークを管理 / 記録するiPhone

こんにちは。きんくまです。 mieloggerという名前のjQueryプラグインを作りました。 これは、文字列をブラウザー上に表示できるようにするものです。 日本語の「見える」とlogger「ログするもの」を合わせた名前です。 これはモバイルアプリ（iOSとかAndroidとか）でWebブラウザを使うときに、非常に便利なものです。 なぜなら、これらのデバイスはconsole.logを出力しても見えないからです。 でも、ブラウザーでログが見えたらいいですよね。 update 2011/12/10 >> デモ >> mieloggerをダウンロード 使い方 最初に、jQuery と mielogger.jsを取り込みます。 <script src="jquery-1.6.2.min.js"></script> <script src="mielogger.js"></script> 次に、mi

こんにちは、きんくまです。 JSの非同期処理のライブラリを書きました。 これです。 if(!window.kinkuma){ window.kinkuma = {} } (function(pkg){ /** * Command - base class */ pkg.Command = function(){ this.delegate; }; pkg.Command.prototype = { execute:function(){ }, onComplete:function(){ if(this.delegate){ this.delegate(); } } } /** * FuncCommand - function command * @param func Object - function reference you want to run */ pkg.FuncComma

こんにちは。きんくまです。 AS3のEventDispatcherは便利だと思います。JSでは特に用意されていないので作りました。 こんな感じです。 var kinkuma = {}; //package name (function(pkg){ pkg.Event = function(){ this.target; this.context; }; pkg.Observer = function(){ this.listeners = {}; }; pkg.Observer.prototype = { addObserver:function(type, listener, context){ var listeners = this.listeners; if(!listeners[type]){ listeners[type] = []; } listeners[type].pus

こんにちは。きんくまです。 AS3を勉強しはじめたころ、interfaceの役割が全然わかりませんでした。 それで、最近わかってきたと思うので、書いてみようと思います。 interfaceって何？ 簡単にいうと、「合い言葉（interfaceの関数名）を決めておくから、合い言葉を言われたら、自分で決めておいたこと（各自の実装）をそれぞれしてね。」 って言う感じでしょうか。 それで「これらのバラバラに実装されたオブジェクト同士をまとめて動作させたい時」に非常に有効だということです。Arrayとかに全部ごっちゃまぜにつっこんで、interfaceで決めた関数を呼び出すときに非常に役に立ちます。 あと、「interfaceに書いてあること以外に何ができるか知らないけど、interfaceに書いてあることは絶対にできるはずだから、やらせちゃえ！」みたいなことも可能です。これはあとで説明します。 例

非同期処理でネットワークからファイルをダウンロードして、指定のFileに保存するクラスを作りましたです。 今回の使い方アプリは、 ダウンロードボタンを押すと、ネットワークからダウンロードがスタート 終わったら、SDカードに保存します。 ■作り方 AndroidManifest.xml にユーザー許可を追加します。 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.INTERNET"/> main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/

カスタム動画プレイヤーを作ろうとして、MediaPlayerを使ったところ、 うまくいきませんでした。 動画ファイルを assets/ か res/raw に置いていました。 ググったところ。解決方法を発見！ assets/video_file.mp4にファイルを置いていたら _player = new MediaPlayer(); AssetFileDescriptor afd = getAssets().openFd("video_file.mp4"); _player.setDataSource(afd.getFileDescriptor(), afd.getStartOffset(), afd.getLength()); _player.setDisplay(_holder); //_holder is SurfaceHolder of SurfaceView _player.pr

こんにちは。きんくまです。 私は普段Flash Builder（FB）を使って開発しています。 最初に、Flash CS5.5のアプリからswcを書き出して、 FBからそれを読み込む それでFB上でコンパイルという順です。 それで、ローカルのムービーファイルを読み込もうとして セキュリティエラーのダイアログが出ました。 ダイアログにはこう書かれていました。 SecurityError: Error #2148: SWF file file:///Users/kinkuma/Documents/temp/main.swf cannot access local resource ./video/samplef4v.f4v. Only local-with-filesystem and trusted local SWF files may access local resources. ググ