Posted at
XamarinDay 11

Xamarin Studioのエディタ部分に背景画像を入れてみる。

More than 1 year has passed since last update.


はじめに

これは、Xamarin Advent Calendar 11日目(2016/12/11)の投稿です。

今回は、Xamarin Stuidioを可愛くしよう!ということで、

エディタ部分の背景に画像を入れてみたいと思います。

これで、こころがぴょんぴょんするXamarin Studioや、

世界一可愛いXamarin Studioも作れちゃいます。

こんな感じです。

(せっかくなのでクリスマス感出してみました!)


プロ生ちゃんバージョン


いらすとやさんのサンタさんバージョン


スクロールしてもちゃんと表示し続けます。


やってみること

Xamarin StudioはオープンソースのMonoDevelopをベースに作られています。

そしてエディタの部分は、Xamarin StuidoでもMonoDevelopでも、

Mono.TextEditor.dll が共通して使われているようです。

ということで、下記の流れで作業してみます。

1. MonoDevelopのソースコードをダウンロード(Git Clone)する。

2. Mono.TextEditor.dll の中身を書き換えてビルドする。

3. 出来上がった Mono.TextEditor.dll を Xamarin Studioのものと入れ替える。

4. 好きな画像を準備する。

5. 改造完了!(∩´∀`)∩ワーイ


注意事項

Xamarin Studio自体を改造するため、何かしら不具合が出るかもしれません。

お試しになる方は、自己責任でお願いいたします。


製作環境 (動作確認環境)


  • macOS Sierra (10.12.1)

  • Xamarin Studio 6.1.2(build 44)

    *Stable Channelの本日時点の最新版

  • GitHub上のMonoDevelop (2016年12月11日15時時点)


1.MonoDevelopのソースコードをダウンロード(Git Clone)する。

MonoDevelopのソースコードは下記でダウンロード(Git Clone)できます。

※ここではユーザディレクトリにダウンロード(Git Clone)するとして進めます。

$ git clone git://github.com/mono/monodevelop.git

また、ビルドできるようにするために、下記の手順で準備をお願いします。

参考:Building MonoDevelop

1.Xcodeと Xcode Commandline toolのインストール

2.autoconf と automake のインストール

Homebrewがインストールされて入れば下記の要領でインストールできます。

$ brew install autoconf

$ brew install automake

3.下記コマンドの実行

$ export ACLOCAL_FLAGS="-I /Library/Frameworks/Mono.framework/Versions/Current/share/aclocal"

$ export PATH="/Library/Frameworks/Mono.framework/Versions/Current/bin:$PATH"

$ export DYLD_FALLBACK_LIBRARY_PATH=/Library/Frameworks/Mono.framework/Versions/Current/lib:/lib:/usr/lib

ここまでで、MonoDevelopをビルドできる準備が整いました!


2. Mono.TextEditor.dll の中身を書き換えてビルドする。


2-1.書き換えるファイル

書き換えるファイルは下記の TextArea.cs のみです。

Xamarin StudioでもRiderでもお好きなエディタで編集してください。

/Users/ユーザ名/monodevelop/main/src/core/Mono.Texteditor/Mono.TextEditor/Gui/TextArea.cs


2-2. using ディレクティブの追加

先頭のusing ディレクティブが並んでいる所に下記を追加します。

(47行目ぐらい)

using System.IO;

using System.Reflection;


2-3. 画像を読み込んだり表示するメソッドの追加

TextAreaクラスの一番最後(3361行目ぐらい)に下記を追加します。

private Pixbuf Image;

private const string ImageName = "Image.png";

private void LoadImage()
{
string location = Assembly.GetExecutingAssembly().Location;
string imagePath = "";

while (!(System.IO.Path.GetExtension(location) == ".app"))
{
location = System.IO.Path.GetDirectoryName(location);
if (string.IsNullOrEmpty(location))
{
imagePath = null;
break;
}

imagePath = System.IO.Path.Combine(location, "Contents", "Resources", ImageName);
}

if (File.Exists(imagePath))
{
Image = new Pixbuf(File.ReadAllBytes(imagePath));
}
}

private void DrawImage()
{
if (Image != null)
{
var rectangle = new Rectangle(Allocation.X, Allocation.Y, Image.Width, Image.Height);
int windowWidth, windowHeight;
GdkWindow.GetSize(out windowWidth, out windowHeight);
GdkWindow.DrawPixbuf(Style.BackgroundGC(State), Image, 0, 0, windowWidth - Image.Width, rectangle.Y, rectangle.Width, rectangle.Height, 0, 0, 0);
editor.TextArea.QueueDraw();
}
}


2-4. 画像をロードするメソッドの呼び出しを追加

Initializeメソッドの下から2行目(404行目ぐらい)に下記を追加します。

LoadImage();


2-5. 画像を描画するメソッドの呼び出しを追加

下記を以下の3箇所に追加します。

DrawImage();


  • ScrollToメソッドの下から2行目(1653行目ぐらい)





     

  • OnScrollEventメソッドの下から3行目(1750行目ぐらい)





     

  • OnExposeEventメソッドの下から2行目(1962行目ぐらい)



これで書き換えは完了です!


2-6.MonoDevelopのビルド

以下の流れで、MonoDevelopをビルドします。

※初回のビルドは時間がかかるので、少しお待ちください。

$ pushd monodevelop

$ ./configure --profile=mac

$ make


3.Mono.TextEditor.dll を Xamarin Studioのものと入れ替える。


3-1. 2.6で作成した Mono.TextEditor.dll を取り出す。

作成した Mono.TextEditor.dll は下記にあります。

分かりやすいように、デスクトップ等にコピーしておいてください。

 /Users/ユーザ名/monodevelop/main/build/bin


3-2. Xamarin Studioの Mono.TextEditor.dll を置き換える

Xamarin Studioの Mono.TextEditor.dll は下記にあります。

/Applications/Xamarin\ Studio.app/Contents/Resources/lib/monodevelop/bin

これを3-1.で取り出したものと置き換えてください。

この際、必ずXamarin Studioの Mono.TextEditor.dllをバックアップしてください。

また、Xamarin Studio自体をコピーして、コピーしたXamarin Studioのファイルを置き換える。

という方法も安全で良いと思います。


4.好きな画像を準備する。


4-1. 画像の準備

お好きな画像を下記の形式で準備してください。

画像のサイズは等倍で表示されるので、あまり大きくはしないでください。


  • PNG形式

  • 背景透過 (透過でなくても大丈夫ですが、透過の方が綺麗だと思います)

  • ファイル名:Image.png (必ずこのファイル名にしてください)


4-2. 画像を配置する。

Xamarin Studioの下記に4-1.で準備した画像を置いてください。

/Applications/Xamarin\ Studio.app/Contents/Resources 


5.改造完了!(∩´∀`)∩ワーイ

これで、Xamarin Studioの改造は完了です!

Xamarin Studioを起動すると、4-2.で配置した画像がエディタの背景に表示されます。


おわりに

これで、Xamarin Studioがちょっと可愛く楽しくなるかなーと思います!

(∩´∀`)∩ワーイ (∩´∀`)∩ワーイ


おまけ(VS for Macについて)

ちなみに、Visual Studio for Macは、Xamarin Stuidoベースなので、

同じようにできるかなぁと思ったのですが、

パッケージの中に Mono.TextEditor.dll が見当たりませんでした(´・ω・`)