Windows ストア 開発者アカウントの更新が無料になりました！
こんにちは。
マイクロソフトの渡辺です。
今日は、嬉しいお知らせです。
なんと、Windows ストア および Windows Phone ストア向けのアプリ開発に必要な、
開発者アカウントの更新が無料 になりました！
つまり、初回のみ開発費用をお支払いいただければ、2年目以降も更新費用なしで継続利用できます。
昨年11月には、既に個人開発者の登録料は年鑑 $19 に値下げされ、1つのアカウントで Windows ストアと Windows Phone ストアのどちらにもアプリケーションを公開することができるようになっていますが、それに加え年鑑の更新料が無料ということになりました。
Windows ストア 個人開発者登録料を値下げ、Windows Phone アプリも公開可能に - マイクロソフト エバンジェリストのブログ
さらなる開発者向け支援プログラムも
今回の開発者アカウントの更新が無料化に合わせて、 Dev Center Benefits と呼ばれる新しい開発者向けの支援プログラムの開始がアナウンスされました。
アプリ開発における技術的なサポートやダウンロード促進/マネタイズ支援が主な内容となっています。詳しい内容や利用方法については、公式ブログ ( 英語 ) で触れられていますが、日本語でのご案内を出来るだけ早く準備し、追ってお知らせさせていただきます。
※10/23 追記：日本語ガイドを公開させていただきました
開発者支援プログラム Dev Center ベネフィットの日本語ガイドを公開 - Yuta Watanabe's Blog
このあとは
まだ、開発者アカウントの登録がお済でない方は、今すぐアカウントを取得し、ユニバーサル Windows アプリの開発情報をチェックしましょう！
新しい開発者向け支援プログラム Dev Center Benefits の詳細な内容については、このブログや Facebook ページ GoApps にて続報を発信しますので、ご購読ください。
HTML5 ハイブリッドアプリフレームワーク Ionic
こんにちは。
マイクロソフトの渡辺です。
今日は、HTML5 を使ったハイブリッドアプリ向けのフレームワーク、Ionic の最新トピックまとめです。
開発環境の充実が進む Ionic の最新トピック
ドラッグ & ドロップで UI が構築できる！Ionic Creator
Ionic を使った UI をドラッグ&ドロップで作成していけるツール、Ionic Creator が early access 登録の受付中です。Sencha Architect のようなもの？と感じているのですが、詳細は使えるようになった際に、また再度ご紹介したいと思います。
デバッグ時の自動更新等 CLI が進化
開発時、手元の変更を自動的に反映させてくれる LiveReload が新しく CLI の機能についかされました。ブラウザでの開発、デバイス上でのデバッグという流れがよりスムーズに行えます。
Live Reload All the Things: Ionic CLI's Latest Features
開発環境一式を簡単に用意できる Ionic Box
Cordova, Ionic をインストールして、デバッグのために Android の開発環境も整えて...と、ハイブリッドアプリ開発は簡単だとは言うけれど、そもそも開発環境構築が面倒だと感じていた方も多いはずです。そんな悩みを解決するのが、Ionic Box。Vagrant で必要な環境一式を揃えられます。
このあとは
今日は、開発環境の充実が進んでいる Ionic の最新トピックについてご紹介しました。まだ、触ったことがない方は Getting Started からぜひお試しください。学習リソースとしてはドキュメントの他、Learn Ionic もご参照ください。
9/30(火) 19:00〜 Xamarin 勉強会です！
こんにちは。
マイクロソフトの渡辺です。
今日は勉強会のお知らせです。Xamarin です！
「Xamarin」って何？ Wエバンジェリストによる特濃「Xamarin」勉強会 - connpass
.NET エンジニアのための定期勉強会 第六回目として、Xamarin 勉強会が開催されることになりました！後半のセッション担当させていただきます。
春の de:code でお話しさせていただいてから、Xamarin にも諸々のアップデートがありますし、新たなトピックも交えながらご紹介させていただく予定です。
早くも残りの参加枠が少なめですので、ご興味のある方はお早めのご登録をお願いいたします。
＊参考
iOS/Android アプリを C#/.NET で開発 - Xamarin で実現するクロスプラットフォーム開発 - ( de:code 2014 ) - Yuta Watanabe's Blog
iOS/Android/Windowsすべてに対応したアプリを作るには(MSC2013) 資料公開 - Yuta Watanabe's Blog
はてなブログに何時の間にか追加されていた新カスタマイズ機能を使う
こんにちは。
マイクロソフトの渡辺です。
このブログを開設してから、早1年半以上が経ちました。その間に、はてなブログにも随時新たな機能が追加されてきています。今日は、ここ数ヶ月で追加された新機能を使って、ブログをカスタマイズしてみます。
- サイドバーのカテゴリの並び順をカスタマイズ
- Pocket ボタンの追加
- サムネイル追加等、最新記事モジュールのカスタマイズ
- 特定カテゴリの最新記事を表示
- はてブ数順に注目記事を表示
- ブログのデフォルト アイキャッチ画像を設定
- スマホ表示向けタイトル画像とアクセントカラーを追加
サイドバーのカテゴリの並び順をカスタマイズ
サイドバーの「カテゴリー」を好きな順番に並べ替えできるようにしました - はてなブログ開発ブログ
例えば、よく閲覧されているカテゴリを、上位に持ってくる等。Google Analytics を導入している場合は、行動 > サイト コンテンツ > すべてのページ にて、'archive' と検索してチェックしてみましょう。
Xamarin カテゴリ、上に移動させてみました。
Pocket ボタンの追加
デフォルトのソーシャルパーツで、Pocketボタンを設置できるようにしました - はてなブログ開発ブログ
Pocket ボタン、デフォルトでは ON になっていませんので、忘れずに追加しておきましょう。
サムネイル追加等、最新記事モジュールのカスタマイズ
サイドバーの「最新記事」をカスタマイズできるようにしました - はてなブログ開発ブログ
サイドバーに置くことができる「最新記事モジュール」の設定項目がいくつか追加されています。
こんな表示だったものを、
設定を変更して、
こんな表示にできます！
特定カテゴリの最新記事を表示
ブログのサイドバーで、カテゴリー別の最新記事一覧を表示できるようにしました - はてなブログ開発ブログ
特にあるカテゴリのみを対象とした最新記事を表示したい場合は、こちらの設定を利用しましょう。
Xamarin ブロググループの表示の下に、Xamarin カテゴリのみを対象とした最新記事を表示してみました。
はてぶ数順に注目記事を表示
サイドバーの「注目記事」を、はてなブックマーク数をもとに表示できるようにしました - はてなブログ開発ブログ
ありそうでなかった、はてブの人気エントリー表示。注目記事のカスタマイズで可能になりました。最新記事と同様にサムネイル等も表示可能。
以下のような表示ができます。
ブログのデフォルト アイキャッチ画像を設定
シェアされたときにも自分のブログらしく！ デフォルトのアイキャッチ画像をブログごとに設定できるようにしました - はてなブログ開発ブログ
個別の記事に対してだけでなく、ブログのデフォルト アイキャッチ画像が設定可能になっています。ブログのトップページや、記事内にアイキャッチが設定されていない場合に使われます。例えば、自分のブログの場合はこれまで、Facebook にシェアしようとすると、
のように、はてなブログデフォルトのサムネイルが挿入されました。これがデフォルトのアイキャッチ 画像を設定すると、
以下のように、先に設定したアイキャッチ画像が使われるようになります。
＊反映されるまで、少し時間がかかるようです
スマホ表示向けタイトル画像とアクセントカラーを追加
スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました - はてなブログ開発ブログ
スマートフォン用のデザイン設定に、ヘッダのロゴ色などを変更できる「アクセントカラー」を追加しました - はてなブログ開発ブログ
スマートフォン用のデザイン設定もカスタマイズの幅が広がっています。
まずはカスタマイズ前の状態をご覧いただくと、こんな感じです。
アクセントカラーと、タイトル画像を設定すると、
だいぶ印象が変わりますね。
ぜひ、お試しください。
このあとは
今回は、ブログのカスタマイズ、をテーマに最近新たなに追加された、はてなブログの機能をご紹介しました。この他にも、様々な機能が随時はてなブログには追加されています。詳しくは、はてなブログ開発ブログをご参照ください。
Express のプロジェクトジェネレータと生成ファイルの中身
こんにちは。
マイクロソフトの渡辺です。
node.js 向けのアプリケーション フレームワークである Express を触りはじめた今日この頃です。前回「 node.js 向け Web アプリケーションフレームワーク Express 」で、まずは簡単に Express を使ってみました。今回は、Express で提供されているプロジェクト ジェネレータを使ってアプリを生成し、その中身をたどることで Express の動きをみていきたいと思います。
インストール
まずは、ジェネレータをインストールします。
npm install -g express-generator
これで、express コマンドが使えるようになります。
express -h
で使えるオプションが確認できます。
プロジェクト生成
では、プロジェクトを生成してみます。
express myapp
すると、ファイル一式が生成されます。
cd myapp
npm install
npm start
で起動してみましょう。localhost:3000 にアクセスすると、Express が実行されているのが確認できます。
packages.json と ./bin/www
まず packages.json の中身を見てみましょう。dependencies の指定で jade 等関連パッケージが含まれていることと、先ほど npm start 実行時に呼び出されたのが、./bin/www であることがわかります。
./bin/www を開いてみると、express のインスタンスを定義している app モジュールの読み込みと、ポートの設定が行われていることが確認できます。ということで、メインの実装である app.js を見ていきましょう。
app.js で使われている Express の基本
ファイルの冒頭で、利用するモジュールを読み込んでいます。その後に続く express インスタンスの作成とテンプレートエンジンの設定は、前回の Getting Started と同様です。
その後には、app.use() の呼び出しが続きます。 API ドキュメントで app.use( ) の使い方を見てみると、
app.use([path], [function...], function)
Mount the middleware function(s) at the path. If path is not specified, it defaults to "/".
とあり、middleware をマウントするとのこと。middleware とは、req, res, next にアクセスする関数です。パスを指定しない場合は、'/' となります。
ということで、'/' のときは './routes/index' が、'/user' のときは './routes/user' が読み込まれていることが分かります。これら2つのルーティングに当てはまらない場合は、404 を返すことになりますね。
./routes
ここまで来れば後は分かりやすいと思います。./routes/index.js と ./routes/user.js を開いてみると、テンプレート ( ./views の中にある )にパラメータを渡してレンダリングしているのが理解できます。先日の Getting Started と同じです。
このあとは
今回は、プロジェクトジェネレータで生成されるファイルを読み解きながら、Express の雰囲気を掴んでみました。Express の API ドキュメントはシンプルで分かりやすいので、適宜参照しながらサンプルコードを読み進めていくと理解が早いと思います。
