目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

お決まりのHello!Worldにチャレンジ

このエントリーをはてなブックマークに追加
昨日、やっとWindows8とVisualStudio2012を入れることができました!
さっそく今日から気分を切り替えてWindows8のメトロスタイルアプリにチャレンジしていきます!

HTMLとJavascriptは割と使い慣れていると意気込んでスタートしてみたものの、
ちょっとクセがあるので注意が必要だということを思い知らされる。

VisualStudioだと、デザインビューが見れないみたいなので今回はExpressionBlend使用。
空のアプリケーションのプロジェクトを作ると、必要なhtml、css、jsなどのファイルが用意される。

*html*default.html
<!DOCTYPE html>
~省略~
<body>

<button onclick="msgShow();">
<div id="msgArea"></div>

</body>


*javascript*default.js
function msgShow()
{
   document.getElementById("msgArea").innerText = "Hello!World!!";

}

ボタンを押すとdivエリアにHello!World!!を表示という簡単なプログラムだったけどデバッグするとガスンと落ちるので下記のようにaddEventListenerで書き換える。

*html*default.html
<!DOCTYPE html>
~省略~
<body>

<button id="msgShow">
<div id="msgArea"></div>

</body>



*javascript*default.js
~省略~
    args.setPromise(WinJS.UI.processAll());

      var helloButton = document.getElementById("msgShow");
      helloButton.addEventListener("click", buttonClickHandler, false);

~省略~
app.oncheckpoint = function (args) {

};

function buttonClickHandler(eventInfo) {
document.getElementById("msgArea").innerText = "Hello!World!!";
}

app.start();
~省略~


jsファイルにピンクの箇所のコードを追記。

スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/06/18(月) 07:35:56|
  2. Windows8のアプリを作ろう!
  3. | トラックバック:0
  4. | コメント:0

自分メモ*イメージを移動させる*

このエントリーをはてなブックマークに追加
先日作ったアプリトントン☆ずもうのソースコードの一部をメモ。

イメージの配置場所を変えるコードを利用しました。

下図のようにとりあえずCanvasの中に力士のイラストを配置。


今回は横に移動させたいので、

Canvas.SetLeft(this.イメージ名, 距離);

移動させたいイメージ名、カンマで区切ってCanvasの左端0からの距離。
SetLeftをSetTopに変えると縦移動も可能です。

一定の箇所を連打(タップ)で移動させます。

//初期設定
int distance = 100;   //初期配置距離
attack = 0;   //攻撃数
int num;   //距離

//一回のタップで移動する距離を乱数にする
Random rndum = new Random();
num = rndum.Next(20);   //これだと0~19になるので
num =+1;   //1を足して1~20の乱数に変える

//タップイベントの中
attack += num;  //移動距離
distance += attack;   //初期配置距離+移動距離   
Canvas.SetLeft(this.rikishis, distance);


一回のタップで移動できる距離が乱数になっているので時々クリティカルヒットみたいになります。(笑)
このままだと力士がディスプレイの外に消えてしまうので一定距離まで進んだらif文何かで移動をストップさせます。
  1. 2012/06/16(土) 11:44:28|
  2. C#
  3. | トラックバック:0
  4. | コメント:0

JavaScript*他のページからから受け取った値を表示*

このエントリーをはてなブックマークに追加
最近初心に帰ってみると、
やっぱり大好きなJavascriptの魅力に憑りつかれた今日この頃。

先日、Javascript*別ページへ値を渡す*的なブログを書きましたが、
今度は送った値を受け取ってみよう的なメモです。

ページ遷移って漢字が難しくて嫌だけど…。

<script type="text/javascript">
<!--
STR = location.search;//クエリパラメータを取得
STR = str.substring(1,str.length);//取得したパラメータを書き出せるよう変換
document.write(文字列);
/ / -- >
</ SCRIPT>

値の送り先のURLが例えは、

http://~~~.html

だとすると、

http://~~~.html?パラメータ

という感じで、

受け取りたい値は以降に入れて別ページに
送ることができます。

送られた値はlocation.searchで取得できます。

とりあえず今回は取得した値を、Documet.write();で、
書き出してみました。

送った値は書き出す以外もいろいろと利用できて便利です!
  1. 2012/06/07(木) 16:11:14|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

Javascript*別ページへ値を渡す*

このエントリーをはてなブックマークに追加
職業訓練校時代、プログラミングで楽しさを一番感じたのがJavascriptでした。
動きが出せるのが楽しくて仕方なかったです~。

いろんなことがひと段落ついたのでしばらくJavascriptを再勉強しようと思います。

さて、自社の2つのサイト間でJavascriptで値を渡すというのをやってみたのでメモ。
想像以上に簡単でさっさと着手すればよかった…。
今回は別サイトで同じ商品番号のページに飛ぶというやつ。

飛ばしたいサイトの検索時のURLを利用してみた。

<script type="text/javascript" >
<--
Url = "<a href='"+"http://~~~~~?mode=srh&sort=n&cid=&keyword=" + "商品番号タグ'>";
document.wright(Url);
-->
</script>
別サイトへ</a>

たったこれだけ。
  1. 2012/06/07(木) 08:52:38|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

ExpressionBlend*文字を埋め込む*

このエントリーをはてなブックマークに追加
WindowsPhoneアプリを作った後、エミュレータでは問題なく表示されたフォントが実機に落とすと変わっていることがあります。

こんな時はフォントを埋め込んでしまいます。
ただし、Aマークがあるものは埋め込まなくても大丈夫。

AAA.jpg

しかもそのやり方は超簡単!
埋め込みにチェックを入れるだけ。

素材じゃないのでグラデをかけたり、ストーリーボードで色を変化させたり、
タップイベントなんかで色を変えたりと
簡単にアレンジできて便利です。

それなりのUIが作りこめます。
  1. 2012/06/06(水) 22:51:31|
  2. Blend for VisualStudio
  3. | トラックバック:0
  4. | コメント:0

自分メモ*タイマーイベント*

このエントリーをはてなブックマークに追加
先日作ったアプリでタイマーを使ってみたので忘れないうちにメモ。

DispatcherTimer timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(1);
timer.Tick += new EventHandler(timer_Tick);
timer.Start();

DispatcherTimer を使うときusingにSystem.Windows.Threadingを追記する必要があります。
VisualStudioからは超楽ちんに追記できます。
DispatcherTimerと打ち込むと、赤い下線が表示されエラーとなるので、
文字にカーソルを当て少しすると『選択した項目をバインドするオプション』が表示されるのでクリック。
using System.Windows.Threadingを選択すると勝手に追記してくれます。

名称未設定-1

進む時間の単位を決めます。
TimeSpan.以下は下記の通り。

FromDays = 一日単位
FromMunites = 分単位
FromSeconds = 秒単位
FromMilliseconds = ミリ秒単位

TimeSpan.FromSeconds(1)⇒1秒間隔
TimeSpan.FromMilliseconds(55)⇒55ミリ秒間隔
という感じで単位を細かく変更できます。

ページを読み込んだときからタイマーをスタートさせたいなら…

InitializeComponent();
//タイマーイベント
DispatcherTimer timer = new DispatcherTimer();
~以下省略~
}


タップをきっかけにタイマーをスタートさせたいなら…

private void btn_Tap(object sender, System.Windows.RoutedEventArgs e)
//タイマーイベント
DispatcherTimer timer = new DispatcherTimer();
~以下省略~
}

という感じに。

void timer_Tick(object sender, EventArgs e)
{
}

設定した間隔(インターバル)ごとに更新されるのでたとえば一秒ごとにタイマーを進めたいなら

void timer_Tick(object sender, EventArgs e)
{
int _sec += 1;//一秒に1づつ増える
}

this.テキスト名.Text = _sec;
みたいに
この値を、TextBlockなどに入れれば、数秒ごとに更新され、タイマーらしいタイマー完成!
  1. 2012/06/06(水) 22:28:04|
  2. C#
  3. | トラックバック:0
  4. | コメント:0

ExpressionBlendでアニメーションを入れ子にする

このエントリーをはてなブックマークに追加
ExpressionBlendでアニメーションを入れ子にすると便利です。
2つの動きを別々に設定することでより自然なアニメーションが作れます。

ladybird.jpg
飛びまわるテントウムシを作ってみます。

左右の羽と胴体、頭の4つの素材をそれぞれ用意して配置します。
四つまとめて選択して右クリックするとグループ化設定できます。
今回はGridでまとめてみました。(ショートカットでコントロール+GでもOK)

group.jpg
オブジェクトとタイムラインからストーリーボードを作っていきます。
下図赤丸右の「+マーク」クリックで新しいストーリーボードが作れます。
すでに作ったアニメーション(ストーリーボード)は赤丸左の↓から編集できます。
ストーリーボードの編集をやめたい時は下図赤丸真ん中「×マーク」を必ずクリックして終了しておきます。

ladybird1.jpg

キーフレームを設定していきます。
下図0+みたいなアイコンをクリック。
タイムラインのオブジェクトごとに設定出来るので、
今回はまず羽二枚をテントウムシの羽ばたきを再現します。

閉じている状態と開いている状態を作りたいのでまずはタイムライン0秒にクリックしてキーフレームをマーク。
タイムラインを羽を開いた状態に変えて、0.02秒後くらいにキーフレームをマーク。

再生して動きをチェックして問題なければ、
タイムライン上の開いた状態・閉じた状態のキーフレームを選択し、ひたすらコピペします。

また再生して動きをチェック。
問題なければ、今度は「羽ばたきながら飛び回る」を再現します。

Gridを選択しタイムラインの0秒にキーフレームをマーク秒を進めて適当な位置にGridごと移動させます。
回転させたりしてもオッケーです。
再生して確認しながら、自然な動きに仕上げていきます。

キーフレーム

最後、元の位置に戻します。
ぴたっと戻したいので、プロパティ画面下の方にある変換メニューで微調整します。
XとYを0にすると元の位置に戻ります。
また、回転させている場合は、回転から数値を0に。

変換で設定した方がかっちり作れるので初心者向けです。

テントウムシが飛び回るキーフレームと羽ばたきのキーフレームの終了位置が同じになるようにします。
※ずれるとアニメの仕上がりがいまいちになります。



最後に繰り返しパターンを設定します。

設定したいストーリーボードを選択すると右側のプロパティが下記のように変わります。
1x(1回)、2X(2回)、3X(3回)、Forever(エンドレス)、
さらにAuto Reverse(一回再生したアニメーションを巻き戻す)を設定できます。
エンドレスに飛び回ってもらいたいのでForeverにチェックを入れます。

animetype.jpg
  1. 2012/06/04(月) 22:18:51|
  2. Blend for VisualStudio
  3. | トラックバック:0
  4. | コメント:0
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。