[Mac]StatusTimer / Mac用タイマーアプリ

StatusMenu_sc1
メニューバーの右側に常駐するアプリあるじゃないですか。

あれでタイマーが欲しいなと思っていた訳ですよ。それでしばらく情報を集めつつ、ちまちま作っていた訳ですが……出来ました!


  • Status Timer
    ステータスバーに常駐し、通知センターで教えてくれるタイマーアプリ。1分〜6時間まで対応。


    StatusMenu_set

    しかし、MacAppStoreで配布するにはアップル様にMacOSDeveloperとして登録して、今のiOSデベロッパーの年間1万円にさらに年間1万円を上納しないと出せない訳で……高いなー……また今度考えよう。

    そういう訳でこの辺に野良アプリとして置いときます。FREEです。

    ちなみにOSX10.9 Marvericksだと知らないアプリだから実行出来ませんとか言われると思いますが、MacAppStoreとMacDeveloperに登録していないとそう言われるようです。たぶん右クリックから実行するとかで実行出来たと思います。

    アプリは問題無いです。MacOSXのセキュリティ設定のせいです。アップルの囲い込みが激しいと思う今日この頃。

    以下興味のある人用、技術者向け読み物。

    メニューバーに常駐するアプリの作り方

    かいつまんで要点をまとめると次のような感じです。

    ・ドックに表示しないようにする
    ・起動時にウィンドウを表示しないようにする
    ・ステータスメニューアイテムを作って、クリックでメニューを表示するようにする

    ◯ ドックに表示しないように。
    TARGET>Info>Custom OSX Application Target PropatiesにApplication is Agentを追加。YES。

    ◯ ウィンドウを起動時に表示しないように。
    WindowのプロパティのVisible at launchをオフにする。

    StatusTimer_w_visible

    ◯ ステータスバー用のメニューをxibで作成。

    これを.mファイルにStatusMenuプロパティとして設定します。Ctrl+ドラッグですね。

    @interface stAppDelegate ()
      @property (weak) IBOutlet NSMenu *StatusMenu;
    @end
    

    ちなみにiOSだと@implementationにアウトレットが接続出来る訳ですが、Macだと出来ない模様。やると勝手に@prppertyが作成されてローカル変数の方はアンダーバー付きのものになります。

    個人的にこの方式は好きじゃないので、ローカル変数の方を削除。@propertyだけ残します。

    あと話が飛びますが、iOSで未だに@propertyを@synthesizeしてるのを良く見ます。@propertyは@synthesizeしなくともselfをつければアクセス出来ます。syhthesizeする方式は古いです。撲滅しましょう@synthesize。

    ◯ 本体(?)作成。ステータスバーに常駐するやつですね。ステータスアイテムと言うのが正式なのでしょうか?まあ仕組みが分かると本体では無いと言うことが分かりますがとりあえず。クリックした時にメニューが出るようにします。

    @implementation stAppDelegate{
        NSStatusItem *stItem;
    }
    
    - (void)applicationDidFinishLaunching:(NSNotification *)aNotification{
    
      //ステータスバーのインスタンスを取得
      NSStatusBar *systemStatusBar = [NSStatusBar systemStatusBar];
    
      //ステータスアイテムを作成
      stItem = [systemStatusBar statusItemWithLength:NSVariableStatusItemLength];
      [stItem setHighlightMode:YES];//ハイライトする
    //  [stItem setTitle:@"StatTimer"]; //文字を設定する場合
      [stItem setImage:[NSImage imageNamed:@"Icon16.png"]];//画像アイコンを設定する場合
    
      //クリックした時にself.StatusMenuが表示されるようにする
      [stItem setMenu:self.StatusMenu];
    
    }
    

    ・あとはSettingとかQuitとかのメニュー項目をアクションやらOutletとして繋いだりして実装して行く訳です。この辺はiOSとほぼ同じです。

    参考リンク:
    http://cocoatutorial.grapewave.com/2010/01/creating-a-status-bar-application/

    http://genjiapp.com/blog/2013/01/04/how-to-develop-a-status-bar-app-for-os-x.html

    https://developer.apple.com/library/mac/documentation/cocoa/reference/applicationkit/classes/nsstatusitem_class/Reference/Reference.html

    Macで通知センターを使う方法

    NSUserNotificationCenterというものを使います。これが通知センターらしいです。これにNSUserNotificationオブジェクトを渡すと通知してくれる仕組みみたいです。

    まず起動時にヘッダーにNSUserNotificationCenterDelegate宣言して、applicationDidFinishLaunchingでデリゲート。

    [[NSUserNotificationCenter defaultUserNotificationCenter]setDelegate:self];
    

    次にローカル変数を宣言。なんでローカル変数にしてるかと言うと、キャンセルすることがあるからです。

    @implementation stAppDelegate{
        NSUserNotification *scheduleNotif;
    }
    

    以下のカスタムメソッドで実行します。

    //ノーティフィケーションをスケジュール
    -(void)setScheduleNotification:(int)min{
        
        scheduleNotif = [[NSUserNotification alloc]init];
        int scheduleTime = min * 60;
        scheduleNotif.deliveryDate = [NSDate dateWithTimeIntervalSinceNow:scheduleTime];
        scheduleNotif.title = [NSString stringWithFormat:NSLocalizedString(@"TimePassed", nil),min];
        scheduleNotif.informativeText = @"Status Timer";
        scheduleNotif.soundName = NSUserNotificationDefaultSoundName;
        
        [[NSUserNotificationCenter defaultUserNotificationCenter]scheduleNotification:scheduleNotif];
    
    }
    

    ちなみに、最後のscheduleNotification:をdeliverNotification:に変えるといくらdeliveryDateを設定しようともすぐさま実行されます(はまりどころ)。

    キャンセルする時はこう。アップル的にはリムーブらしいですね。

      [[NSUserNotificationCenter defaultUserNotificationCenter]removeScheduledNotification:scheduleNotif];
    

    おまけ

    なお、タイマーの分数を保存してる訳ですが、何でやってるのかと言うと、NSUserDefaultsです。そう、iOSにあるアレです。同じです。iOSで覚えたことは結構Macでも活かせます。ではまた。

とろりんガリガリ君を確保せよ2014春

何でも書いてみるテスト。

garigari_2014427_1

最近ナポリタン味やら、コーンポタージュ以来どこまで行くのかと思われたガリガリ君ですが、なんとなくまともそうな味が出ました。

イレブンとの共同開発「ミルクたっぷりとろりんシュー味」。

買う買ういいつつようやく近所のイレブンで手に入れました。側に「ナポ……」とか言う文字が書かれたナニカのパッケージも見えましたが全力で回避。ふぅ、危ない危ない。149円也。

開封。

甘ぇ……。簡単に言うと練乳。ちょっと小難しく言うとスキムミルク。成分で言うと砂糖とミルク。そういった類のものシュー味のガワの中にとろりんと中に入っておりました。

んー、まずくはないんだが……普通の多少リッチなアイス。自分がガリガリ君に求めるのは新奇性と美味しさの両立。だが新しく無い気がするっ。

リッチチョコとかコーンポタージュやら結構リピートしてた気がするんですが……おしい。

以上「ミルクたっぷりとろりんシュー味」リポートでした。

Webのアプリ化を考える

tusin

レスポンシブデザインについて調べてみるとモバイルファーストと言う考え方に辿り着きます。

http://ascii.jp/elem/000/000/697/697463/index-5.html

要約すると、まずモバイル用に作って、どこでも情報にちゃんとアクセス出来るようにすると言うことだと思います。

制約があるから集中出来るとか、モバイル端末の機能を使うとかは、ちょっととってつけた感があります。まあそういうことでしょう。

Webのアプリ化

ここ数日目次作ったりレスポンシブデザインにしたりしてた訳ですが、これ、良く考えるとWebのモバイルアプリ化なんじゃないかと思った訳です。

今はまだページ然としてますが、これにインターフェースやアニメーション、プログラムを加えると……今あるようなネイティブアプリみたいにになりますよね。

以下妄想。

HTML5号は倒れたままなのか

iPhoneも当初はWebアプリだけを考えていたと言います。

それが現在のネイティブアプリ全盛になった理由としては、起動が遅い、処理が遅い、レスポンスが遅い、などの遅いづくしだったせいだと思います。

HTML5もFacebookが撤退したせいで終わったと言われています。

果たしてWebアプリは終わったのか。いや、そこにしか無い情報のある限り無くならないのではないか。

ちなみに、アップルはネイティブアプリからWebページを表示するだけのアプリは禁止してたはずなので、WebView乗っけてURLだけ書いて〇〇サイトをアプリ化!……とかは出来ない訳です。Androidは良く知らないのですが…。

Webアプリのネットワークとか

iPhoneでウチのページから「マメニュ」を立ち上げて貰うと分かると思うんですが、シームレスに他のページがアプリとして起動します。あ、更新は突っ込まないで。

モバイルwebの概念がページからページへ移動では無くて、アプリの移動と言う感じになります。使い方が変わる気がします。

マメニュとか素朴なテクノロジーを使ってるのであまりアプリらしくありませんが、現在の技術を使えばもっとアプリらしくすることも出来ます。

これを押し進めるとどういう感じになるのか。

ちょっとまだ想像出来ませんが、夢が無限に広がる大宇宙……というお話でした。

レスポンシブデザインに対応

ReponsiveIM

まあ……大体出来た……かな。iPhoneからでも使い易くなりました。

レスポンシブデザインとは何か

PCとかiPhoneとか、タブレットとか世の中には色んなサイズの端末があります。

これをCSSを工夫することによってなんとかサイズの違う多様な端末に対応したデザインにしようと言うのが、レスポンシブデザインになります。

詳しくはこの辺読んでもらうとして。

ブラウザの幅を変えてみてもらえれば成果が分かると思います。

何をやったのかと言うと

  • 画面幅が小さくなったら display: noneでサイドバーを消す
  • それより小さくなったらメインの幅を%に
  • トップイメージの画像や文字の位置を%で指定。
  • サムネイルの大(size-large)と中(size-medium)を%表示に
  • iPhone用にヘッダーにメタタグを記述。
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

みたいなことを作りながら1コ1コ対処してみたらなんとなくそれっぽくなりました。

基本的に幅さえなんとかすればなんとかなります。高さはautoで十分です。

メディアクエリー

画面の幅でCSSを切り替えるのにはメディアクエリーと言うのを使います。
ソース書くとこんな感じ。

幅600ピクセルを超えると幅がauto(本来のサイズ)に切り替わります。

img.size-large{
	width: 100%;
	height: auto;
}
@media screen and (min-width:600px){
	img.size-large{
		width: auto;
	}
}

padding……

なんかいくらやっても横スクロールバーが出やがりまして。凄く謎だったんですが、paddingのせいでした。

paddingと言うのはdivとかの枠の内側に余白を持たせるCSSなんですが、これが元の幅に”足して”サイズを決定するものなんです。

例えば幅300ピクセルにpaddingを左右20ピクセル入れようと思ったら、幅を260ピクセルに変更しないといけません。……誰なんでしょうねこの仕様を考えた人は……。

という謎仕様によってあちこちに微妙なズレがあったんです。最終的にほとんど使わないことにしちゃいましたけど。いや、強敵だった。レスポンシブデザインの大ボスがpaddingだったとは。

もしやってみて、何故か横スクロールしてしまうと言うときはpaddingとかで何かはみ出てないかチェックしてみるといいかと思います。

[iPhone]kaimono 1.4 リリース

kaimono1_4sc.png

iOS7、消費税計算に対応

kaimono1.4リリースしました。iOS7、消費税計算に対応。

地味〜なところで言うと合計の3ケタ区切りに対応してます。これで数千万の計算でもダイジョブ大丈夫。

消費税はオプションでオンオフ出来ます。いらないときも安心。メイン画面にオンオフつけようかとも思いましたが煩雑過ぎるのでこうなりました。

プログラムの不思議

ところで、アプリ作るといつも思うんですが、作ってる最中はえらい大変なのに、出来上がると簡単に作ったように見えるのはどういうことなんでしょうね?今回も技術的にはチャレンジャーだったんですが、まるで普通に見えるのはどう言うことなのっ。

シンプルに作るのを心がけているせいなのか、はたまたそういうものなのか、それとも妖怪に騙されてるとか。え、妖怪?だまされてる?

とか思いましたが、よくよく観察してみると、プログラム作業の半分は「ドキュメントを読むこと」なんですね。動かすのには知識が必要。そこに時間が吸い取られます。まあ知識なので、一度習得すれば作るのは速くなると思います。

そして忘れ物

About画面のレビューボタンにリンク忘れました〜。次で対応。
お役に立ちますように。

kaimono – 買物メモ&計算機