.Sched3のUI/UXデザイン:操作系と機能の割り当て

BlogのサブタイトルにUI/UXデザインとか書いてるので、今回はそのようなネタを。

ちなみに、デザインと呼ばれる領域について体系的に学んだ経験は全くないので、完全に我流です。.Schedの実装では、自分の感覚と合理性(意味付け)の間をいったり来たりしています。

 

本題ここから。

iPhoneでは、タップ、ダブルタップ、スワイプ、長押し、ドラッグ、ピンチイン、ピンチアウトといった操作で機能をトリガーします。iPhoneアプリでは、どの機能のトリガーにどの操作を割り当てるのか?というデザイン(設計)が必要となります。

.Sched 3では、おおよそ以下としています。

 

●予定の参照系の機能

タップ、スワイプ(操作コストの低い、単純な操作)

●予定の追加/修正/削除などの機能

長押し、ドラッグ、2アクション以上の組み合わせ(操作コスト高め)

追加/修正については、長押し(+ドラッグ)、削除については2アクション以上の組み合わせをアサインするようにしています。

 

ここで、「操作コスト」という表現をしてますが、コストの高さは色々な軸があって、

  • 単純に手数(アクション)が必要
  • 操作してから反応するまでのラグがある(長押し系)
  • 片手で操作できない(ピンチイン、ピンチアウト)
というような操作は、コストが高いと位置づけられると思ってます。

 

ついこないだ話題になったTo do アプリのClear for iPhoneですが、リスト階層の移動にピンチイン/ピンチアウトをアサインしており、ビジュアル的には、ベストマッチの操作割り当てなのですが、Todoアプリとして片手で操作できないピンチイン/ピンチアウトは実用的ではないなぁと感じました。(大きくスワイプで階層移動する、操作エイリアスも用意されていますが、操作感としてはもう一つ。)

 

話を戻し、コストの高い操作に対しては、そのコストの高さ故に利用者が感じるストレスを軽減する見返りのようなものを割り当てる必要があるのかなと思ってます。

例えば、写真参照アプリでのピンチイン/ピンチアウトを例に上げると、操作に対してリアルタイムに画像のズームイン/アウトするアニメーションの気持ちよさがあり、ズームイン/ズームアウトすることがそもそも目的なので、これは全くストレスにはなりません。(先のClearの例では、デモしたりUI操作を楽しむという面においてはストレスはありませんが、Todo情報に素早くアクセスしたいという目的を前提にするとストレスに感じてしまいます。)

この点を考慮し、.Sched3の追加/修正/削除のコストが高い操作に対しては、「アニメーションを使う」「長押してそのままドラッグすると時間調整ができて便利」というような操作コストのストレス軽減策を極力盛り込んだつもりです。

 

でも最終的にストレスと感じるか否か?は私の感性で決めているので、その結果として、そこが「いい」と言ってくれる方もいれば、そこが「ダメ」という方もいて、まだまだだなぁと感じる今日この頃です。

 

.Sched3の紹介動画作成(後半)QuartzComposerあたりを中心に紹介

前回の.Sched3の紹介動画作成 Reflection +QuickTime +QuartzComposer +iMovie +GarageBand の続きです。

紹介動画はコチラ

上記のムービー作成の流れは、

  1. ReflectionというアプリでiPhoneの画面をMacで表示
  2. Reflectionで表示された画面をQuick Time X でキャプチャ
  3. Quartz Composer に、iPhone4の3Dモデルを読み込ませ、画面部分にキャプチャした動画をはりつけ
  4. Quartz Composerでカメラアングルやライティングをコントロールして動画書き出し。
  5. 最後に、iMovieで体裁整え。音楽はGarageBandで。
という感じで、前回のエントリでは2まで紹介しましたので、今回は続きの3あたりから。Quartz Composer周りはもうちょっと詳しく紹介します。

 

Quartz Composerって?

GUIでプログラミングできるビジュアルプログラミング環境です。マウスでパッチと呼ばれる機能の固まりの箱をつないで、プログラミングします。

従来はXcodeに付属してましたが、つい最近Xcode4.3になってからは、個別にインストールが必要となりました。Appleのダウンロードセンターからダウンロードできます。(GraphicTools for Xcodeに含まれてます。)

 

Quzrtz Composer step1 Lightingパッチ

Quartz Composer を起動し、まずは、Lightingパッチを配置します。
照明を制御するパッチです。

 

Quartz Composer Step2  3D Transformationパッチ

次に、Lightingパッチをダブルクリックして、3D Transformationパッチを配置します。パッチは階層構造を取る事ができます。
3D Transformationパッチは、サブパッチの3D変形を行なうパッチです。

 

Quartz Composer Step3  Spriteパッチ, Meshrendererパッチで素材を配置

3D Transformationパッチをダブルクリックして、サブパッチを配置します。
ここでは、3つのパッチを配置しました。
  • Spriteパッチ(1)
  • Spriteパッチ(2)
  • Mesh Rendererパッチ
Spriteパッチは、2Dの四角形を描画するパッチです。1つはiPhoneの画面用、もう一つはiPhone画面のステータスバーのマスク用(Refrectionで表示した画面のステータスバーはAirPlay中で青色になってしまうので、通常の黒いステータスバー画像でマスクします。)

フィールドに、先にキャプチャーした.movのファイルをドラッグすると、Movie Importerパッチ(動画を出力するパッチ)が生成されます。超簡単です。

パッチには右側と左側に白いポッチがあるのですが、左のポッチが入力、右のポッチが出力です。.movのファイルをドラッグしてできたMovie ImporterのImage出力をSpriteのImage入力にドラッグで接続すると、なんと、四角い箱に動画が表示されます。

同様に、マスク用の画像ファイルをフィールドにドラッグドロップするとImageパッチができるので、この出力を別のSpriteのImage入力に接続します。

Mesh Rendererパッチは、3Dモデルを描画するパッチです。iPhoneの3Dモデルは、Google SketchUpギャラリーから入手。そのままだと、.skpというSketchUp用のファイル形式でQuartz Composerに読み込ませることができないので、SketchUpをインストール(free版でOK)し、.skpファイル読み込んで、.daeという形式で書き出します。
この書き出した.daeファイルをQuartz ComposerのWindowにドラッグドロップすると、Mesh Importerという3Dモデルの読み込みパッチができます。この出力(Mesh)をMesh Rendererの入力(Mesh)に接続すると、3Dオブジェクトが表示されます。
素材の準備は以上で、動画のSpriteBoxが、iPhoneの3Dオブジェクトの画面部分にちょうどフィットするようにSprite、Mesh ImporterのX,Y,Z Position,Rotation,Scaleを調整します。

 

Quartz Composer Step4 3D Transformationでアングル操作

3D Transformationパッチにもどり、このパッチのTransition, Rotationパラメータをいじると、アングルを変更できます。さらに、アングル変更を時間軸で自動制御するために、Timelineパッチを接続します。
Timelineパッチは、上のイメージのように、時間軸での値の変化をグラフで定義することのできるパッチです。

こいつで、カメラアングルをグリグリ制御すればよいのですが、かなりしんどいので、実際には、「固定アングル決める」⇒「固定アングルで.mov書き出し」を繰り返し、様々な固定アングルの.movを書き出しました。(あとで、iMovieで切り貼りすることにした。)

1つ省略してしまいましたが、このままだと、背景がない状態なので、Root階層に背景用画像を表示するSpriteを配置してます。

 

iMovieで編集

以上で準備した色々なアングルの.movなファイル素材をiMovieにぶっ込み、切り貼りして、title/ending、BGMをくっつけて完成となりますが、1つ問題がありました。

Quartz Composerで.movで動画ファイルに出力ができるのですが、そのままでは、iMovieに読みこませる事ができません。.movのファイル情報をみると、codecが”Quartz Composer”となってます。

そこで、変換処理が必要となるのですが、変換には、QuickTime 7 Proを利用しました。OSX Lion付属のQuickTimeは、X(ten)ですが、変換処理には、有償のQuickTime 7 Proが必要のようです。(すみません、ここでも有償ソフトを使ってました。)QuickTime 7 Proは、ここで入手できます。QuickTime 7 は、QuickTime Xと同居可能。 Proのライセンスが3400円です(私は過去にProライセンスを購入していたので、ライセンスコードを過去のメールから掘り起して使いました)。
QuickTime 7 Proで変換したファイルをiMovieにぶっ込み、編集して完成となります。
以上となります。
完全に我流で作成しましたが、以外となんとかなるもんですね。

.Sched3 リリース (.Sched2からの更新内容)

.Sched3ですが、ようやくAppleのレビューも終わり、本日3/28リリースしました。(AppStoreへの反映にはもう少し時間がかかるかも。)

 

メジャーバージョンアップ記念ということで、期間限定セールします!!

通常価格 500円のところを170円にて!

 

紹介動画はこちら



 

 

以下、.Sched 3 の.Sched2からの機能差分情報です。

 

スライドナビゲーションメニューを採用

従来のオーバーレイメニューを廃止し、左右にスライドでメニューを表示するようにしました。(Facebookや、Pathなどのアレです。)これに伴い、月送りは、縦方向固定となりました。


日表示モード

ドラッグで予定時刻の変更が可能な日表示モードを登載しました。



予定をタップすると、詳細情報が表示されます。詳細情報画面では、タイトル部タップで「タイトルのクイック修正モード」や、左右にスライドで「アクションボタン表示」、「場所指定がある場合は場所をタップでマップアプリを起動」、「タイトルタップでタイトルの簡易修正モード」などの機能を盛り込んでます。

言葉で説明してもよくわからないかと思いますので、上の動画を見ていただければと思います。



 

ちなみに、従来のリスト表示も残しており、画面下部のボタンで日表示モードと切り替えできます。リスト表示も操作系を見直しています。

 

日時表示フォーマット見直し

全体的に日時表示フォーマットを見直しました。

基本的には、iOS本体の言語や日時フォーマットに従った表示となります。24Hや12Hの切り替えも、アプリ内切り替えオプションを排除し、iOS本体の設定に依存する形としました。

唯一、月タイトルや、週ラベルの表示言語については、「英語」か「iOS本体のシステム設定言語」を選択可能な様になっています。

 

その他

カレンダー色変更のカラーピッカーを更新しました。

Yomoappの中の方の作成された、iOS用ColorPickerを使わさせてもらいました。ありがとうございます!)

アイコン変更

設定項目の見直し/再配置

右側メニュー下部に、ランダムで”Words of wisdom”を表示

パフォーマンスチューニング

バグ修正(いろいろ)

あと、内部的には、ARC化、deprecatedなmethod対応、iOS5.1対応などなど。

 

さらに、無料版を再開します。(表示期間の制限をなくしました。ただし、予定の追加/修正/削除は引き続き制限されます。)

 

上記に記載していない微細な機能拡張もまだありますが、更新内容としては、おおよそこんなところです。無料版もありますので、興味をもたれた方はぜひともお試し願います。

 

既に、.Sched 4の構想も出来つつあるのですが、.Sched3として盛り込みたい機能がまだ多少残っているので、しばらくは.Sched3としてのUpdateを行なって行く予定です。

 

.Sched3の紹介動画作成 Reflection +QuickTime +QuartzComposer +iMovie +GarageBand

3/18 に.Sched3をiTunes ConnectにSubmitしました。ずぅっと”Waiting for Review”状態ですが、一週間たったので、そろそろIn Reviewになっていいころでしょうか。。。

とりあえず、.Sched3の紹介動画を作成しましたのでアップ。



せっかくですので、この動画の作成方法について簡単に紹介します。

はっきり言ってこの様な作業はまったくの素人ですので、完全に試行錯誤しながらの作業です。

初めは、実際にカメラで撮影しようかと思ったのですが、思い描く絵にまったたくならず、早々にあきらめました。iPhoneの操作画面撮りは、ライティングが難しいです。

で、どうしたかというと、CGで頑張ってみることにしました。3DCGって、どうやって作るの?という調査から開始。ソフトの値段もピンキリのようで、いきなり高価なものに手を出すわけにもいかず、極力コストをかけずにやるという方針に決定。最終的には以下のような形となりました。

  1. ReflectionというアプリでiPhoneの画面をMacで表示
  2. Reflectionで表示された画面をQuick Time X でキャプチャ
  3. Quartz Composer に、iPhone4の3Dモデルを読み込ませ、画面部分にキャプチャした動画をはりつけ
  4. Quartz Composerでカメラアングルやライティングをコントロールして動画書き出し。
  5. 最後に、iMovieで体裁整え。音楽がGarageBandで。

ReflectionでiPhoneの画面をMacで表示

無料で10分試すことができます。Macでこのソフトを起動し、iPhone側でAirPlayの設定をするだけ。非常に簡単です。画質はさほどよくないですが、反応は思ったより悪くないです。ちょっと試している間に10分の時間切れとなり、有償ライセンス購入しました。14.99USD(Paypal払い)です。

 

Reflectionで表示された画面をQuick Time X でキャプチャ

OSX付属のQuick Time X で画面の動画キャプチャができることを皆さんご存知でしょうか?

メニューの「ファイル」>「新規画面収録」で、画面の動画がキャプチャできます。全画面or任意の領域指定が可能です。

iPhone4Sでアプリを起動操作する様をReflectionでMacに表示し、それをQuickTimeXで撮影。この撮影した動画をQuartz Composer上のiPhone4の3Dモデルの画面部分に張りつけて。。。。。。。。という感じでまるまる1日使い、14.99USDの出費で何とかひとまず完成させました。

カメラアングルとか、コマ割りとか、もうちょっと色々と凝りたいところですが、やり出すと永遠に終わらない予感がしたので、ひとまず決着(完了)させました。

(動画作成後半戦のQuartz Composer以降内容については、また、後日記載するかも)

CALayerの描画チューニングとshadow表示

.Sched 3 の日表示モードでは、予定をドラッグ移動できるようになっています。

予定のドラッグ操作時にタッチポジションに合わせ、予定単体のUIViewもしくはCALayerを移動させるのであれば、どうってことはないのですが、既存の予定と重なったときに、ぐにゃぐにゃとアニメーションさせたかったので、逐次描画計算してアニメーションするようにしています。

最初に実装した時点では、パフォーマンスが全く出ずカクカクなアニメーションで実用に耐えない状況でしたが、チューニングしてなんとか使えるレベルのパフォーマンスを出せるようになりました。

 

まずは、iOSシミュレータでデバッグ

iOSシミュレータのデバッグメニューで、
  • ブレンドレイヤー
  • コピーイメージ
  • 不揃いのイメージ
  • オフスクリーンレンダリング
をチェックすると、シミュレータ上の画面が色付きで表示されます。


上のイメージのように、ブレンドレイヤーをチェックすると、シミュレータ上で、アルファチャネルがある箇所が赤く表示されます。

この赤い部分を極力減らしていくのが、チューニングステップ1です。だたし、これだけでは、体感レベルでの効果は得られませんでした。(これは、もちろんアプリの処理内容によるかと思います。)

このあたりは、フェンリルさんのブログエントリiPhone / iPad アプリのアニメーションをなめらかにするためのポイント3つを参考にさせて頂きました。

 

オフラインレンダリングを減らす(shadow描画)

上記のフェンリルさんのブログエントリにもありますが、iOSの自動オフラインレンダリングが発生するとFPSが低下するとのことで、特にCALayerのshadowプロパティを使用していると、オフラインレンダリングが発生し、激しくFPSが低下することがわかりました。

CALayerのshadowプロパティは、

layer.shadowRadius = 3;
layer.shadowColor = [UIColor blackColor].CGColor;
layer.shadowOpacity = 0.5;
layer.shadowOffset = CGSizeMake(1, 3);

とすると、CALayerに影をつけてくれる便利機能なので、できればそのまま使いたいと思い、いろいろと調べていたところ、以下のBlogのエントリにたどり着きました。

iPad drop shadow performance

shadow描画のパフォーマンスを、いろいろな描画方式で比較されてます。CALayerのshadowを利用していても、shadowPathを使うとよいとのことなので、

layer.shadowPath = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;

を追加してみたところ、劇的に早くなりました。
ということで、CALayerのshadowを使う際には、shadowPath指定をお忘れなく!
 

iPhoneのカレンダー同期その3(ExchangeとCalDAV比較)

iPhoneのカレンダー同期その1(アラート同期)iPhoneのカレンダー同期その2(繰り返し予定)につづき、iPhoneのカレンダー同期ネタ3回目、これで最後です。

前回はこちら

iPhoneのカレンダー同期その1(アラート同期)

iPhoneのカレンダー同期その2(繰り返し予定)

 

Google Calendarとの同期方式はExchange(ActiveSync)とGMail(CalDAV)の2種がありますが、この2種の同期方式の比較です。

 

Exchange(ActiveSync)

  • プッシュ同期可能(Google Calendar側の更新が即時にiPhoneに反映されます。)
  • カレンダーの色は同期されない。(iOSがかってに色を割り当てる)
  • アラームは1件しか同期されない。(しかも、iOS側で修正を行うと、Google Calendar側のアラーム情報が消える可能性あり。詳細は「iPhoneのカレンダー同期その1(アラート同期)」のエントリ参照ください。)
 

GMail(CalDAV)
  • プッシュ同期不可(フェッチ同期となります。iOS本体の設定で指定したフェッチ間隔でのポーリング同期となります。(標準カレンダーAppを起動すると同期されます。)。ポーリング処理のため、場合によってはバッテリーの消費に影響があるかも。)また、iOS->Google Calendar方向の同期もあまり早くないようです。
  • カレンダー色同期可能。
  • アラームは複数同期可能(ただし、SMSは同期されない。E-Mailは通常の「通知」としてiOSに反映されます。詳細は「iPhoneのカレンダー同期その1(アラート同期)」のエントリ参照ください。)
 

一長一短ですので、お好みでどちらか選択するしかないですね。

それぞれの設定手順はこちら を参照ください。

 

 

iPhoneのカレンダー同期その2(繰り返し予定)

前回の「iPhoneのカレンダー同期その1(アラート同期)」に続いて、今回は繰り返し予定関係です。

 

iOSのEventKitで、Google Calendarと同期した際、繰り返し予定の定義や修正がちゃんと機能するかについてExchange(ActiveSync)の場合とGMail(CalDAV)の場合で比較検証した結果です。

検証結果の表を書くのは、前回のポストでこりたので、トピックスだけ。(すみません。)

 

  • CalDAVでの、iOS  -> Google Calendar 方向の同期については、即時反映のはずだが、若干反映に時間がかかる(数分程度)。ちなみに、Exchangeの場合は、ほぼ、即時反映。(CalDAVで、Google Calendar->iOS方向の同期についてはiOSのフェッチ時間設定に依存)
  • CalDAVでの、iOS -> Google Calendar 方向の同期については、繰り返し予定修正(1件のみ修正/以降の全ての予定を修正のどちらも)で、タイトルを修正したり、削除した場合、修正/削除がGoogle Calendarに反映されないケースがある。(先に述べた通り、CalDAVの場合、同期に若干時間がかかるようだが、同期が反映される前に次の修正/削除処理を行なうと、前の反映処理の取りこぼしが発生してしまうように見受けられる。)
  • CalDAV,Exchangeに限らず、複数曜日(週あたり)指定や、複数日(月あたり)指定を伴う繰り返し予定に対し、予定の情報(タイトルなど)の修正を行い、「以降の全ての予定に反映」を行なうと、複数曜日指定や、複数日指定が解除されます。つまり、繰り返しパターンが変わってしまいます。(iOS標準のカレンダーAppや、他のiOSカレンダーと同期するAppでも同様)。内部的には、RRULEのBYDAYやBYMONTHDAYフラグが消えます。(EventKitの不具合っぽい)
 

繰り返し予定については、まだまだ、落とし穴が潜んでいそうです。引き続き検証続けます。

なんにせよ、上記を踏まえ、アプリとしてどう実装するか?非常に悩ましいところです。(現状は特にアプリ側で制限はしてません。)

続きはこちら

「iPhoneのカレンダー同期その3(ExchangeとCalDAV比較)」

 

iPhoneのカレンダー同期その1(アラート同期)

カレンダーアプリを開発してるので、まずは、そのあたりのネタを。

iPhoneのカレンダー同期について、何回かにわけて投稿します。第一回目は、アラート同期についてです。

 

iPhoneは、GoogleCalendar(Exchange(ActiveSync)、もしくはCalDAV経由)や、iCloudカレンダー等、外部のカレンダーと同期しますが、アラートの方法は外部のカレンダーによって様々な種類があります。カレンダー同期を行なった際に、これらのアラート情報がどのように同期されるか検証しました。(主としてGoogle Calendarを対象に検証)

確認ポイントとしては、

  • 複数アラートの扱い
  • E-MailやSMSのアラートはどうなる?
  • Google CalendarはExchange(ActiveSync)とGMail(CalDAV)の複数同期メソッドを持っているが、選択メソッドによって違いはでるか?
このあたりを中心に見て行きます。(基本的に、iOS5.0で確認、一部問題があった箇所についてはiOS5.1で追加確認してます。)

 

サポートするアラートアクションと複数アラートの指定可否

カレンダーアプリ種別



Google Calendarの「Pop-Up」= iCloudやカレンダーAppの「通知」のようです。

 

プロトコル/フレームワーク種別



アクションについては、呼び名が異なるのでわかりにくいですが、少なくともiOS(EventKit)では、Alarm(通知)一種類です。また、アラートとの指定可能数もそれぞれ異なります。

 

iOS(EventKit)からの同期処理

まずは、iOS(EventKit)からAlarmを指定した場合の挙動を見てみます。



Exchange(ActiveSync)経由の場合、アラートは1つしか同期されず(複数指定しても1つしか反映されない)、しかもiOS5.0環境では新規予定に複数アラートを指定するとフリーズします。(iOS5.1で修正されたようです。)

また、ここで見る限り、iOSの通知=GoogleCalendarのPop-Up です。(想像通りですが。)

 

外部カレンダーからiOSへの同期処理

次は、逆方向、外部カレンダーから、iOSへの同期処理のケースです。



以上から、以下が読み取れます。
  • Exchangeの場合、通知は1件しか同期されない
  • Exchangeの場合、Google CalendarのE-MailやSMSはiOSの通知に反映されない。
  • CalDAVの場合、Google CalendarのE-Mailは、通常のiOSの「通知」として反映される。
  • CalDAVの場合、Google CalendarのSMSは、iOSの通知に反映されない。
 

上記の通り、アラート内容は、その内容と同期プロトコル種別によって変換してiOSされてしまいますが、では、この変換されたものをiOS側で修正/更新したらどうなるか?

処理前状態を用意し、iOS(EventKit)から各種同期方式で、予定の更新処理を行なった際に、どのような振る舞いとなるか検証しました。

 

iOS(EventKit)からGoogleCalendar (CalDAV経由) への同期処理の場合



通知を追加することで、iOS側で「通知」と表示されていたE-Mailや、iOS側に表示されていないSMSが上書きされるのでは?との予想に反し、もとのアクション情報(E-MailやSMS)は維持されます(水色部分)。ただし、元E-Mailであったエントリ(iOS側で「通知」となっているエントリ)そのものを修正(時間変更)した場合には、アクションがPop-Upに変換されてしまいました(ピンク部分)。

 

iOS(EventKit)からGoogleCalendar (Exchange経由) への同期処理の場合



Exchange経由の場合は、通知を1件追加すると、Google Calendar側には通知が1件しか予定が反映されず、かつ既存の通知を上書きしてしまう結果となりました。(ピンク個所)

 

まとめると、、、、

Google Calendar 同期(Exchange経由)の場合は、
  • 通知は1件しか同期されない
  • E-Mail,SMSは同期されない
  • iOS側で通知を追加修正するとE-Mail,SMSの通知が消える。(元々ある複数のエントリが消える)
Google Calendar 同期(CalDAV経由)の場合は、
  • 複数通知の同期可能
  • ただし、SMSは同期されない
  • E-MailはiOSでは通常の「通知」として同期される。
  • (元E-Mailの)iOS側の通知を修正すると、E-MailがPop-Upになってしまう。
 

ということで、Exchange経由のアラート同期はボロボロ、CalDAVの方が若干マシといったところでしょうか。

 

ちなみに、近々リリース予定の.Sched3では、上記を踏まえ以下の仕様としています。(いずれ見直すかもしれません。)
  • Exchangeの場合は、通知指定は1件のみ
  • Exchangeの場合は、通知の修正は不可
  • CalDAVの場合は、既存の通知の修正は不可(追加/削除は可)
 

※検証結果が異なる等の情報があれば、お知らせください。

 

続きはこちら

「iPhoneのカレンダー同期その2(繰り返し予定)」

「iPhoneのカレンダー同期その3(ExchangeとCalDAV比較)」

 

BLOGはじめました。

サブタイトルの通り、iPhoneまわりを中心にTechネタ+UI/UXデザイン考をテーマに頑張ろうかと思います。

こんどこそがんばります!

こんどこそがんばります!

こんどこそがんばります!

よろしく!