image-wave

kumapom's page

あけおめシューティング2018

あけましておめでとうございます。

え、三が日で「犬が空を飛んでネコのようなものと戦うシューティング」をUnityで作成いたしました。やーやれば出来るね!

URLはこちら
http://image-wave.com/AkeOme2018/

PCブラウザ用です。Firefoxで動作確認しました。以上。Safariはなんかダメね。対応してるはずなんだけど、おかしいなぁ……。

操作はPCゲーにありがちなキーボードWASD移動と、マウス左クリックファイアです。まあ普通かな?

これでだいたいUnityにおけるシューティングの基本が分かったので、色々作れると思います。

なお、制作ツールは

  • プログラム:Unity
  • グラフィック:Pixen、Blender
  • 音楽:LMMS

All 制作 by kumapomでお送りしております。

あ、地味にバージョンアップもするかもしれません。たまに見てみると吉かも。

ではまたー。

[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でも活かせます。ではまた。

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とかで何かはみ出てないかチェックしてみるといいかと思います。

目次っぽいページを作ってみた

このサイトのWordPressテーマ、お手製なんですが(リンク)、ナビゲーション的にちょっと問題があるなと思ってました。

そうだ、目次を作ってみよう。

という訳で、いまんとここんな感じ

>>続きを読む