PR

ローカル環境にある画像を表示させよう

2014年7月4日(金)
薬師寺 国安

この連載もいよいよ最終回です。今回は、ローカルにある任意の画像を指定して表示させる方法と、ローカルフォルダー内にある画像を全て表示する、2つのサンプルを紹介したいと思います。

10回の連載を通じて、Windows アプリのごくごく基本的な作成方法を解説してきました。この基本を元にして読者のアイデアをアプリとして作成し、Windows ストアに申請してもらいたいです。

Windows アプリには「認定要件」というものが存在し、この要件をクリアしたアプリでないと、審査に合格しません。この認定要件は常に改定が繰り返されており、昔と比べるといくぶんか開発者にとって有利な内容に改定されています。「認定要件」の詳細については下記のURLを参照してください(図1)。

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083.aspx

Windows アプリ 認定要件の画面
図1 Windows アプリ 認定要件の画面

では、まずはプロジェクトを作成しましょう、「名前」は「GetLocalImage」とします。

使用するコントロールは表1を参照してください。

表1: 使用する主なコントロール

コントロール 名前 役割
Image Image1 ローカルの画像を表示する
TextBlock TextBlock1 読み込んだローカル画像のファイル名を表示する
AppBarButton openButton ローカルの画像を表示するボタン

表1をレイアウトすると図2のようになります。

コントロールをレイアウトした
図2 コントロールをレイアウトした

書き出されるXAMLコードをリスト1のように編集します。

リスト1 編集されたXAMLコード(MainPage.xaml)

  • (1) Grid要素をViewBox要素で括る。ViewBox要素は伸縮およびスケーリングを実行して単一の子を使用可能な領域全体に引き伸ばすことができるコンテンツ デコレータを定義する要素です。これによって画面の解像度に応じてオブジェクトのサイズも調整されて表示されるようになる。
  • (2)ローカルの画像を表示させるImage要素を配置、Widthに640、Heightに480と指定する。
  • (3)読み込んだ画像のファイル名を表示するTextBlock要素を配置する。「書体」、「文字サイズ」、「太字」をプロパティから設定する。文字の位置を「中央揃え」に指定しておく。
  • (4)AppBarButton要素を配置し、プロパティの[アイコン]ペインを展開して[Symbol]に「OpenFile」を指定し、[共通]ペインの[Label]に「画像を読み込む」と指定する。
<Page
    x:Class="GetLocalImage.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GetLocalImage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Viewbox>■(1)
        <Grid Background="Black" Height="767">
            <StackPanel  HorizontalAlignment="Left" Height="82"  VerticalAlignment="Top" Width="1356" Background="Navy" Orientation="Horizontal">
                <TextBlock HorizontalAlignment="Left" Height="68" Margin="20,15,0,-1" TextWrapping="Wrap" Text="ローカルの画像を指定" VerticalAlignment="Top" Width="492" FontSize="48" FontWeight="Bold"/>
            </StackPanel>
            <Image x:Name="Image1" HorizontalAlignment="Left" Height="480" Margin="368,126,0,0" VerticalAlignment="Top" Width="640"/>■(2)
            <TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Height="66" Margin="368,626,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="640" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>■(3)
            <AppBarButton x:Name="openButton" HorizontalAlignment="Left" Height="94" Label="画像を読み込む" Margin="29,626,0,0" VerticalAlignment="Top" Width="141" Icon="OpenFile"/>■(4)
        </Grid>
    </Viewbox>■(1)
</Page>

では、次に、MainPage.xaml.vbをダブルクリックしてコードを記述します。

ロジックコード

まず、名前空間を読み込みます(リスト2)。

リスト2 名前空間の読み込み

ユーザーインターフェイス(UI)要素の作成と管理を行うためのクラスの含まれる、Windows.Storage.Pickers名前空間を読み込む。これにより、ユーザーは、ファイルの閲覧、開くファイルの選択、ファイルの格納場所の選択を行うことができる。

Imports Windows.Storage.Pickers

ファイル、フォルダーおよびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間を読み込む。

Imports Windows.Storage

Public NotInheritable Class MainPage
    Inherits Page

次にメンバー変数を宣言する(リスト3)

リスト3 メンバー変数の宣言

ファイルを表すStorageFileクラス型のメンバー変数myFileを宣言する。

    Private myFile As StorageFile

次は、[画像を読み込む]アイコンがタップされた時の処理です(リスト4)。

リスト4[画像を読み込む]アイコンがタップされた時の処理

Image1を空にしておく。FileOpenPickerクラスの新しいインスタンスmyFilePickerオブジェクトを作成する。FileOpenPickerクラスは、ユーザーが選択し、ファイルを開くことのできるUI要素を表すクラスです。ファイルを開く最初の場所を設定するSuggestedStartLocationプロパティに、ピクチャライブラリーを指定しておく。開くファイルタイプを指定するFileTypeFilter.Addで「.jpg」と「.png」を指定しておく。ファイルを指定する場合は、FileTyleFilter.Add(".png")と指定する。"*.png"ではないので注意してほしい。PickSingleFileAsynメソッドで、ユーザーが1つのファイルを選択できるようにファイルピッカーを表示し、変数myFileで参照する。変数myFileがファイルを参照している場合は、新しいBitmapImageクラスのインスタンスmyBmpオブジェクトに、SetSourceメソッドで「Await myFile.OpenReadAsync」と指定する。そして、ファイルの内容を読み込むために、現在のファイルをランダムアクセスストリームで開く。Image1のSourceプロパティにmyBmpオブジェクトを指定すると、選択した画像が表示される。TextBlock1にはNameプロパティで拡張子を含むファイル名を取得して表示する。

    Private Async Sub openButton_Click(sender As Object, e As RoutedEventArgs) Handles openButton.Click
        Try
            Image1.Source = Nothing
            Dim myFilePicker = New FileOpenPicker
            myFilePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary
            myFilePicker.FileTypeFilter.Add(".jpg")
            myFilePicker.FileTypeFilter.Add(".png")
            myFile = Await myFilePicker.PickSingleFileAsync
            If myFile Is Nothing = False Then
                Dim myBmp As New BitmapImage
                myBmp.SetSource(Await myFile.OpenReadAsync)
                Image1.Source = myBmp
                TextBlock1.Text = myFile.Name
            Else
                Exit Sub
            End If
        Catch
            Exit Sub
        End Try
    End Sub
End Class

実行すると図3のように表示されます。

ピクチャライブラリー内の任意のファイルを選択して表示した
図3 ピクチャライブラリー内の任意のファイルを選択して表示した

では、次に、指定したフォルダー内の画像を全て表示するサンプルを紹介しましょう。

Think IT会員限定特典
  • ローカル環境にある画像を表示させるプログラム

    『Windows ストア アプリ 100行プログラミング』 第10回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

ローカル環境にある画像を表示させよう | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。