その1：Parse SDKの配置
eclipseでビルドパスを追加、apkができたぞ～♪と思ったのも束の間。
アプリ実行時にエラーになって頭をかきむしる。
よくよくエラーを見ると、Parseまわりが見つからないようで。
いやあ、時間かかったぁ。
Yet Another Diary: Androidで外部JarがAPKファイルに取り込まれなくなった時の対処法

その2：Parse の通知テスト
これは後から考えたらしごくもっともな話なのですが、1台以上のデバイスにParseを組み込んだアプリがインストールされていないと、PUSH通知が送れないんですね。
apk作ってとりあえずPUSH通知してみるか、とParseの画面をためつすがめつしてもSend Notification のボタンが押せない。
なんで？なんで？とここでまたひとハマり。
Sendできないよ～、という方。大丈夫です。無事インストールが完了してData Browser 上にデータができていれば、Sendできるようになります。

2014-01-05

【070-480】MCP試験　受験のまとめ

忘れないうちに、受験にあたり実際にやったことのまとめ。

【試験について】
試験科目：HTML5 と JavaScript および CSS3 との組み合わせによるプログラミング
問題数：40問
合格点：700点以上(1000点満点）
試験時間：120分
出題形式：選択式（単一選択、複数選択）、ドラッグ＆ドロップによる構文補完、リスト選択による構文補完

【学習について】
学習時間：約20時間
学習前スキル：ASP.NETでのWebアプリケーション開発（約4年間）
メイン教材：JavaScript × CSS3 × HTML5 開発ジャンプスタート
参考サイト：とほほのＷＷＷ入門、jQuery 日本語リファレンス
参考図書：ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

以前Webアプリケーション開発をやっていたものの、5年ほどブランクがありという状況でのスタート。

学習方法は、Microsoft Virtual Academyの動画による講義「JavaScript × CSS3 × HTML5 開発ジャンプスタート」を見てざっくりまとめる、というやり方で。

Microsoft Virtual Academyの各セッションでは、要素の全てではなく重要項目を中心に解説しているため、特にCSS3・HTML5に関してはリファレンスサイトで全体をチェックしながら進めました。

CSS・HTMLについては、新しく追加されたことを中心にCSS3・HTML5以前との違いを分かり易く解説されており、Web開発の経験はあるが長いブランクが……という私にはとても助かる内容。

JavaScriptは基礎的な内容をセッションで復習しつつ、jQueryでのオブジェクト操作の基本、正規表現の基本を押さえる感じで。
最後時間が取れず、Webワーカを全くチェックせずでの受験となりましたが、出ましたね……orz

出題内容としては、HTML5 と JavaScript および CSS3 との組み合わせによるプログラミングで「評価スキル」とされているものがまんべんなく出ている印象です。
（40問と問題数は少ないながら、1問に複数の要素が盛りだくさんです）
簡単な正規表現、メディアクエリ、JavaScriptの変数のスコープ、イベントリスナー、例外処理は押さえておいたら良いと思います。

2013-12-29

【070-480】合格しました！！

試験番号：70-480
HTML5 と JavaScript および CSS3 との組み合わせによるプログラミング1

合格しました～～！！

頼みの綱の　Microsoft Virtual Academy　で時々日本語字幕が出てこないとか、模擬テストの表示が真っ白になる回があるとか、少々のトラブルはありましたが、なんとか合格できました♪
（この辺りは、フィードバックを入れておこう）

試験対策の続きと出題分野の詳細は、また逐次更新していきたいと思います。

2013-12-23

【070-480】試験対策その2-5 高度なレイアウトとアニメーション | P1

やっと5つ目のセッションです。あと６セッション～！

このセッションで使う「レガシー・レイアウト」は、従来のレイアウト、という意味です。

Legacynlayout

前のセッションでは「表示形式」を学びました。今回は「表示位置」です。

positioning
display
float
z-index

Positioning

#id01 {
position : absolute; /*絶対位置を指定*/
top : 25px; /*コンテナまたは画面上部からの位置*/
left : 50px; /*コンテナまたは画面左からの位置*/
z-index : 0; /*z-indexが大きくなるほど、前に表示される*/
}

#id02 {
position : relative; /*相対位置を指定*/
top : 25px;
left : 50px;
z-index : 1;
}

Display

.vanish {
display : none; /*要素を表示しない*/
}

.centered {
display : table-cell; /* 縦方向も制御できる */
min-height : 200px;
min-width : 200px;
text-align : center; /* 中央ぞろえ */
vertical-align : middle;
border : 1px solid #ff4444;
}

text-alignでは水平方向しか指定できない。
vertical-alignではできないが、table-cellなら縦方向の高さを揃えることができる。

もっとほかの方法で中央ぞろえをするには？
実際はテーブルではないのに「table-cell」を使うのは理想的ではない。

そこでFlexboxです！

Flexbox

horizontal or vertical
packing
alignment
flex
wrapping

Flexboxを使う利点は？

レイアウトを水平でも垂直でも指定できる、上から下でも下から上でも左から右でも右から左でも。

名前空間

サンプルでは、すべてのスタイル属性が.flexboxで始まる。
いま見ているのはシングル・ページ・アプリケーションで、全て同じページに入っている。
アプリ全体で共有したくないものにはネームスペースをつけて区別する。

.flexbox #flexbox1 {
margin-top: 20px;
display: -ms-flexbox;
width: 100%;
-ms-flex-pack: distribute; /* 子要素間の余白を表す ※ */
border: 1px solid gray;
}

.flexbox #flexbox1 > div { min-width: 80px; min-height: 80px; }
.flexbox #flexbox1 > div:nth-child(1) { background-color: red; }
.flexbox #flexbox1 > div:nth-child(2) { background-color: green; }
.flexbox #flexbox1 > div:nth-child(3) { background-color: blue; }

※MSDNで調べても-ms-flex-packにdistributeという値は出てこない……？

Flexboxは非常にシンプル

表示形式に「-ms-flexbox」を指定するだけでOK。

フレキシング

ボディビルダーの屈伸運動のようなもの(笑)

.flexbox #flexxingFlexbox {
margin-top: 20px;
display: -ms-flexbox;
}

.flexbox > div { min-width: 80px; min-height: 80px; }
.flexbox > div:nth-child(1) { background-color: red; -ms-flex: 1 0 auto;}
.flexbox > div:nth-child(2) { background-color: green; -ms-flex: 2 0 auto;}
.flexbox > div:nth-child(3) { background-color: blue; }

-ms-flexは3種類の値を指定。

1つめは、可変の相対量。
2つ目は推奨サイズ、任意のサイズを指定できる。ただしどんなサイズになるかは、親boxに依存する。
3つ目の特徴はwrap。はみ出した部分の処理をoverflowで指定する必要はなく、wrapで指定すればOK。

.flexbox #wrappingFlexbox {
margin-top: 20px;
display: -ms-flexbox;
-ms-flex-wrap: wrap; /*折り返す*/
width: 100%;
}

.flexbox #wrappingFlexbox > div {
min-width: 140px;
min-height: 140px;
background-color: gray;
margin: 5px;
font-size: 60px;
padding: 15px;
}

.flexbox #wrappingFlexbox > div:nth-child(7) {
background-color: red;
}

2013/12時点ではベンダープリフィクスがつかないW3C標準ができ、IE11でもそちらに対応しているようです。
http://msdn.microsoft.com/ja-jp/library/ie/dn265027(v=vs.85).aspx

2013-12-23

【070-480】試験対策その2-4 CSS3のセレクターとスタイルプロパティ | P2

やっと4つ目のパート。全然終わる気がしない……orz
でも、JeremyとMichaelの掛け合いがだんだん面白くなってきた。

さて、前のセッションではどこに適用するか、でした。
次は、何を適用するか、です。

color、text、box。

color

HTMLで特定の名前があるのは175色くらい。

HEX

Hex値でも指定できる。#を頭につけ、6ケタのHex値で指定する。

p｛color:hex(#000000)｝　黒になる　#000000は黒、#FFFFFFは白

RGB

r(赤)、g(緑)、b(青)の値を0～255の数字で指定する

p｛color:rgb(0,0,255)｝　青になる

RGBA

rbgに透明度aを加えたのがrbga。不透明度を0.0～1.0で指定できる

p｛color:rgba(0,0,255,1.0)｝　青、不透明100%

p｛color:rgba(0,0,255,0.5)｝　青、不透明50%

HSL

色相(hue)、彩度(saturation)、輝度(ligntness)で指定する。

ベースになる色を決めて、彩度、輝度をかえる。

p｛color:hsl(0,100%,50%)｝　青になる

rgbaのように、hslに透明度を加えたhslaもある。

他のプロパティでも透明度を変えられる

opacity:0.5;

text

下線を付けたり太字にするなら、uやbタグを使えばいい。
面倒なテキストプロパティを使う理由は？
管理しやすいから！HTMLタグではなくCSSで装飾すれば、一括でスタイルを変更できる。

text-shadow

ブラー効果、影を付ける

table{text-shadow: 2px 2px}

table{text-shadow: 2px 2px red}　色も指定できる

table{text-shadow: 2px 2px 2px red}　3つ目の2pxはぼかし

table{text-shadow: 2px 2px 2px gray; font-size: 24pt;}

赤い影と青い影がつく。いくつでも増やせる。

table{text-shadow: 2px 2px 2px red,0 0 10px blue; font-size: 24pt;}

font

font shorthand propert は、キーボードの摩耗を減らすもの(笑)
まとめて指定を行うときに使う。
font-style,font-variant,font-weightは、順不同で指定できる

table{font-style:}

table{font-weight:}

table{font-variant:}

font-weight

フォントの太さを指定する。

table{font-weight:bold;}

table{font-weight:bolder;}

table{font-weight:lighter;}

table{font-weight:100;} 100～900で値を設定する

font-size

フォントの大きさを指定する。

table{font-size:4}

table{font-size:24pt}

table{font-size:24px}

table{font-size:1cm}

table{font-size:0.5in}

フォントの指定

fontはユーザーの環境に入っているものを使う。

table{font-family:'trebucher ms'}

font-face

webフォントを指定できるようにする。
下の例では、urlで指定したフォントを、「niftyfont」という名前でCSS内で使えるようになりました。

@font-face{
font-family: "niftyfont";
src: url("/type/nifty_n.woff") format(woff)
}
.nifty {
font-family: niftyfont;
}

WOFFはとても便利です。
オープンタイプのフォントを使うことができるが、問題もある。
フォントを所有していてもデジタル著作権管理をするのは非常に難しい。
WOFFはセキュリティを担い、知的財産権を守ってくれる。

box

Windows8で重要となる、カラムからです。

div{columns: 400px;} 幅を決める

div{columns: 8;} カラム数を決める

枠、マージン、余白

非常に重要なプロパティ（例で出てくる「#loren」は div要素）

隙間の設定

#loren{margin:20px} boxと外側のコンテンツの隙間

#loren{padding:20px} boxと内側のコンテンツの隙間

枠線、幅の設定

#loren{border:2px solid red} 　solid --> dotted にすれば点線が設定できる

#loren{border:2px solid red; width:200px;} 　枠を含まない部分の幅が「200px」

#loren{border:2px solid red; width:200px; box-sizing:border-box} 　box-sizing:border-box　を付けると、枠を含む幅が「200px」

#loren{border-left:20px solid green; padding-left:20px}

四辺に一度に設定することもできれば、-top,-right,-bottom,-leftなどのようい

個別設定することもできる。

サイズには接頭語を付けて指定することもできる。

max-,min。

「min-width」なら最小値

HTMLは自分でサイズを最適化しようとするため、最小値をセットしておく。
最低でも80pxで表示する。など。

white-space(normal | pre | nowrap | pre-wrap | pre-line )

空白の表示の仕方を決める。
normalは自動的に改行し、複数の空白やタブや改行をひとつの空白に置換する。
preにすると自動改行せず、空白・タブ・改行はそのまま表示。

overflow(visible | hidden | scroll | auto)

はみ出たコンテンツをどう扱うか。
visibleははみ出して見せる、hiddenは表示しない、scrollはスクロールする、autoは自動でスクロール。

最後はbox-shadowとborder-radius（丸角）

2012年HTMLで丸角が使えるようになった

すごいね！

でもこうした装飾の機能はWindows8の開発テーマとは違う。（バッサリ）

丸みを出す機能のためにいろいろな苦労がありました。

でもWindows8の画面ではきれいな四角が多い

機能を考えず、丸角やグラデーションを多用しないでください！

最後の2人の会話から、丸角は試験に出ないのかなー？という気がしますね。

Windowsストアアプリ開発のすみっこ

MCSD(マイクロソフト認定ソリューションデベロッパー) のWindows Store Apps 取得をがんばるブログ。Windows女子部中心に活動中。

【070-481】試験対策その2　またまたMicrosoft Virtual Academy

【070-481】試験対策その1 試験内容の確認

かんたんPush通知　Parseを使ってみたメモ