GOM SKINの理解 – 基礎 GOM PLAYERは使い手が『スキン』を任意に変更して利用できるようにサポートしています。

Slides:



Advertisements
Similar presentations
Silverlight Producer コンテンツ作成 第一回 GKB48 セミナー 「学習型クラウド共有スペース GKB コモンズは何を目指すか」 2013.oct.30.
Advertisements

1 WORD の起動法と終了法 ● WORD の起動法 (1) デスクトップの Microsoft Word アイ コンをダブルクリックする。 * (2) 「スタート」 ― 「すべてのプログラ ム」 ― 「 Microsoft Word 」と選ぶ。 (3) Word で作成された文書があるとき は、そのアイコンをダブルクリック.
第5章 JMPのインストールと基本操作 廣野元久
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
目次(電子納品 操作手順) ※ページはスライド番号
応用コース:ワープロを活用する WORD2000 1回目 基礎コースの復習(第1章と付録) 2回目 文字の入力(第2章と第4章)
7-1.WEKOコンテンツ 一括登録 マニュアル Version2.5
TeX で数式を書くための PowerPoint アドイン Ver (2011/06/26) Ver. 0.1 (2007/5/30)
エクセル(1)の目次 起動法、ブック、シート、セル ブックの開き方 エクセル画面 マウスポインターの種類 シート数の調節 データの入力法
情報処理実習 第05回 Excelマクロ機能入門 操作マクロ入門.
図の挿入 ●方法1 ①図を挿入する位置にカーソルを置く。 ②「挿入」タブ ⇒「図」 → 「ファイルから」とクリックする。 ③挿入するファイルを選択し、「挿入」をクリックする。 ●方法2(書式までコピーされるので、ファイルサイズが大きくなる) ①挿入する図をコピーする。 ② 挿入する位置にカーソルを移動し、ツールバーまたは右クリックメニューの「貼り付け」をクリックする。
校内研修用提示資料 パワーポイントの基本操作.
情報処理 第8回.
2017/3/2 情報処理 第8回.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報処理 第7回.
3DCGコンテンツの基礎 第5回授業:最終課題制作
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
デジタルポートフォリオ作成支援ツール PictFolio 使用マニュアル
F5 キーを押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
2017/3/7 情報処理 第8回.
プレゼンテーション用ソフトウェア Impress
ファイルやフォルダを検索する ①「スタート」→「検索」→「ファイルとフォルダ」とクリックする。
コントロールパネル ◎コントロール パネル: コンピュータのさまざまな機能を設定するための画面
11.1 表の作成 表の各部名称 列 行 セル 罫線.
オンライン登記申請マニュアル 【第4段階】 オンライン登記申請編
2007 Microsoft Office system クイックガイド
コントロールパネル ◎コントロール パネル: コンピュータのさまざまな機能を設定するための画面
エクセル(1)の目次 起動法、ブック、シート、セル ブックの開き方 エクセル画面 マウスポインターの種類 シート数の調節 データの入力法
Microsoft Office 2010 クイックガイド ~ファイルの互換性編~
プレゼンテーション用ソフトウェア Impress
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
エクスプローラ ● エクスプローラ: ファイルやフォルダを階層構造で表示してあり、これらを操作するのに便利。
15分でわかる RefWorks 基本操作.
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
文献管理ソフトRefWorksの利用.
WebCluster スライドショーで見る操作ガイド
WebCluster スライドショーで見る操作ガイド
コンピュータ演習Ⅰ 8月5日(金) 4限目 表を使う.
2017/4/9 情報処理 第5回.
XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.
Titanium Studioを使った アプリ開発 Vol.1
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
Excel 2002,2003基本14 テンプレートを作る.
情報処理 第8回.
IMAQ Vision Builderを使用して、グリッドキャリブレーションを行う方法
プログラミング基礎a 第10回 Javaによる図形処理入門(2) GUIの使い方
単語登録(1) ◎MS-IMEの「単語登録」に、単語、語句、記号など自分がよく使うものを登録しておくと、便利である。
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
段落書式設定 段落とは: Enterキーを押すまでに入力した文字列や図などのまとまり
諸連絡 USBメモリの販売について 日時:6月23日(月)授業開始前 商品:プリンストン社製32MBのUSBメモリ
Processing使用の準備.
スイッチを入れる前に… 講習を受けていない人は、まだスイッチを入れないこと。 まず講習を受けてセットアップを行ってください 注意.
プログラミング基礎a 第10回 Javaによる図形処理入門(2) GUIの使い方
7-3. 移行データ登録簡易マニュアル Version 1.0
7-0.SWORD Client for WEKO インストールマニュアル Version 2.2
コンピュータ プレゼンテーション.
Microsoft Office クイックガイド ~基本編~
F5 キーを押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
BLJ2013 BentleyArchitecture
Microsoft SharePoint Online の Web サイトを カスタマイズする方法
Microsoft Office 2010 クイックガイド ~ファイルの互換性編~
エクスプローラ ● エクスプローラ: ファイルやフォルダを階層構造で表示してあり、これらを操作するのに便利。
回転する歯車 プレゼンテーション プレゼンテーションのスライドショーを開始 (F5 キー) すると、アニメーションが再生されます。
ビデオ ビデオのクイック リファレンス ビデオ コントロールを使って表示する Lync 2013 クイック リファレンス
単語登録(1) ◎MS-IMEの「単語登録」に、単語、語句、記号など自分がよく使うものを登録しておくと、便利である。
サンプル見出し テキスト 1 行目 テキスト 2 行目 テキスト 3 行目 (中級) 図の背後でタイトルを移動させるアニメーション効果
メモリアルボックス(回線不要)マニュアル
Presentation transcript:

GOM SKINの理解 – 基礎 GOM PLAYERは使い手が『スキン』を任意に変更して利用できるようにサポートしています。 - LIST.XML : スキンの内容を早くローディングするための説明ファイル - SKIN.XML : XML フォーマットで構成されたスキンの構成文書 - *.BMP : スキンを構成するイメージファイル 2. GOM SKIN ファイルの理解 - sample1.zipファイルをダウンロードし、, C:\Program Files\GRETECH\GomPlayer\skinsフォルダに保存して、解凍します。 ● GOM PLAYERーお試し用のスキンファイル1 : sample1.zip(ダウンロード) < 位置: C:\Program Files\GRETECH\GomPlayer\skins\sample1フォルダ> 解凍すると、C:\Program Files\GRETECH\GomPlayer\skins\sample1フォルダに SKIN.XML, LIST.XML, LOGO.BMPファイルが  保存されます。 - GOM メニュー→スキン選択→SAMPLE1[フォルダ]をクリックすると、上のように GOM PLAYERの基本スキンが ‘SAMPLE1’スキンに変更されます。

- スキンのフォルダ内にこのファイル(list.xml)を入れておくと、スキンのローディング時間が短くなります。 - スキンのファイル名(FileName)は必ずskin.xml として、 スキン名(Name)はskin.xmlファイルの内にある名前と同一に名付けます。 <?xml version="1.0" encoding="UNICODE" ?> <SKIN_LIST> <SKIN FileName="skin.xml" Name="SAMPLE1" /> </SKIN_LIST> 2) SKIN.XML ファイル : XML フォーマットのスキン構成文書で、スキンの属性、ボタンの配置などの設定をすることができます。 SKIN.XML ファイルの全体的な構造は次のようです。 ボックスの中は テキストで処理 박스 안은 텍스트로 처리 <?xml version="1.0" encoding="UNICODE" ?> <GXSkin> <SkinInfo/> <!-- 1. スキンの情報--> <MainWindow/> <!-- 2. メイン ウィンドウの属性 --> <SkinWindow> <!-- 3. メイン ウィンドウ: スキン ウィンドウの定義 --> <PreDefine> <!-- 1) 基本定義 1 --> ------ </PreDefine> <RegionDefine> <!-- 2) ウィンドウ 領域の定義 --> </RegionDefine> <?Script <!-- 3) スクリプト --> ?> <PostDefine> <!-- 4) 基本定義 2 --> </PostDefine> <ControlDefine> <!-- 5) コントロール配置 --> <SkinWindow> <!-- 6) ポップアップ メニュー: スキン ウィンドウの定義 --> </SkinWindow> </ControlDefine> </GXSkin>

1.スキンの情報(SkinInfo) : GXSKINを用いるプログラムで独自的にスキンの情報を定義して使う部分 2. メインウィンドウの属性(MainWindow) : GXSKINを用いるプログラムでメインウインドウの属性を定義するために使う部分 3. メインウィンドウ: スキンウィンドウの定義(SkinWindow) : メインスキン ゛ウィンドウ゛を作ってそれに対した属性を指定するタグです。 1) 基本定義 1(PreDefine) : PreDefineはスキンで共通的に使う項目を定義する部分です。    共通のモヂュ-ルにはカーラーテーマ、フォント、カーソルなどが含まれ、前処理/後処理のためのスクリプトも含まれます。  2) ウィンドウ領域の定義(RegionDefine) : RegionDefineはスキンの領域を定義する部分です。    領域ウィンドウを設定すると、スキンウィンドウを長方形だけではなく、色々な形に変更することができます。 3) スクリプト(Script) : 該当のスキンウィンドウ(SkinWindow)で使うスクリプト関数を定義することができます。 4) 基本定義 2(PostDefine) : PostDefineは内部的にはPreDefineと一緒ですが、スキンが生成された後に、後処理のためのコンテンツが入る違いがあります。。 5) コントロールの配置(ControlDefine) : スキンでの見える部分を定義し、各種スキンコントロールを配置して定義する部分です。  6) ポップアップウィンドウ: スキンウィンドウの定義(SkinWindow) : ポップアップスキン “ウィンドウ”を作って、それに対した属性を指定するタグです。    GOM PLAYERの『再生リスト』と『コントロールパネル』の定義をここで行います。 では、SKIN.XMLファイルを修正して自分の好みに合うスキンファイルを作ってみましょう。 参考) GPS(GOM Player Skinfile) ファイルは... GOM PLAYERのスキンファイルに使われる.gpsは ‘GOM Player Skinfile’の略字です。 .gpsファイルは: - XMLスキンスクリプト、BMPフォーマットのコントロールイメージでGOM PLAYER SKINを製作した後、 - それを .zipフォーマットで圧縮します。 - 圧縮した .zipファイルの拡張子を .gpsに変更します。 上記のように製作したスキンファイルを『スキンダウンロード掲示板 』に.gpsファイル形式でアップロードすると、他のユーザーもダウンロードできます。   拡張子の変更 実行 < 説明: sample1.zipファイルを sample1.gpsファイルに変更 > 上で ≪C:\Program Files\GRETECH\GomPlayer\skinsフォルダ≫ にダウンロードしたsample1.zipファイルを sample1.gpsに名前を変えて実行(マウスダブルクリック)させると、 直ちにsample1 スキンに入れ替わります。

26. GOM SKINの理解- 実習 1.次の sample2.zipファイルをダウンロードして、 C:\Program Files\GRETECH\GomPlayer\skinsフォルダに保存した後、圧縮されたZipファイルを解凍します。 ● GOM PLAYER用のSAMPLE SKINファイル 2 : sample2.zip(ダウンロード) 2. 解凍すると、C:\Program Files\GRETECH\GomPlayer\skins\sample2フォルダで、上記のようなファイルを見ることができます。 SAMPLE2 標準 3. GOM メニュ->スキン選択->SAMPLE2[フォルダ]をクリックすると、上のようにGOM PLAYERの標準スキンが‘SAMPLE2’スキンに変更されます。 以前のGOM PLAYER標準スキンに戻るには “GOM メニュ->スキンの選択-><標準>”スキンを選択します。

4. SKIN.XML ファイルを修正し、スキンにメインロゴを追加しましょう。 - MainWindow 領域に次のようなテキストを追加します。 変更前 変更後 <MainWindow Style="popup" MinSize="" Logo="" LogoType="" BkgndColor=“orange" /> MinSize="150,100" Logo="GOM.bmp" LogoType="center" BkgndColor="orange" ボックスの中は テキストで処理 ;メインロゴ;が 追加された。 使われた命令語) 1) MainWindow : GXSKINを使うプログラムで、独自的にメインウィンドウの属性を定義するために使う部分です。 2) MinSize :GOM PLAYERを最小化した時のサイズを指定 3) Logo :GOM PLAYER メイン画面に入るイメージ名を入力 ※ スキンを修正する時に... - スキンを修正して結果をすぐ確認したい場合は、プレーヤーの上でCtrl+Rボタンを押すと、修正したスキンに変更されます。 - スキンファイルに文法の誤りがあると、GOM PLAYERはエラーメッセージを出力し、標準スキンに戻ります。 - この際は、問題のある部分だけを修正し、該当のスキンを開けてください。(GOM メニュー→スキン選択→SAMPLE2[フォルダ]).

GOM メニューと ウィンドウのサイズ調節ボタンが追加 5. SKIN.XML ファイルを修正して、プレーヤーの上段部分に ‘GOM メニューボタン及びウィンドウサイズボタン’を追加してみましょう。 - ControlDefine領域の真ん中に次のようなテキストを追加します。 <ControlDefine> <StaticControl CID="CONTROLID_CAPTIONFRAME" StaticControlType="bitmap" Image="frame.bmp" ImageType="frame" Align="top" Height="22"> <StaticControl CID="CONTROLID_CAPTION" Image="frame.bmp" StaticControlType="bitmap" ImageType="tile" Align="client" Gaps="1,1,1,1"> <PopupMenuButtonControl CID="ID_POPUP_CONTEXT_BTN" ButtonControlType="bitmap" Image="MAINICON.BMP" Split="4" Align="left" Width="autosize" Gaps="4,1,0,0" /> <ButtonControl Tooltip="Close" CID="ID_SYS_CLOSE" ButtonControlType="bitmap" Image="close.bmp" Split="4" Align="right" Width="autosize" Gaps="0,0,2,0" /> <ButtonControl Tooltip="Maximize" CID="ID_SYS_MAXIMIZE" ButtonControlType="bitmap" Image="maximize.bmp" Split="4" Align="right" Width="autosize" Gaps="0,0,2,0" /> <ButtonControl Tooltip="Minimize" CID="ID_SYS_MINIMIZE" ButtonControlType="bitmap" Image="minimize.bmp" Split="4" Align="right" Width="autosize" Gaps="0,0,2,0" /> <StaticControl CID="CONTROLID_TITLE" StaticControlType="transparent" Align="client" FontColor="#303030" FontShadowColor="#d0d0d0" InnerGaps="0,2,0,0" TextAlign="hcenter,singleline,vcenter,endellipsis" /> </StaticControl> <WindowControl CID="CONTROLID_MOVIE" Align="client" Gaps="0,0,0,0" /> </ControlDefine>             GOM メニューと ウィンドウのサイズ調節ボタンが追加 一行目のStacticControlで、 Align=“top” Height=“22”を入力 < 変更する前 > < 変更した後 >

参考) Align=“left|top|right|bottom|none|client|center|popup|nomove“の場合 使われた命令語) 1) ControlDefine : <ControlDefine> タグの中のコントロールには基本的に共通の属性が存在する。代表的には『整列(Align)』、 『 カーソル(Cursor) 』などがある。特に『整列(Align)』の場合は、画面にコントロールをどう配置させるかを決定する重要な要素なので、正確な理解を必要とする。 参考) Align=“left|top|right|bottom|none|client|center|popup|nomove“の場合 left : コントロールを対象領域の左側に位置付け。コントロールの太さはWidth属性で指定。 right :コントロールを対象領域の右側に位置付け。コントロールの太さはWidth属性で指定。 top : コントロールを対象領域のトップに位置付け。コントロールの高さはHeight 属性で指定。 bottom : コントロールを対象領域の下に位置付け。コントロールの高さはHeight 属性で指定。 center : コントロールを対象領域の真ん中に位置付け。コントロールの高さはWidth / Height属性で指定。 none : コントロールの位置を絶対座標に指定。絶対座標は Left, Top, Width, Height / Left, top, Right, Bottom / Rect 属性で指定。 client : コントロールを対象領域をぎっしり詰める。 popup : ポップアップウィンドウのみに使われる。ポップアップウィンドウで浮かぶので <SkinWindow>コントロールにだけ使える。 nomove : 見えないコントロールに使う。 center 2) StaticControl : StaticControlは次のような方法で使われます。 - 単純背景及びイメージの表示 - 単純 列合わせのための余白処理 - 状態による文字列の表示領域 - 状態によるイメージの表示領域 - イメージを使わなくてカーラーだけ表示する時 - 場合によってはボタンコントロールのようにマウスのクリック処理が必要な時に使う。 - 共通属性のNcHitTestを利用してマウスクリックを処理する時。 3) ButtonControl :ボタンコントロールはGOM PLAYER上でマウスをクリックすると生じる変化を指すコントロールです。なので、基本的にマウスクリック のイメージが設定できるし、それは二つ(CIDでコマンドの指定、スクリプトの呼び出し)の方式があります。 4) PopupMenuButtonControl : ポップアップメニューのボタンコントロールはボタンコントロールの一種で、大体の動作と、属性は一緒だが、ボタンをクリックしたらボタンの周りにポップアップメニューが浮かぶ違いがある。

6. SKIN.XML ファイルを修正し、再生/一時停止、開く、ボリューム調整ボタンを追加してみましょう。 - ControlDefine領域の中に次のようなテキストを入れます。 <StaticControl CID="CONTROLID_CONTROLPANEL" StaticControlType="bitmap" Image="panelframe.bmp" ImageType="frame" Align="bottom" Height="42" > <StaticControl StaticControlType="bitmap" Image="controlpanel.bmp" ImageType="tile" Align="client" Gaps="1,1,1,1" > <StaticControl StaticControlType="transparent" Align="top" Height="3" /> <StaticControl StaticControlType="transparent" Align="top" Height="15" > <SliderControl CID="CONTROLID_SLIDER_MOVIE" SliderType="knobonly" Image="mainslider.bmp" ImageKnob="knob.bmp" ImageEdge="5,5" Gaps="8,0,8,0" Align="client" /> </StaticControl> <StaticControl StaticControlType="transparent" Align="bottom" Height="1" /> <StaticControl StaticControlType="transparent" Align="left" Width="135" Gaps="5,2,0,0" > <ButtonControl Tooltip="Play&&Pause" CID="ID_PLAYPAUSE" ButtonControlType="bitmap" Image="play.bmp" Image2="pause.bmp" Split="2" Align="left" Width="autosize" MinSize="0,0" /> <ButtonControl Tooltip="Open" CID="ID_OPEN" ButtonControlType="bitmap" Image="open.bmp" Split="2" Align="left" Width="autosize" Gaps="5,0,0,0" MinSize="0,0" /> CID="CONTROLID_SLIDER_VOLUME" Image="volumeslider.bmp" Gaps="5,2,5,0" Align="right" Width=60" MinSize="20,0"

下側に再生、一時停止、  開く、ボリューム調整 メニューが追加された。 一行目の StacticControlで Align=“bottom” Height=“42“を入力 < 変更した後 > < 変更する前 > 使われた命令語) - SliderControl : スライダーコントロールは連続される数値を表示するか、ユーザーにが入力された場合に使われるコントロールで、GOM PLAYERでは、スライダーの進行状態やボリュームコントロールを表示する時に主に使われます。 7. スキンの修正作業が完了したら、C:\Program Files\GRETECH\GomPlayer\skins\sample2 フォルダにあるファイルを『sample2.zip』というファイルで圧縮した後、ファイル名を『sample2.gps 』に変換したら、GOM スキンが完成されます。 完成されたGOM スキンを.gps形式にして ‘スキン掲示板’に登録すると、他のユーザーも容易くダウンロードできます。