高橋 忍のブログ

UX & モバイル、全ては心でエバンジェリズム♪

April, 2013

  • 高橋 忍のブログ

    Windows Phone のタイルを区切る

    • 0 Comments
    #wpjp こうやって画面を区切ってタイルを配置したら結構使いやすくなった。(画面を区切っているアプリは、もちろんTile Labelです。) WVGA/WXGA で表示されるタイルは(小さいタイルで)6段半分。なので、上下7段目のところに Tile ラベルを設置すると便利。 上の画面にはすぐにアクセスできるし、最後までスクロールすれば一番下の1ページ分にアクセスができる。たまに使うものは真ん中に。 それにしてもやっぱりタイルに置いたものばかり使うようになる。そうでないものは「こんなのいれたっけ...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 全8回完了

    • 0 Comments
    #win8dev_jp 気軽に書き始めたら、全8回になってしまいました。(誰も読んでないと思いますがw) Windows 8 で解像度に対応すること 【考え方編】 Windows 8 で解像度に対応すること 【横画面実装編】 Windows 8 で解像度に対応すること 【縦画面回避編】 Windows 8 で解像度に対応すること 【縦画面対応編】 Windows 8 で解像度に対応すること 【縦画面コンテンツ準備編】 Windows 8 で解像度に対応すること 【縦画面コンテンツ配置編】 Windows...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 最終回 【テンプレート化する】

    • 0 Comments
    #win8dev_jp さて、これまでの経緯はこの流れで。今回はちょうど 8回目ということで最終回。 Windows 8 で解像度に対応すること 【考え方編】 Windows 8 で解像度に対応すること 【横画面実装編】 Windows 8 で解像度に対応すること 【縦画面回避編】 Windows 8 で解像度に対応すること 【縦画面対応編】 Windows 8 で解像度に対応すること 【縦画面コンテンツ準備編】 Windows 8 で解像度に対応すること 【縦画面コンテンツ配置編】 Windows...
  • 高橋 忍のブログ

    WinRT Sleep

    • 1 Comments
    #win8dev_jp #wpdev_jp こんな感じ?(Windows 8 / Windows Phone 8 共通です。) /// <summary> /// 一定時間待ちます /// </summary> /// <param name="ms">待ち時間 (ミリ秒)</param> private async void Sleep( int ms) {     await System.Threading...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 【Snap対応編】

    • 0 Comments
    #win8dev_jp さて、これまでの経緯はこの流れで。今回は7回目になります。 Windows 8 で解像度に対応すること 【考え方編】 Windows 8 で解像度に対応すること 【横画面実装編】 Windows 8 で解像度に対応すること 【縦画面回避編】 Windows 8 で解像度に対応すること 【縦画面対応編】 Windows 8 で解像度に対応すること 【縦画面コンテンツ準備編】 Windows 8 で解像度に対応すること 【縦画面コンテンツ配置編】 さて、Windows 8 で対応しなければならない画面サイズに...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 【縦画面コンテンツ配置編】

    • 0 Comments
    #win8dev_jp さて、これまでの経緯はこの流れで。今回は6回目になります。 Windows 8 で解像度に対応すること 【考え方編】 Windows 8 で解像度に対応すること 【横画面実装編】 Windows 8 で解像度に対応すること 【縦画面回避編】 Windows 8 で解像度に対応すること 【縦画面対応編】 Windows 8 で解像度に対応すること 【縦画面コンテンツ準備編】 さて、縦画面に対応し、さらに、コンテンツの配置のために ViewState を定義しました。 実際に配置を定義してみる...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 【縦画面コンテンツ準備編】

    • 0 Comments
    #win8dev_jp さて、これまでの経緯はこの流れで。今回は4回目になります。 Windows 8 で解像度に対応すること 【考え方編】 Windows 8 で解像度に対応すること 【横画面実装編】 Windows 8 で解像度に対応すること 【縦画面回避編】 Windows 8 で解像度に対応すること 【縦画面対応編】 縦画面にもフィットするようになりましたが、コンテンツの配置は柳楽てはなりません。いろいろ考え方はありますが、そのための基礎を作りましょう。 今回のポイントは、 XAML 側で縦横画面の変化を認識するという点です...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 【縦画面対応編】

    • 0 Comments
    #win8dev_jp さて、これまでの経緯はこの流れで。今回は4回目になります。 Windows 8 で解像度に対応すること 【考え方編】 Windows 8 で解像度に対応すること 【横画面実装編】 Windows 8 で解像度に対応すること 【縦画面回避編】 横画面の完全対応は結局元となる Pageクラスを派生したクラスで比率の異なる画面に対して若干がそうサイズを変更する、という対応でした。 ここでのコンセプトは、この点です。高解像度になったら途端に見づらくなった、全然違う画面のイメージになってしまった...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 【縦画面回避編】

    • 0 Comments
    #win8dev_jp さて、 Windows 8 で解像度に対応すること 【考え方編】 と Windows 8 で解像度に対応すること 【横画面実装編】 の続き。 横画面を攻略したら今度は縦画面。ただ、ViewBoxが優秀すぎて現時点ではこうなってしまいます。 さて、どうしましょうか? いっそ避けましょう。このアプリケーションは縦画面も上下反転もサポートしないと。 この設定は、Package.appxmanifest で設定します。「サポートされる回転」で横だけにチェックを入れればいい。 シミュレーターではなぜか縦にすると前述のような配置になってしまいますが...
  • 高橋 忍のブログ

    PowerPoint は3Dにも手を出す

    • 0 Comments
      これまでのあらすじ PowerPoint でトリミングじゃなくて間抜き PowerPoint で角丸写真 そして今に至る。 どーすんですか、こんなもの作って。 ならば行けるところまで行こう。まずは表面立体化だ。 図形の効果→面取り→丸 実はちょっと丸くなってるらしい。 次は立体化。図形の効果→3-D回転→透視投影コントラスト(右) ほら、厚みあるでしょ?面取りしてないのが右。明らかに平面。 さらに3-D回転書式オプションの3-D書式で奥行きを10ptにしてみる。どう? もちろん、3Dだから好きな角度にできます...
  • 高�� 忍のブログ

    PowerPoint で角丸写真

    • 0 Comments
    前回でも使ったこのスマフォ PowerPoint でトリミングじゃなくて間抜き で間を抜く。 もっと抜いてみた。 ここに、この画像サイズに合わせた 角丸四角形を描く。 そして、後ろの写真はクリップボードにコピー 今度は角丸四角形を選択して、塗りつぶしメニューから 塗りつぶし(図またはテクスチャ)を選び、クリップボードボタンをおす。 貼れました。   後は角丸の調整です。えっと違う意味で大変なことになってる。 Lumia Nano ? ルミアなの? この技を使えば、PowerPointの図形に自由に写真や絵を張り付けることができます...
  • 高橋 忍のブログ

    PowerPoint スケッチ風矢印

    • 0 Comments
    こういうの。   簡単です。1分かからない。 スケッチ風エフェクトは画像の加工用フィルタとして提供されています。なのでそれを使う。 作り方 まずは矢印を作る。 コピーして、図として張り付ける。もうこれで絵になってしまいました。上と比べて、矢印の形調整用の黄色のマーカーがないことがわかります。 あとは、写真の「アート効果」から「鉛筆:モノクロ」を選ぶだけ。 後使えそうなフィルタは光彩ディフューズとか、ぼかしとか。前の色が影響するので矢印を作る時に色もちゃんと考えておく事。 下地が写真だと面白いフィルタがまた変わってきます...
  • 高橋 忍のブログ

    PowerPoint でトリミングじゃなくて間抜き

    • 0 Comments
    いろいろ使ってて技みたいのができてるんだけど、早々覚えてないので。思い出したときに記述中。 これはめったに使うことはないんだけど。まぁ、描いておく。 このスマートフォンのショート版を作ってみる。 アイディアとしてはタイルの上から3だんめだけ抜いてみる。そんなわけでマスク用の画像を作る。 2つを選択したら、「図形の結合」→「単純型抜き」 ...ではだめです。このように切り抜かれた 1枚の絵 が出来ておしまいだから。 こういう時(切った後に動かしたいとき)は切り出しを使う。分割されたら真ん中のパーツを削除...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 【横画面実装編】

    • 0 Comments
    #win8dev_jp さて、 Windows 8 で解像度に対応すること 【考え方編】 の続き。 基本の 1366x768 の縦横比を維持しながら拡大縮小する、ということは 1920x1080ではコンテンツの全てを縦横約x1.4するということになる。  これを勝手にやってくれるコントロールがこちらです。 ViewBox ちなみに、Windows Phone 7.x には ViewBox はありませんでした。単一解像度(480x800)だったからそれほど困らなかったのです。そして、Windows...
  • 高橋 忍のブログ

    PowerPoint で画像を切り抜く

    • 0 Comments
    これも図形の合成の応用ですね。こんなかんじ 作り方 さて、いつもの画像です。#SurfaceJP の部分だけ切り抜きましょう。 まずは切り抜くところに合わせて図形を作ります。 そして図形の塗りつぶしを「なし」にして透明にします。 ここポイントね。 (注意:わかりやすいように輪郭の色と太さを変更しています)   そして、枠線になった図形を画像の背面に移動します。   あとは、図形の結合から今回は「重なり抽出」を選べば切り抜きが完成です。   画像を切り抜けば、ドロップシャドウを入れてみたり...
  • 高橋 忍のブログ

    PowerPoint で特定エリアだけぼかす

    • 0 Comments
    さてパワポの時間です。 今日は画像の特定のエリアだけぼかす方法です。簡単。だってぼかし機能があるんだもん。で、これが完成版です。 作り方 さてやってみましょう。こちらが元の写真。ベースの写真、机が汚いしロゴが入ってるし。 まずは元画像と、ぼかし画像にするためにもう一枚コピーします。(作業用に下の画像は隠しておきますね) ぼかしを残すところを図形で作ります。資格や丸を組み合わせるだけでもOK。ざっくりでいい。これなんて頂点8点くらい。 2つを選択して、「描画ツール」の「書式」内の「図形の結合」で「単純型抜き...
  • 高橋 忍のブログ

    Windows 8 で解像度に対応すること 【考え方編】

    • 0 Comments
    #win8dev_jp Windows 8 は様々なPCで動作します。当然その解像度もまちまち。開発者はそれに合わせるのが一苦労って場面もあります。 解像度に対応って無限にあるのでは? いえいえ、Windows 8 での解像度対応は実は超楽! ではどの解像度で始めればいいかというとこれです。99% の Windows 8 マシンが対応します。 1366x768 PC長い人だと 1024x768 はマジックワードでした。テレビの仕様から始まっている 4:3の派生から来た解像度ですね。そして現在は 16...
  • 高橋 忍のブログ

    DrawingPanel

    • 0 Comments
    #wpdev_jp #win8dev_jp サンプルが気に入らなかったら、自分で治す、ということでタッチで描画するサンプルがタッチに対応してなかったり、いろいろ変えたかったので変えてみた。   今回場描画ができるパネルをユーザーコントロールとして定義しています。   作り方 空のプロジェクトを作成 プロジェクト>新しい項目の追加>Windows ストア(Windows Phone)>ユーザーコントロール でユーザーコントロールを追加(DrawingPanel.xaml) DrawingPanel...
  • 高橋 忍のブログ

    UIデザイン部品を PowerPoint 用に部品化しました

    • 0 Comments
    #wpjp #win8dev_jp #wpdev_jp #win8jp これまで作った Power Point 用のシートや図形を Power Point の ストーリーボーディングの図形としてまとめました。クリップアートのように使えます。(PowerPoint 2007以降に対応) Windows 8 UIデザインシート Windows Phone UI デザインシート PowerPoint で5分で Windows Phone を描く動画 PowerPoint...
  • 高橋 忍のブログ

    Windows 8 のテーマを白・黒 固定にする

    • 2 Comments
    #win8dev_jp 画面が広い Windows 8では Windows Phone と違って Dark と Light のテーマに対応したデザインにするのはちょっと面倒。 なので私の場合、最近は Light テーマ固定にしてます。そのせいで黒バックで思わぬ失敗を起こすことも。 思わぬ失敗例 エイッ子.xaml エイッ子2 の色が半透明だった! 初めのPath の Fill が "#28F7F7F7" で 15% の不透明度になってた。Light テーマで作ってたので気が付かなかった...
  • 高橋 忍のブログ

    Windows Phone UI デザインシート

    • 0 Comments
    #wpdev_jp #wpjp Windwos 8 用の UIデザインシート を作ったので、当然 Windows Phone 用も作ってみます。15:8 つまり WVGA もしくは WXGA ベースです。 追加 タイル画面を入れてみました。何に使うんだろう? こちらは、アプリ開発用のデザインレイアウト。 今回もPower Point のファイルになっていて、レイアウトの選択でいくつかのパターンが選べます。 ひとまず用意してあるのが、以下の5つです...
  • 高橋 忍のブログ

    Windows 8 UIデザインシート

    • 0 Comments
    #win8dev_jp ノリだけで個人的になんとなく作ってしまいました。 そのまま印刷してやれば、ペンで Windows 8 のデザインガイドライン にある程度沿って UIデザインができるデザインシートです。1366x768 ベースで作っています。 Power Point のファイルになっていて、レイアウトの選択でいくつかのパターンが選べます。 ひとまず用意してあるのが、以下の5つです。 グリッドとガイドライン付 ガイドラインのみ グリッドのみ...
  • 高橋 忍のブログ

    エイッ子.xaml

    • 0 Comments
    #wpdev_jp #win8dev_jp Windows 8 や Windows Phone で利用可能な エイッ子の XAML ソースです。 元画像の詳細はこちら アプリ開発用キャラ素材 エイッ子1 < Viewbox x:Name ="ei1" Margin ="723,151,467,361" > < Grid Height ="255.188003540039" Width ="176.052001953125" >...
  • 高橋 忍のブログ

    Lumia スペック比較

    • 0 Comments
    #wpdev_jp #wpjp 720、520 の登場により Lumia の機種は(亜種を除いて)この5種類となります。ま、あくまで個人的なメモってことでw 自分に最適な一台はどれか、ご参考までに。 追記 区分を見ると 720や820がハイエンドとして設計されていたり、ローエンドとして設計されているポイントがわかりますね。   概要 Lumia 520 Lumia 620 Lumia 720 Lumia 820 Lumia 920 Device Good ポイント 激安価格 薄型軽量 だが4インチ...
  • 高橋 忍のブログ

    ポラロイドデザインをGridでやるなら 

    • 0 Comments
    #win8dev_jp #wpdev_jp 前の記事でできなかったポラロイドのデザイン。全体の縦横比率は1:1.2 整数なら 5:6ですね。 Grid わけの比率は、横が 1:16:1 で、縦が 1:17:5 。このくらいで作ればかなりそれっぽくなる。 真ん中にImageコントロールを入れてやればOK. 下の真ん中にTextBlog を配置して、追加で String のプロパティをつけてやれば文字が入る。こんな感じ。タップするとアニメーションをするように仕掛けておけば...
Page 1 of 2 (36 items) 12