簡易エディタに無理矢理背景画像を入れてみた。

０．初めに

この記事はプロ生ちゃん Advent Calendar 2017の16日目の記事になります。

※今年は参加賞ないんですね…(^_^;)

他の皆さんの記事と比べるとかなりしょぼい内容ですが温かい目でみていただけるとうれしいです。

私はAndroidで動くBASICインタープリタ「BASIC!」の愛用者で普段はBASICばかり触っています。（JSは万年初心者です）

正直、今年は何も作ってないのであまりネタがないのですが無理矢理書きます。

１．Python用の自己満足簡易エディタを作りました

最近、有名なJS製エディタ「Ace」を使ってPython用の簡易エディタを作りました。HTMLファイル一つのみのエディタです。動作確認はOS：windows7、ブラウザ：chrome63でしています。

作った理由は、たまーにPythonを勉強したりするのですが安い低スペック低容量PCでプログラムを書くのでIDEなどはそもそも動作しませんし、できるだけ軽いエディタを使いたかったからです。

まぁ私みたいにやる気がない人用です。普通のPCで真面目に勉強する方はIDEやVisual Studio Code等がいいのだと思います。

作ったといってもファイルを選択ボタンとダウンロードボタンを付けてAceのオプションで入力補完（autocomplete)とシンタクスハイライトを有効にしただけです。

Ace1

たった一つのHTMLファイルで私レベルでも４５分程度で作れましたし、ブラウザのローカル実行でもちゃんと動きます（Aceすごい！）。ソースはしょぼいですがGistに貼りました。

ファイルを選択ボタンとダウンロードボタンでファイル読込/保存を行いますが以下の記事を参考に作りました。

ファイル選択/ダウンロード時にエディタの編集用エリアの内容を変更/取得しますがAceのページにsetValue、getValueの説明がありました。

あとはソースの表示の文字サイズも以下の記事を参考に調整しただけです。

こんなに簡単にできるのかとちょっとびっくりしました。

２．自己満足簡易エディタにプロ生ちゃんの背景画像を付けました

ここまでの内容だと全くプロ生ちゃんに関係ないので簡易エディタを改造して無理矢理背景画像を入れることを考え付きました。よくエディタの画面で見かけるアレです。

Ace2

画像の通りエディターの背景に少し薄めのプロ生ちゃん画像が表示されています。毎回同じだとつまらないので起動時のみランダムに画像を取得するようにしました。5分毎とかも試しましたがちょっと問題ありであきらめました。

大したことはしていませんが、Aceエディタの既存のclassを探してCSS、JSで背景画像を設定したのでこちらの方が試行錯誤が多く3時間近くかかりました。これもソースはしょぼいですがGistに貼りました。

背景の画像は当然プロ生ちゃんなので以下を使わせていただきました。

「透過背景は作れません」との事だったので背景色をエディタの色と合わせています。あと画像についてはどうもキャッシュが残る傾向があるので以下の記事を参考にURL中の画像サイズを310～330pxの間で乱数で変更して無理矢理キャッシュ対策しました。

面倒だったのでここでjQueryを使っています。

最後にCSSですが、Aceの既存class ace_scrollerに背景画像（background-imageなど）の情報、Aceの既存class ace_marker-layerに画像の半透明化の情報を追加しました。以下の記事に「背景色は半透明にするものの、文字色は不透明にしたいなら、rgba表記」の説明があったのでそこを参考にしました。

３．終わりに

そもそも内容が強引すぎますが一応動きます。Aceは110以上のプログラム言語をサポートしているらしいので他の言語でも簡易エディタが作れるかも。

以 上

END

Close