ARISTEAのこと めとべや東京 #6

tmyt

自己紹介

tmyt

最近会社員のようなことをしているようです

Universal Appsがつらい

かえりたい

Microsoft MVP for Windows Platform Development Jan.2014-Dec.2014 長い

某むらさき

なんかAristeaのはなしして

あっ、はい

ABOUT Aristeaについて

ARISTEA IS…

Aristea(ありすてあ, ありすてー, ありすてぃ)

Windows 8.1向けのTwitterクライアント

Windowsストアを起動したときに見たことがあるかも

こんなことができます

UserStream

画像のサムネイル表示

Youtubeもサムネイル表示

メモリが許す限りのフィルタカラム

プッシュ通知

サポートされているサムネイル一覧

HatenaFotolife

MovaPic

TwitPic

Yfrog

TweetPhoto

Plixi

Twipl

Photozou

TwipplePhoto

MobyPicture

Flickr

Owly

Twittie

Instgram

Twitgoo

Picplz

Lockerz

Lightbox

My365

Pikubo

Gyazo

Viame

Pckles

Mstrin

• Pinterest

• Youtube

• Vimeo

• Vineco

• Yabumicc

• Imgly

• Dropbox

• PicTwitter

• .PNG, .GIF .JPG

• Youtube

• Vimeo

• Vineco

• PicTwitter(GIFアニメ)

HISTORY なんで作ったの

リリースまでの経緯

2月中旬ごろ: 開発を思い立つ

3月中旬ごろ: Alpha版がリリースされる

4月中旬ごろ: Beta版がリリースされる

5月下旬ごろ: 最初のRTM版がリリースされる

裏話

13/12中旬ごろ X240を注文する

14/1月中旬ごろ X240が到着する

1月末ごろ X240の液晶が壊れる

1月末ごろ初期不良を訴えるも修理対応になる

2月中旬ごろあまりにも暇なのでAristeaの開発に着手

2月中旬ごろ修理の進捗を問い合わせると部品欠品で保留中

2月下旬ごろ相変わらず保留なのでぶちきれて交換させる

2月下旬ごろ交換品の構成が間違っているので再度交換させる

3月中旬ごろ交換品到着、しかし初期不良再度交換させる

3月中旬ごろ Aristea Alphaがリリースされる

4月中旬ごろ Aristea Betaがリリースされる

4月下旬ごろ交換品到着、ようやく使えるものが到着

5月下旬ごろ Aristea Release 1 がリリースされる

だいたいこいつのせい

DESIGN 考えていること

ARISTEAの目指したところ

メトロを尊重したすっきりとした見た目

マルチアカウントをマルチカラムで俯瞰的に扱う

UserStreamを中心としてフィルタを使用した複数のビュー

将来を見据えた再利用性の高いコード

見た目についての考え

テーマカラーは水色

背景はグレー

アクセントはマゼンタ

これらをもとにしてhue360を参考にして色を決めたり。

複数のカラムをよさげに扱いたいUserStreamとRESTを混ぜて扱いたい よくある発想

それを複数のカラムでいい感じにしたい

こういう感じにしたい

Subject<T>

UserStream

IObservable<T>

REST (Home Timeline)

IObservable<T>

REST (Mentions Timeline)

IObservable<T>

ObservableCollection<T

>

CollectionViewSource

CollectionViewSource

CollectionViewSource

CollectionViewSource

CollectionViewSource

TECHNOLOGY 実装について

UIに関するはなし

Flyoutをほぼ自作しています Windows 8.1からはSettingsFlyoutクラスが追加されたのでこれを利用することでFlyoutを簡単に実装できます

ですがFlyoutを出した状態で別アプリを操作すると消えます

これはあまりにも不便ですので自作しましょう

Panelを自作しています コントロールをいい感じに並べるにはPanelを自作しましょう

作ったものはGithubで公開しています！

セマンティックズームを自前対応させてみました 意外と簡単です

自作FLYOUT

どこでつかっているのか？

自作FLYOUT

どこでつかっているのか？ このあたりでした

わざわざ自作する理由 アプリの切り替えで閉じてほしくない

AttachedFlyoutのようにFlyoutの外側タップで閉じてほしくない

結論として、IsLightDissmissEnabledを設定できないのでFlyout使いづらい

セマンティックズームのはなし

セマンティックズームをサポートするには ListViewもしくは GridViewを使ってデータを表示します

または、ISemanticZoomInformationを実装します

ISEMANTICZOOMINFORMATION !?

ISEMANTICZOOMINFORMATIONCommunicates the info needed for a view to serve as one of the two possible views (ZoomedOutView orZoomedInView) of a SemanticZoom.

SemanticZoomの選択可能な 2 つのビュー ( ZoomedOutViewまたは ZoomedInView) のどちらかの働きをするビューに必要な情報を通信します。

結局最低限必要なこと

セマンティックズームに対応したコントロールを作るには ISemanticZoomInformationを実装したクラス

メンバはとりあえず全部空実装でOK

簡単

ちゃんとやる場合 MakeVisibleを実装してあげる

これでちゃんとビュー間が同期される

MakeVisibleするときに情報が足りない場合 StartViewChangeFromとかを実装する

思いのほか簡単

TWITTERの闇のはなし

Twitter APIの設計が非常にあかん 特に最近だとextended_entitiesまわりがあかん

具体的には複数枚の画像添付のことです

最近だとサロゲートペア地雷も 𩹉とか渡󠄀辺󠄀とか🐑🔥🍖とか

Twitterは内部的に文字数で計算

これらの文字は1文字バイトなので.NETでString.Length読むとはまる

StringInfo.LengthInTextElementsを使いましょう

WINRTの闇

Q.ほげほげしたいなー

A.それC++でできるよ！

WINRTがつらぽよなところ

画像にテキストを描画するには？ それDirect2D(SharpDX)でできるよ！とか言い出すところ

IMEの状態を取得するには？ それC++でTextServiceFramework API叩けばいいよ！とか言い出すところ

まとめると なんか変なことしたいっていうとそれC++でできるよ！って言い出すところ

PUSHNOTIFICATION

意外と簡単に作れるPushNotification

サーバはNodeJSで簡単に書けます

クライアントはWinRTさんが面倒みてくれるので簡単

プッシュ通知の仕組み

引用: Windows Phone 8.1の新しい通知API

BEYOND これから

今後の展望

バグ修正 3件積んでいてもうしわけない…

プッシュ通知の安定稼働 1週間ぐらいで実は再起動しています。。。

WINDOWS PHONEをサポートします

AristeaはUniversal AppとしてWindows Phoneをサポートします

12月ごろを予定してはおりますが…

ハワイに行く際にはぜひご利用ください

WINDOWS PHONEをサポートするにあたってSettingsFlyoutを共通化

CharmコントロールをWindows Phoneに実装

SETTINGSFLYOUTの共有

CHARMコントロールを実装

CHARMコントロールを実装

ContentControl化されてるのでそのうち公開します！

Q&A なんかありますか