プログラムジャンク箱

2014年8月12日火曜日

Windows8の他のPCのドライブを参照

Windows8.1を使っていますが、エクスプローラで"ネットワーク"を見ていると他のWindows8.1のマシンが見えます
Windows7以前はフォルダ共有をしないとダメだった気がしますが、Windows8(.1?)からはMSアカウントにしていればそのままアクセス出来た気がしましたが...

久々にアクセスしようと思ったら"パスワードが違っています"と言われます(あれ??)
よく見ると、ドメインにローカルPCの名前がついたようなログイン名になっています
ex) computer_name01\hogehoge
みたいな(compter_name01は現在自分がログインしているコンピュータ名)

これではダメですね...(エラーの"パスワードが違っています"だと勘違いしますが...)

という事で適当に
computer_name02\hogehoge@live.jp
としたら入れました(!?)

便利な機能ですが、"パスワードが違う"と言われると勘違いしますよね...

2014年6月21日土曜日

Canvasその1 fillRectで矩形を描画

HTML5での図形描画はcanvasというものを使います

最初のひな形を基に、四角を描画するコードを書いてみます
間違っていると描画されませんので、適当にデバッグログを入れてfirefoxのコンソールで確認しながら進めます

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Canvas01 </title>

</head>

<body onload="draw('canvas');">
<H1> Canvasによる矩形の描画 </H1>
<canvas id="canvas" width="400" height="300" />

<script>
    function draw(id){
        console.log("ondraw : " + id);

        var canvas = document.getElementById(id);
        if( canvas == null ){
            conslole.log("ぬるぽ");
            return;
        }

        var context = canvas.getContext('2d');
        context.fillStyle = "#FF0000";        // 赤100%
        context.fillRect(0, 0, 400, 300);        // 描画
    }
</script>
</body>
</html>

canvasを使用する手順としては、まずHTML側では
1. body内にcanvasタグをつける
　　idとサイズを記載する
2. scriptタグ内にcanvasに描画するjavascriptの関数を追加
　　今回は"draw"という関数を用意しました
3. 関数の呼び出し用のイベントを追加
　　今回はbodyがloadされたら関数drawを描画させる為に
      <body onload="draw('canvas');">
     としています

javascript側の処理は
1. document.getElementByIdで引数(今回はid:canvas)から"要素"を取得
　 ( DOMオブジェクトと記載しているページもありますね)
        var canvas = document.getElementById(id);
    の部分です
2. このオブジェクト(要素・DOMオブジェクト)がnullだったら処理をしないのがお作法なので
　 nullチェックを行います　
3. DOMオブジェクトからグラフィックコンテキストを取得
　ここの引数が2dとなっていますが、現在は2dしか無い模様です
　このcontextに対して描画の操作を行っていきます
4. 塗りつぶし処理
　グラフィックコンテキストに対して塗りつぶしメソッドを実行します
　今回はfillで塗りつぶしていますが、輪郭を描くstrokeというものも存在するようです
　 context.fillStyle = "#FF0000";        // 赤100%
　　　　　RGB値でfillStyleプロパティ（色)を設定
　　　　　　"red"というように定義済のものを指定可能
　　　　　　rgbaの記載もできる模様
　 context.fillRect(0, 0, 400, 300);
　　　　　描画。引数はrectのサイズ

とりあえずこんな感じで図形が描画できました

　　　　　

2014年6月9日月曜日

FireFoxでJavaScriptコンソールを表示する

JavaScriptのデバッグ方法はどうするのかと思っていたのですが、ログの表示をする方法が使えそうです。

FireFoxを使っているので、JavaScript Consoleを使う事によりログ出力を行います

1. FireFoxの右上の"三"をクリックし、"開発ツール" -> "Webコンソール" を選択
   (ブラウザ画面下にコンソール画面が表示される)
2. htmlのscriptタグ部分に以下の記述をする
    <script>
       console.log("hoge");
    <script>

サンプルですが、こんな感じのテキストファイル(hoge.html)をエディタで作って、
- FireFoxにドラッグ&ドロップ
- ダブルクリック (htmlに関連付けしてある場合)
すると、consoleに文字が表示されます

---
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> ログ出力テスト </title>
</head>

<body>
    <div id="section"></div>
    <script>
        console.log("Hello World");
    </script>
</body>
</html>

2014年6月8日日曜日

HTML5 最初の一歩

HTML5を調べ始めましたので再開します

ローカルでHTMLを実行する事を前提に書きます
なので、サーバー側の処理とかは後回しです

実行手順
1. エディタでhoge.htmlを作成
   (文字コードはUTF-8と宣言するのでsaveする際は"UTF-8"とする)
2. hoge.htmlを以下のいずれかで実行
- エクスプローラでダブルクリックする
    - ブラウザにドラッグ&ドロップ
としています

HTMLとJavaScriptの記述
- HTMLの中にJavaScriptで全部書く
- JavaScriptのファイルを分離して、最低限の記述をHTMLに書く

があるようですが、いずれもHTMLのファイルを作成するようです
最低限、以下の内容をHTMLファイルに記載します

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> タイトル </title>

</head>

<body>
<div id="xxxx"></div>
    
<script>
    
</script>
</body>
</html>

scriptタグを書く位置は参照したページによってはbodyに書いているものもあるようで、動作が怪しかったらそのうち調べてみようかと思っています

2013年6月9日日曜日

画像の表示とStretch

WPFで画像の表示をしてみます
固定の画像を表示させる場合は、xamlに以下の記述をするだけです

<Image Source="C:\Users\hogehoge\Pictures\110929-193431.jpg">

Stretchプロパティにより表示領域に対する表示方法を指定することができます
None(左上) : そのままの画像の大きさ。表示領域が画像より小さいと一部のみの表示
Fill(右上) : 上下左右を表示領域にあわせて拡大縮小。縦横比も保持されない。
Uniform(左下) : 表示領域に縦横比を保持して表示。これが一番使いそう!?
UniformToFill(右下) : 縦横比を保持した最大の表示
といったところの様子

--- xamlのコード (ファイル名(パス)の指定はお好みの画像にて!)
<Window x:Class="Graphic.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="512" Width="1024">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="256" />
            <RowDefinition Height="256" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="512" />
            <ColumnDefinition Width="512" />
        </Grid.ColumnDefinitions>
        <Image Source="C:\Users\hogehoge\Pictures\110929-193431.jpg" Stretch="None" Grid.Column="0" Grid.Row="0"/>
        <Image Source="C:\Users\hogehoge\Pictures\110929-193431.jpg" Stretch="Fill" Grid.Column="1" Grid.Row="0"/>
        <Image Source="C:\Users\hogehoge\Pictures\110929-193431.jpg" Stretch="Uniform" Grid.Column="0" Grid.Row="1"/>
        <Image Source="C:\Users\hogehoge\Pictures\110929-193431.jpg" Stretch="UniformToFill" Grid.Column="1" Grid.Row="1"/>
    </Grid>
</Window>

2013年6月4日火曜日

TextBlockの文字を修飾する

文字を修飾する方法の良いサンプルがMSDNに掲載されていましたので真似してみます

ボタンの文字を"Run"で修飾してみます
- Runで文字の属性変更
- <Run TextDecorations="****">で修飾
の模様
日本語ではベースラインとアンダーラインの区別はわかりにくいですが、アルファベットを使う場合は効果的ですね

<Window x:Class="StringDecorate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Width="200" Height="150">
            <TextBlock>
                ふつーのTextBlock<LineBreak />
                <Run FontWeight="Bold" FontSize="13">フォントサイズ+Bold</Run><LineBreak />
                <Run TextDecorations="Underline">アンダーライン</Run><LineBreak />
                <Run TextDecorations="Strikethrough">打消し線</Run><LineBreak />
                <Run TextDecorations="Overline">オーバーライン</Run><LineBreak />
                <Run TextDecorations="Baseline">gベースライン</Run>
                <Run TextDecorations="Underline">gアンダーライン</Run>
            </TextBlock>
        </Button>
    </Grid>
</Window>

詳しくはMSDNのこちら参照
http://code.msdn.microsoft.com/windowsdesktop/XAML-WPF-165daa55

2013年5月14日火曜日

DataGridで表示してみる

昨日と同じ内容を、DataGridで表示してみます
        <DataGrid ItemsSource="{Binding People}" />
とするとbindingしている内容が表示される模様

変わっているのは、表題部分をクリックするとデータをソートしてくれるところが便利かと思いましたが、他は何が違うのかは調べてみたいと思います

ListViewのようにHeaderは明示的に設定してませんが、メンバ名が表示される模様
ViewModel側は特に変えていないのでView側から見ていきます

--- View
<Window x:Class="DataGrid_130512.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:l="clr-namespace:DataGrid_130512"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <l:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        
        <DataGrid ItemsSource="{Binding People}" />
    </Grid>
</Window>

--- ViewModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Practices.Prism.ViewModel;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataGrid_130512
{
    class MainWindowViewModel : NotificationObject
    {
        ObservableCollection<Person> _people = new ObservableCollection<Person>();
        public ObservableCollection<Person> People
        {
            get { return _people; }
            set { _people = value; }
        }

        /// <summary>
        /// コンストラクタ
        /// </summary>
        public MainWindowViewModel()
        {
            // 表示データの生成
            _people.Add(new Person("Stan Hansen", 6));
            _people.Add(new Person("Bruiser Brody", 5));
            _people.Add(new Person("Terry Funck", 10));
        }

        /// <summary>
        /// 選択されている人
        /// </summary>
        public Person SelectedPerson { get; set; }

        public void Execute()
        {
            if (SelectedPerson != null)
            {
                MessageBox.Show(SelectedPerson.Name);
            }
            else
            {
                MessageBox.Show("選択されていません");
            }
        }
    }

    // ListBoxに表示するデータ
    public class Person
    {
        public string Name { get; set; }
        public int TitleCount { get; set; }

        /// <summary>
        /// コンストラクタ
        /// </summary>
        /// <param name="name"></param>
        /// <param name="count"></param>
        public Person(string name, int count)
        {
            Name = name;
            TitleCount = count;
        }
    }
}

登録: 投稿 (Atom)