SplitPaneを使ってみる

  • POST
この記事はIonic Advent Calendar 2017の8日目の記事です。 フリーランスの村上です。Ionicを使用してv1の頃からアプリを作成しています。 SplitPaneはデスクトップまたはiPadなどのタブレット向けに利用できるコンポーネントです。ざっくり言ってしまえば普段利用しているMenuコンポーネントを常時表示した状態になります。 現在仕事で作っているサイトでSplitPaneを利用しています。実現したいことに対して詰まったのでコードを紹介しようと思います。 まずはサンプルベースでSplitPaneを表示してみます。 一般的なサイドメニューがあるアプリコードをion-split-paneタグで囲むだけで利用できます。簡単ですね。 <!-- app.html --> <ion-split-pane> <!-- our side menu --> <ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button ion-item *ngFor="let item of menu1" (click)="changeRoot(item.pageName)"> {{item.label}} </button> </ion-list> </ion-content> </ion-menu> <!-- the main content --> <ion-nav [root]="rootPage" main #content></ion-nav> </ion-split-pane> // menu.ts export interface Menu { pageName: string; label: string; } // app.component.ts @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage: any = 'HomePage'; menu1: Array<Menu> = [ { pageName: 'HomePage', label: 'Home', }, { pageName: 'PushRootPage', label: 'PushRoot', }, ]; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.

Global Game Jam 2017熊本会場に参加しました

  • POST
Global Game Jam 2017に参加してきました。48時間でゲームを作るというハッカソンになります。今回は1月20日17時から22日17時までの48時間です。 熊本では過去に数回開催されておりますが、当時は自分の実力に自信もなかったので今回初参加になりました。今も自信あるかと言われれば別にないんですけどね。 そんなわけで出来たもの。 Space Traveler Hamon お題は「WAVES」ということで、波つまり波紋ということで重力だったり引力だったりの想起から惑星を置いて星へロケットを導くゲームになります。 チームとしては最初から最後まで参加したのが5人、途中離脱、途中参加が 2人で計7人な感じです(あと助っ人のスポット参加)。みんなプログラムがかけたので、全員のコードやら素材が入ってる感じです。 私のほうは会場準備の手伝いで早めに会場来てたのですが、チームが実際に集まってアイディア出し始めたのは20時ごろだった気がします。そこから30分ぐらいでゲームアイディアが固まったので動き出せるまではかなり早く感じました。 恐らくUnityでも動くものが作れたと思いますが、メンバー的にもめちゃめちゃ得意というわけでもなかったので私の習熟度の高いJS方向で作る感じでいきました。全チームUnityになるのも面白くないなという感情もあったりしますw(熊本は計3チーム、他2チームはUnityになってました) 設計上は経路計算をサーバーで行ってもらい、表示はAPIで取得したデータで動かす感じです。経路計算の計算方法決まったあとはPython好きなメンバーが勝手にやってくれたので大分楽ができた気がします。 ゲーム表示部分ですが、普段ゲーム作ってるわけではないのでライブラリの選定でつまづきました。pixi.jsを最初に使ってみたのですが簡単な表示ならすぐにできたのですが、欲しい機能が標準で用意されてなさそうだったり、サードパーティのプラグインもES5で動くものと動かないものがあったりで環境がすんなりいかなそうだったので乗り換えをしました。 実際に利用したのはCreateJSです。CreateJS自体はゲーム利用を売りにだしてるわけではなさそうでしたが、Flash likeな機能群はとても使いやすそうに見えて、ドキュメントを見る限りは欲しい機能(移動やらTween)を備えていたので初日深夜でしたが書き換えました。あとあと他のメンバーが実装に入りましたがJSが初めてであっても簡単な機能が実装ができていたので良い選択だったと思います。 全体の流れ 20日 ゲームアイディア 経路計算方法の確定 ゲームライブラリ選定 素材作成・選定 21日 経路計算プログラム実装 経路計算結果のAPI化 ゲーム画面表示 BGM/SEの追加 ロケット軌道をAPIと連携 22日 タイトル/ゲームオーバー画面追加 スコア計算・表示 ステージ作成 当たり判定などのゲーム仕様実装 バグ修正 発表 ちなみにメンバー全員金土ともに帰って3〜5時間程度睡眠とってます。 遊んでもらえるとわかるのですが、1ステージしかできてません。想定では5ステージぐらいあったのですが、間に合いませんでした。。実際アイディアとしてはすでにありそうな気もしますがどうですかね…? なかなか人と組んでコードも書くことがないので、面白い体験でした。ぜひゲーム作りに興味ある人は来年参加しましょう。個人的にはもう少し睡眠時間ほしいんですけどだめですかね? メンバーの皆様お疲れ様でした&ありがとうございました。

オトナのプログラミング勉強会やってます

  • POST
今年の8月から熊本で月2回勉強会を開催しています。今のところFacebookやTwitterなどで一部告知をしていたのですが、オープンな場所で情報を出していなかったのでこれまでの振り返りを書いていきます。 元々知り合い同士で熊本のプログラミング勉強会を増やしたいですねというお話をしていたのですが、実際やるにしても何をやったらいいだろうというのもあり足踏みをしておりました。 ある日勉強会やろうぜ!ついでに講師お願いと言われたので、そのまま今の勉強会の始まりになりました。その時は、Ruby on Railsの入門内容ぐらいならということで開催したのですが、15名ほどご参加頂けたのと最後に取ったアンケートが好印象だったので続けてみようとなりました。 現在は知り合いの方々にお声がけして、講師をお願いしています(身近な知り合いを引っ張ってきてるだけ)。 会場の方は未来会議室というコワーキングスペースにご協力を頂いており、そちらで開催してます。社会人の方が参加しやすいかなということで、第1、3水曜日の19時から開始です。 一般的なIT勉強会とは違い、内容はジャンルをひとつに絞ってるわけではなく雑多な感じです。これまでの開催内容としては、なるべくプログラミングされたことがない方向けにプログラムがどんなものか体験頂けるようなものをと内容を作ってきました。今後は、第1水曜日はその時々でプログラムわかる方向けに応用(ようは好きなこと)を、第3水曜日は初心者向けとしてJavascriptで学べるプログラミング勉強を行っていこうかと思います。 初回はDoorkeeperでイベント作ったのですが、有料化となったのでconnpassに移りました。基本的に手を動かして試せるほうがいいよねということで、ハンズオン形式です。都度環境を揃えるのはつらいため、Cloud9を利用しています。今は新規で登録するときにクレジットカードが必須となり、今後の利用を危ぶんでいたのですが、Eductionプランの導入をしました。また、かんたんな質疑応答とコード貼り付け用にslackの参加をお願いしています。 以下これまでの開催リンク 第1回 (8月3日) Ruby on Railsで!WEBアプリケーション勉強会 初回勉強会。内容自体はRuby On Railsチュートリアルで講師させて頂きました。ご参加頂いた方ありがとうございます。 第2回 (8月24日) javascript勉強会@未来会議室(変数からのプログラミング超入門) 崇城大学の和泉先生に講師をお願いし、変数から条件文や繰り返し文などの基本的な構文を学びました。 第3回 (9月7日) Ruby&RubyOnRails勉強会@未来会議室(Rubyの基本からBlogシステム作成) 試験的に前半/後半と内容を分けて行いました。前半にRubyの基本的な内容をということでPalmex石塚様に講師をお願いし、後半私の方で第1回からの復習と続きを行いました。 第4回 (9月21日) 第2回javascript勉強会@未来会議室(プログラミング超入門) 第1回javascriptに引き続き、講師:和泉先生で配列と関数について学びました。 次回 (10月5日) オトナのデータベース設計 データベース設計の基本について熊本大学の山ノ内先生に講師していただきます。ほぼ座学という言をすでに頂いているので、ご興味あるかたはご参加ください。

Parse.comからparse-server(Elastic Beanstalk)に移行する

  • POST
Parse.comが終了するということで、移行作業しました。この記事ではParse.comからparse-serverとmLabのフリープランを利用した移行メモです。クライアントとして利用していたAndroidアプリも修正しています。画像なんてない。 これからParse.comからの移行を検討される場合は、Parseの利用をやめることを含めて十分な検討をしたほうがいいでしょう。parse-serverへ移行する場合の基本的な流れは公式で公開されています。またparse-serverを利用する場合、非常に沢山のコミュニティが移行方法を公開しています。自分の好きな環境がないか確認するといいです。 今回はparse-serverをElastic Beanstalkを利用してEC2上にデプロイし、Parse.comのデータをmLabに移行しました。 mLabのフリープランを検討する場合いくつか注意点があります。mLabは500MBインスタンスを無料で使用できます。しかし、これはシングルノードかつ共用インスタンスです。あとからスケールさせる場合再度移行作業が必要になります。またAWS, GCP、Azureでフリープランが用意されていますがリージョンが固定です。AWSの場合バージニアのみになります。 Parse.com to mLab mLabのアカウントを作成後、DBを作成する。 [Create New]ボタンを押す Cloud provider: AWS Plan: Single-node:Sandbox (shared 0.5GB) FREE 作成したDBを開く。parse-serverで使用するユーザを作成する。 Usersタブを開く [Add database user]ボタンを押す username/passwordを入力(Make read-onlyはチェックしない) 画面上部に表示されているURIをコピーする。 mongodb://<dbuser>:<dbpassword>@sample.mlab.com:13584/parse-server-sample Parse.comからmLabにデータを移行する。 Parse.comからデータを移行するアプリを開く [Analytics] - [Overview]でData storageが500MBより少ないことを確認 [App Settings] - [General] - [Migrate]ボタンを押す 表示されたダイアログ内に先ほどコピーしたURIを貼り付け SSLの利用を推奨しますという警告が表示されるが、mLabのフリーではSSLを利用できないため[Migrate anyway]ボタンを押す マイグレーション完了後、[Finalize]ボタンを押すことでParse.comの管理画面がmLabのホストを参照するようになります。Finalize完了後はParse.comのホストに再度戻すということはできないので注意。 あとで必要なので、[App Settings] - [Security & Keys]から各キーをメモしておきましょう。実際に必要なのは[Application ID]と[Master key]だけです。 もしデータ移行に失敗する場合は、mLabにfailIndexKeyTooLongの設定が必要かもしれません。mLabフリープランの場合は共用インスタンスなので変更できません。ほかの方法でmongodbを運用する必要があります。 参考: Set the failIndexKeyTooLong parameter to false parse-server on Elastic Beanstalk parse-serverをElastic Beanstalkを使ってデプロイします。