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

  • 5
    いいね
  • 0
    コメント

はじめに

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

今回は、Xamarin Stuidioを可愛くしよう!ということで、
エディタ部分の背景に画像を入れてみたいと思います。

これで、こころがぴょんぴょんするXamarin Studioや、
世界一可愛いXamarin Studioも作れちゃいます。

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

プロ生ちゃんバージョン

プロ生ちゃん

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

サンタさん

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

Puronama.gif

やってみること

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;

sing ディレクティブ

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行目ぐらい)
    ScrollToメソッドの下から2行目

     

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

     

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

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

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.で配置した画像がエディタの背景に表示されます。
プロ生白.png

おわりに

これで、Xamarin Studioがちょっと可愛く楽しくなるかなーと思います!
(∩´∀`)∩ワーイ (∩´∀`)∩ワーイ

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

ちなみに、Visual Studio for Macは、Xamarin Stuidoベースなので、
同じようにできるかなぁと思ったのですが、
パッケージの中に Mono.TextEditor.dll が見当たりませんでした(´・ω・`)

この投稿は Xamarin Advent Calendar 201611日目の記事です。