登録日: 2023-02-01 更新日: 2023-02-01
GitHub の機能である「GitHub Gists」について調べていたら、ブラウザ上で使える「Ace」コードエディタのことが出てきました。
おもしろそうなので、その「Ace」コードエディタの使い方にトライしました。
ブラウザ上で使えるので、色々な場面や、Chromebook とかタブレットなど、端末を選ばずに「テキストエディタ」として使えそうです。
また、クラウド上でシステム開発を行う「AWS Cloud9 IDE 」のエディタとしても使われているようなので、知っていて損はないと思います。
その備忘録です。
-
-
使用したPC は「ASUS Chromebox CN60 」で、プロセッサは第4世代の「Intel Celeron 2955U 」です。
「UEFI 立ち上げ」のPC です。
-
（注）リンクを戻るときはブラウザの左上の「←」をクリック
-
-
目次
-
今回の作業:
-
参考:
-
-
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - -
「Ace」コードエディタを起動:
-
ブラウザのブックマークに登録した「Ace Editor」を起動:
「Ace Editor」タブで開きました:
→色使いは、テーマを変更すれば変更できます。
-
日本語入力で、変換時の表示がくずれる現象が出ますが、日本語入力はちゃんとできました。
-
英語のエディタ（コードエディタ）なので、「全角の絵記号」でカーソルの動きが正常か確認:
記号の表示●●test
英語のエディタだと、全角文字に対応していないのはよくあることです。 絵記号の入力は出来ましたが、予想通り、絵記号以降でカーソルの動きが 2バイト（全角）でなく 1バイト（半角）になり、カーソル位置が文字位置とズレてしまいます。
ただし、表示が乱れないのは優秀です。 絵記号でおかしくなることをわかっていれば、絵記号の使用を避けたり、後で貼り付けるとかの回避策が取れます。
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - --
1. Web で使える「Ace」テキストエディタ:
-
「Ace」(Ajax.org Cloud9 Editor) は、JavaScript で書かれたコード エディタです。 アプリと言うよりも、コードエディタを組み込めるライブラリなので、Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。
-
カスタマイズも簡単で、お気に入りのテーマや、言語（html、JavaScript）の強調表示、キーバインド（Vim、Emacs）を追加できます。
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - ---
2. ネット上の CDN（Content Delivery Network）を使うやり方:
-
参考:
ブラウザ上で使えるJavaScript製テキストエディタAce入門
-
使うのに、インストールは必要ありません。
個別のアプリとして使うことも、サイトの html に組み込むこともできます。
-
CDN（content delivery network）とは、
ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。 サーバ（キャッシュサーバ）を分散して置くことで、サイトへの集中で反応が遅くなったり、応答不能になることを回避しています。
-
1). 作業フォルダの準備:
$ mkdir -p ~/apps
-
2). ネット上の CDN にあるソースを使う場合の、html ファイルを作成:
$ mousepad ~/apps/ace.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ace Editor</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--
ブラウザで使える JavaScript のテキストエディタです
-->
<div class="btn-group">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i> <span class="caret"></span></button>
<ul class="dropdown-menu" id="font-size">
<li><a href="#" data-size="14">小さい</a></li>
<li><a href="#" data-size="16">普通</a></li>
<li><a href="#" data-size="18">大きい</a></li>
</ul>
</div>
<button id="bold" class="btn btn-default"><i class="glyphicon glyphicon-bold"></i></button>
<button id="save" class="btn btn-default"><i class="glyphicon glyphicon-floppy-save"></i></button>
<button id="load" class="btn btn-default"><i class="glyphicon glyphicon-folder-open"></i></button>
</div>
<div id="editor" style="height: 600px"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
<script>
var editor = ace.edit("editor");
editor.$blockScrolling = Infinity;
editor.setTheme("ace/theme/monokai");
// editor.getSession().setMode("ace/mode/html");
editor.getSession().setMode("ace/mode/markdown");
$('#font-size').click(function(e) {
editor.setFontSize($(e.target).data('size'));
});
$('#bold').click(function(e) {
editor.insert('<strong>' + editor.getCopyText() + '</strong>');
});
$('#save').click(function(e) {
localStorage.text = editor.getValue();
alert("保存しました。");
});
$('#load').click(function(e) {
if (!confirm("読み込みますか？")) return;
editor.setValue(localStorage.text, -1);
});
</script>
</body>
</html>
-
3). ファイルマネージャを開きます:
「~/apps/ace.html」をダブルクリック →「ブラウザ」で「Ace Editor」タブが開きました:
→機能が拡張されています:
「虫めがね」アイコンで、文字サイズの変更（小さい / 普通 / 大きい）。
範囲指定してから、「B」のクリックで、太字の指定。
「2つのボタン」で、ローカルストレージ に内容を「保存」、それの「読込」が可能です。
-
4). ブックマークに登録:
-
5). 次回からは、「ブックマーク」から起動できます
-
参考:ファイルの保存に使われている「LocalStorage」(ローカルストレージ) について:
「LocalStorage」は、ブラウザ内に保存されます。
JavaScript で簡単に保存・取り出しが出来ますが、JavaScript でしか操作できません。
保存形式は文字列のみで、最大容量は「5MB」までです。
-
ちなみに、ブラウザのデバッグ画面で、保存された内容が確認できます:
Firefox ブラウザで「Ace」のタブを開きます。
空きで、右クリック→「調査」→「ストレージ」→左側で「ローカルストレージ」
→右側の「text」に登録された内容が表示されます。
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - ----
3. Ace のソースコードをダウンロードして使うやり方:
-
組み込みに便利な、ビルド済みファイルが置かれている GitHub:
-
1). ソースをダウンロード:
2022-05-12 公開:
-
2). 「~/ダウンロード/ace-builds-master.zip」を「~/apps/」に移動:
$ mkdir -p ~/apps $ mv ~/ダウンロード/ace-builds-master.zip ~/apps/
-
「~/apps/ace-builds-master.zip」を右クリック→「ここで展開」
「~/apps/ace-builds-master.zip」を削除
-
3). 作成された「~/apps/ace-builds-master/」フォルダを確認:
$ ls ~/apps/ace-builds-master/ CHANGELOG.md ace.d.ts src CODE_OF_CONDUCT.md bower.json src-min CONTRIBUTING.md css src-min-noconflict ChangeLog.txt demo src-noconflict LICENSE editor.html webpack-resolver.js README.md kitchen-sink.html ace-modules.d.ts package.json
-
4). 組み込みに便利な、ビルド済みファイルのフォルダが「4つ」ありました:
「~/apps/ace-builds-master/README.md」より抜粋:
(1). 「src 」は、連結されているが縮小されていません
(2). 「src-min」は、uglify.js で連結および縮小されています
(3). 「src-noconflict」は、require の代わりに ace.require を使用
(4). 「src-min-noconflict」は、uglify.js で連結および縮小されて、require の代わりに ace.require を使用
-
5).「最小限のデモ: editor.html」(~/apps/ace-builds-master/editor.html)
最小限の英語のバージョン:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<pre id="editor">function foo(items) {
var i;
for (i = 0; i < items.length; i++) {
alert("Ace Rocks " + items[i]);
}
}</pre>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html>
→使い方のサンプルです。
-
「~/apps/ace-builds-master/editor.html」をダブルクリックして起動してみる :
-
6).「kitchen-sink 」(~/apps/ace-builds-master/kitchen-sink.html)
→使える言語やテーマの確認ができます:
-
起動した画面:
-
7).「bookmarklet 」(~/apps/ace-builds-master/demo/bookmarklet/index.html)
→設定を変更しての「bookmarklet」を作成できます:
-
起動した画面:
-
8).「scrollable-page 」(~/apps/ace-builds-master/demo/scrollable-page.htmll)
→テーマの違いを確認できます。
-
起動した画面:
→下の「＋」でテーマ違いが表示
-
選択して、F11 を押下
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - -----
3-2. 個人的なエディタとして「html」ファイルを作成:
-
$ mousepad ~/apps/ace-builds-master/My-editor.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Editor-ja</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<!--
ブラウザで使える JavaScript のテキストエディタです
-->
<!-- 例題の表示 -->
<pre id="editor">
function foo(items) {
var i;
for (i = 0; i < items.length; i++) {
alert("Ace Rocks " + items[i]);
}
}
ace を Web ページに埋め込む簡単なやり方:
[editor.html](https://github.com/ajaxorg/ace-builds/blob/master/editor.html)
</pre>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/markdown");
editor.setFontSize(16);
</script>
</body>
</html>
→「My-editor.html」をダブルクリックすれば、「テキストエディタ」がブラウザで起動します:
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - ----- -
3-3. カスタマイズ時の項目:
-
(1). 言語の選択、どれか:
editor.session.setMode("ace/mode/markdown");
editor.session.setMode("ace/mode/javascript");
editor.session.setMode("ace/mode/html");
-
(2). テーマの選択:
editor.setTheme("ace/theme/monokai");
-
(3). フォントサイズの設定:
editor.setFontSize(14);
-
(4). ソフトタブを使うか（タブにスペースを使用）:
editor.session.setUseSoftTabs(true);
-
(5). 折り返し:
editor.getSession().setUseWrapMode(true);
-
(6). タブサイズの変更
editor.getSession().setTabSize(2);
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - ----- --
4. 参考: 「JavaScript」について:
-
「Ace」でも使われている、「JavaScript」について学んでみました:
-
参考:
JavaScriptの書き方、基本ルールをコードつきで徹底解説！
-
学習にオススメ:
→記事中に埋め込まれたエディター の入力欄、
もしくは、「項番 4. 5). (2). 」ブラウザの「コンソール」機能で、「JavaScript」の実行確認ができます。
-
「JavaScript」は、ブラウザ上で動くプログラミング言語です。ほとんどの Web サイトで使われています。
以前は、HTML と CSS だけの Web サイトが一般的でしたが、JavaScript によって見やすい表現を追加できるようになりました。JavaScript の基本の部分が標準化されたのち、jQuery をはじめとしたライブラリやフレームワークが続々と誕生し、より便利に活用できるようになりました。
-
1). JavaScript の利点:
ブラウザだけで動かせます
作ったプログラムがすぐに見られます
フロントサイドでも、サーバーサイドでも使えます
Windows でも、Mac でも動きます
下位互換性を保っての、機能の追加が行われます。
-
2). JavaScript で実現できること:
ポップアップウィンドウを表示できます
ブラウザ上で画像を「拡大表示」してWebページを見やすくできます
メッセージ送付やパスワード入力などのフォームの設置ができます
カーソルを合わせると表示されるメニューの設置ができます
スライダーの作成ができます
カウントダウン タイマーの設置ができます
最新のランキングを表示できます
内容の並べ替えができます
検索機能の作成ができます
ゲームの作成ができます
→JavaScript で多くの割合を占めているのが「フロントエンド」部分の設計・開発です。
安定した需要があるので、習得すると色々と有利です。
-
3). JavaScript の基本的なルール:
-
JavaScript では、大文字と小文字は明確に区別されます:
変数に名前を付ける時や、または既に定義されている予約語を使う場合には、大文字/小文字も正確に記述する必要があります。
-
JavaScript では、改行は自由に入れることが出来ます
改行が命令文の区切りを意味する場合や、字下げをブロックとして扱う、プログラミング言語もあります。
-
JavaScript では、文の区切り文字としてセミコロン「;」を使います
セミコロンは省略できますが、予期しないエラーの原因となるので、付けるのが無難です。
例外としてブロックで終わる文の末尾「}」には、セミコロンが不要です。
-
4). JavaScript には、2つの書き方（記述場所）があります:
-
書き方1: HTML ファイルに「JavaScript」を直接書くやり方:
-
(1). HTML のファイルの中に「script」タグで囲まれた部分を書くと、JavaScript のプログラムとして認識されます。
HTML ファイル:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript の説明</title>
</head>
<body>
<script>
JavaScript のプログラム部分 ←（ここに記述）
</script>
</body>
</html>
-
(2). Web ブラウザは HTML ファイルを上の行から下の行へと順番に処理して行きます:
HTML ファイルの読み込みの決まりは、DOM（Document Object Model）と呼ばれます
body タグではなく、head タグ内に script タグを記述するときは、HTML や JavaScript が読まれる順序やタイミングに注意が必要です。
-
書き方2: 外部に「JavaScript」ファイルを作成、HTML ファイルから読み込むやり方:
「JavaScript」プログラムだけを記述した外部ファイルが、「JavaScript」ファイル (.js) です。
「HTML」と「JavaScript」を分離することでコードが見やすくなり、開発効率が向上する、オススメのやり方です。
-
(1).「JavaScript」ファイルを準備:
「main.js」ファイルを作成:
const h1 = document.querySelector('h1');
console.log(h1);
この main.js ファイルは、HTML 内にある h1 要素を取得して開発者ツールの Console タブに出力するという内容です。 このファイルを index.html と同じディレクトリ（フォルダ）に置いておきます。
-
(2).「script」タグで、外部ファイルを読み込む:
一般的には、「script」タグの「src」を使って記述します。
<script src="main.js"></script>
「src」にファイル名を指定すれば、自動的にファイルの中の「JavaScript」が実行されます。
また、読み込む「JavaScript」ファイルが複数でも同じです。
<script src="main1.js"></script>
<script src="main2.js"></script>
<script src="main3.js"></script>
-
(3). 読み込まれる「JavaScript」ファイルは、「HTML」ファイルの上の行から下の行に順番に処理されて行くので注意:
例えば、「main2.js」の中で定義されている関数は「main1.js」では実行できないので、
「外部ファイル」を読み込む時は注意します。
-
5). 「JavaScript」プログラムを実行して確認する方法:
-
(1). html ファイルから実行するやり方:
通常の実行のしかたです。ダブルクリックすれば、ブラウザで新規「タブ」、または、ダイアログとして起動します。
-
(2). ブラウザの「コンソール」機能を使うやり方:
Firefox ブラウザの「REPL」（インタプリタみたいなコマンドラインの）機能を使います。
Ctrl+Shift+K
もしくは、
画面右上の「横3本線」アイコン（メニュー）→「その他のツール」→「ウェブ開発ツール」→「コンソール」タブを選択
-
コマンドラインのプロンプト「>>」が表示:
JavaScript のコードを 1行ごとに実行できます。
Shift + Enter で改行して、複数行の入力もできるので、確認しながらの実行ができます。
-
注意点は、REPL は終了するまで const キーワードなどで宣言した変数（初期値の定義）が残り続けます。1行ずつ実行しても、同じ変数名を定義したことになるため、構文エラー（SyntaxError）となります。
エラーは、ブラウザの左上の「リロード」ボタンをクリックすると、リセットされます。
-
使用例:
→実行結果の確認にも使えます。
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - ----- ---
4-2. 参考:「JavaScript」の書き方:
-
参考:
JavaScriptの書き方、基本ルールをコードつきで徹底解説！
-
1). html ファイルの作成:
$ mousepad ~/apps/ace2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript の実行</title>
</head>
<body>
<!-- 外部ファイルとして読込むときは、下記のファイルに記述 -->
<script src="file:///home/ubn/apps/main.js"></script>
<script>
// 直接記述するときは、ここに記述
</script>
</body>
</html>
-
2). 外部ファイルとして読み込む場合に作成:
JavaScript ファイルの作成:
$ mousepad ~/apps/main.js
<script> と </script> の行は削除して、その中のコードだけ記述してください。
-
3). 実行のしかた:
ファイルマネージャで、html ファイルの「~/apps/ace2.htm」をダブルクリックすれば、ブラウザで新規のタブが開きます。
-
使用している命令の違いで、表示のしかたが変わります。
-
「例 1). 」の場合: alert(' ');
ダイアログが表示:
-
「例 5). 」の場合: console.log( );
画面真っ白のはずです。
-
Ctrl+Shift+K
または、
画面の空きで、右クリック→「調査」→画面の下にデバッグ画面が表示
→「コンソール」タブ→「ログ」タブ
→実行結果が表示されます:
→画面右側を見ると、どのファイルのどの行の実行結果かがわかります。
-
デバッグ画面の右上の「x」で閉じます。
-
例 1). JavaScript で、「アラートダイアログ」を表示:
<script>
alert('Hello world!');
</script>
Web ブラウザで HTML を表示すると、
初期表示時に「Hello world!」というアラートダイアログが表示されます。
-
例 2). 1行だけ、コメントにしたい場合:
コメントにしたい場合は「//」を使います。
<script>
// alert('Hello world!');
</script>
-
例 3). 複数行コメントにしたい場合:
<script>
/*
alert('Hello! world1');
alert('Hello! world2');
*/
</script>
-
例 4). HTML のコメント構文を中で使った場合:
<script>
<!-- この行は、1行コメントです
console.log("この行は、コメントではなく、JavaScript として実行されるので注意");
--> この行は、1行コメントです
</script>
→HTML のコメントの機能とは違って、すべてがコメントにならないので注意。
HTML のコメントが不完全な形で使えるのは、下位互換性を保つために残されている機能みたい。
-
例 5). 数値と文字列を表示:
<script>
console.log(10 + 5); // 数値の計算 結果は 15
console.log(10 - 5); // 数値の計算 結果は 5
console.log(10 * 5); // 数値の計算 結果は 50
console.log(10 / 5); // 数値の計算 結果は 2
console.log(11 % 5); // 数値の計算 結果は 1 ※余りの計算
console.log("Hello + Wold!"); // 文字列の処理 結果は Hello! + Wold!
console.log("Hello" + "Wold!"); //文字列の処理 結果は Hello!Wold!
</script>
-
例 6). 変数の与え方:
<script>
var pet = ”チワワ”;
var count = 10;
</script>
-
例 7). 条件分岐の、if 文:
<script>
var pet = "チワワ";
if(pet == "チワワ"){
alert("ペットは、チワワ！");
} else {
alert("ペットはチワワではない！");
}
</script>
-
例 8). 条件が多い場合の、Switch 文:
<script>
var pet = "チワワ";
switch( pet ) {
case '柴犬':
alert('ペットは、柴犬！');
break;
case 'チワワ':
alert('ペットは、チワワ！');
break;
case 'マルチーズ':
alert('ペットは、マルチーズ！');
break;
case 'ダックスフンド':
alert('ペットは、ダックスフンド！');
break;
}
</script>
-
例 9). 繰り返し処理、for 文:
変数 count が 0 からスタートし、条件式「count < 10」を満たす間、繰り返し処理を行います:
<script>
for (let count = 0; count < 10; count++) {
console.log((count + 1) + "回目の処理");
}
</script>
-
例 10). 繰り返し処理、while 文:
while 文は条件式を満たす間、繰り返し処理を行います:
<script>
let count = 0;
while (count < 10) {
console.log((count + 1) + "回目の処理");
count++;
}
</script>
-
例 11). 繰り返し処理、for...of 文:
for...of 文を使うと、配列などの要素数だけ繰り返し処理を行います:
<script>
const array = ['Wold1', 'Wold2', 'Wold3'];
for (let i of array) {
console.log(i);
}
</script>
-
例 12). 関数を作れば、複数個所で利用できます:
<script>
// 関数 hello を定義
function hello() {
alert("Hello Wold!");
}
// 関数 hello を呼び出し
hello();
</script>
-
例 13). 引数の使い方:
引数は関数に入力する値です。入力された引数に従った処理を実行します。
<script>
// 関数helloを定義（引数nameを設定）
function hello(name) {
console.log("Hello!" + name);
}
// 引数に「ichiro」を指定して関数 hello を実行
hello('ichiro');
// 引数に「jiro」を指定して関数 hello を実行
hello('jiro');
// 引数に「saburo」を指定して関数 hello を実行
hello('saburo');
</script>
-
例 14). 戻り値・返り値の使い方:
関数を呼び出した側は、関数が処理した結果を受け取ることができます。
<script>
// 関数 hello を定義
function hello(name) {
return "Hello!" + name;
}
// 関数 hello の戻り値を受け取り
message = hello('ichiro');
// コンソールに変数 message の値を表示
console.log(message);
</script>
-
例 15). ライブラリを読み込む:
ライブラリとは、よく使うプログラムをまとめたファイルのことです。
具体的には、あらかじめ便利なメソッド群や API を提供するプログラムを作成したものです。
ライブラリを使えば複雑なプログラムをより効率よく記述できます。
-
JavaScript は、利用できるライブラリが豊富です。
ライブラリとして有名なのは「jQuery」です。
-
JavaScript ライブラリの「jQuery」を読み込み:
HTML ファイル:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript の説明</title>
<script src="jquery.js"></script> ←（ライブラリを読込み）
</head>
<body>
</body>
</html>
-
(1). ローカルに置かれた、JavaScript ライブラリを読み込むやり方:
<script src="jquery.js"></script>
→HTML ファイルと「jquery.js」ファイルが同じフォルダにある場合です。
-
(2). ローカルに置かれた、JavaScript ライブラリを読み込むやり方2:
<script src="file:///home/ubn/apps/lib/jquery.js"></script>
→HTML ファイルと「jquery.js」ファイルが違うフォルダにある場合です。「ubn」はユーザ名。
-
(3). CDN経由のURLを記述して、JavaScript ライブラリを読み込むやり方:
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
-
-
- --- - --- - --- - --- - --- - --- - --- - --- - ----- ----
5. 参考:「ブックマークレット」について:
-
JavaScript の使い方のひとつです。
-
参考:
【必見】ブックマークレットの使い方・作り方と便利なおすすめ13選を解説
-
「ブックマークレット」は、JavaScript で作られたプログラム（1行）を Web ブラウザのブックマークのURLとして登録して、便利に使えるようにしたアプリです。
ブックマークのクリックで、 Web ページの見た目を変えたり、選択したテキストをキーワード検索したり、ページ翻訳したりなど、さまざまな機能を簡単に実行できます。
-
ブックマークレットの利点:
クリックで JavaScript を実行できます
どのWeb ブラウザでも動作します
ブックマークとして管理できます
-
ブックマークレットの難点:
簡単に使えることを利用して、悪いことをする人が存在します
セキュリティの穴（個人情報の漏洩、マルウェア感染）になるリスクが高いです
余分なスペースが削除されているので、改版されてもわかりづらいです
ブラウザによっては拒否されて実行できません
-
1). 「ブックマークレット」作成のやり方:
-
(1). JavaScript のソースコードを記述:
コードやブックマークレットの参考となるサイト:
-
→ブックマークレットに登録するには、JavaScript のソースコードを「1行で記述」し、長さをURL の制限におさめる必要があります。
-
(2). 変換前に、ソースコードに「コメント」がある場合は削除します:
-
(3). 「Online JavaScript beautiflier」などを使用してソースコードを整形、見やすくしたり、変換しやすくします:
-
(4). 「変換ツール」で、JavaScript をブックマークレットに変換:
手動で変換しても OK
-
変換ツール:
「bookmarklet maker」
「Closure Compiler」
-
(5). ブラウザに 仮のブックマークを新規登録:
ちなみに、 キーボードの「Ctrl」+「Shift」+「B」キーを押すことで、「ブックマークバー」を表示できます。
-
(6). ブックマークを編集:
「ブックマークレット」を3回クリックシて選択。コピーします。
既存の URL を消してから、「ブックマークレット」を貼付けます。
-
2). 手動で「ブックマークレット」を作成してみる:
参考:
-
「ブックマークレット」の書式:
javascript:(実際の処理);
-
例題 1:
「Hello World」をダイアログで表示:
javascript:
var d=window.open().document;
d.writeln('<textarea rows=1 cols=40>'+'世界の皆さん、こんにちは'+'</textarea>');
↓ 必要なスペースは「%20」に変換、余計なスペースや改行を削除:
javascript:var%20d=window.open().document;d.writeln('<textarea%20rows=1%20cols=40>'+'世界のみなさん、こんにちは'+'</textarea>');
3回クリックして、コピー、ブックマークのURL に貼付け
-
例題 2:
選択したテキストをダイアログで表示:
javascript:var%20d=document; var%20tx=d.selection?d.selection.createRange().text:d.getSelection(); alert(tx);
↓ 必要なスペースは「%20」に変換済みなので、余計なスペースや改行を削除:
javascript:var%20d=document;var%20tx=d.selection?d.selection.createRange().text:d.getSelection();alert(tx);
3回クリックして、コピー、ブックマークのURL に貼付け
-
例題 3:
現在表示しているページへの Markdown リンクを作成:
javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');
d.close()};
o('-['+document.title+']('+location.href+')');})();
↓ 必要なスペースは「%20」に変換済みなので、余計なスペースや改行を削除:
javascript:(function(){function%20o(s){var%20d=window.open().document;d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');d.close()};o('-['+document.title+']('+location.href+')');})();
3回クリックして、コピー、ブックマークのURL に貼付け
-
ブラウザに現在表示のタブで、「ブックマーク」をクリック:
-[ブックマークレット／Bookmarkletの作り方 - catch.jp-wiki](https://www.catch.jp/wiki/?Bookmarklet%A4%CE%BA%EE%A4%EA%CA%FD)
→表示されました。
-
-
--- - --- - --- - --- - --- - --- - --- - --- - --- - ----- ----
5-2. 「Ace」の「ブックマークレット」を使ってみました:
-
「Ace」のソースに「ブックマークレット」があったので使ってみました:
トライしただけなので、作業は要りません。
-
参考:
-
「項番 3.」で「Ace」のソースをダウンロードしていた場合は、
「~/apps/ace-builds-master/demo/bookmarklet/index.html」をダブルクリックすれば、
「bookmarklet」がブラウザで起動されます:
→左上は、表示の変化がわかるようにプログラムの例題が表示。その上に黒い設定画面が重なっています。
右下の三角で表示、非表示を変更できます。
-
1). 「Ace Bookmarklet」の使い方:
(1). 設定画面で、設定を変えてみます
(2). 左下の「Ace Bookmarklet Link」をクリックして、右クリック →コピー
(3). もしくは、右の入力欄をクリアしてから、「Ace Bookmarklet Link」をマウスでつかんで、そこにドロップします。
(4). 貼り付けた結果:
javascript:(function inject(options, callback) { var load = function(path, callback) { var head = document.getElementsByTagName('head')[0]; var s = document.createElement('script'); s.src = options.baseUrl + "/" + path; head.appendChild(s); s.onload = s.onreadystatechange = function(_, isAbort) { if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") { s = s.onload = s.onreadystatechange = null; if (!isAbort) callback(); } }; }; var pending = []; var transform = function(el) { pending.push(el) }; load("ace.js", function() { ace.config.loadModule("ace/ext/textarea", function(m) { transform = function(el) { if (!el.ace) el.ace = m.transformTextarea(el, options.ace); }; pending = pending.forEach(transform); callback && setTimeout(callback); }); }); if (options.target) return transform(options.target); window.addEventListener("click", function(e) { if (e.detail == 3 && e.target.localName == "textarea") transform(e.target); });})({"selectionStyle":"line","highlightActiveLine":true,"highlightSelectedWord":true,"readOnly":false,"copyWithEmptySelection":false,"cursorStyle":"ace","mergeUndoDeltas":true,"behavioursEnabled":true,"wrapBehavioursEnabled":true,"enableAutoIndent":true,"keyboardHandler":null,"showLineNumbers":true,"customScrollbar":false,"hScrollBarAlwaysVisible":false,"vScrollBarAlwaysVisible":false,"highlightGutterLine":true,"animatedScroll":false,"showInvisibles":false,"showPrintMargin":false,"printMarginColumn":80,"printMargin":false,"fadeFoldWidgets":false,"showFoldWidgets":true,"displayIndentGuides":true,"highlightIndentGuides":true,"showGutter":false,"fontSize":"14px","scrollPastEnd":0,"theme":"monokai","maxPixelHeight":0,"useTextareaForIME":true,"scrollSpeed":2,"dragDelay":0,"dragEnabled":true,"focusTimeout":0,"tooltipFollowsMouse":true,"firstLineNumber":1,"overwrite":false,"newLineMode":"auto","useWorker":true,"useSoftTabs":true,"navigateWithinSoftTabs":false,"tabSize":4,"wrap":"off","indentedSoftWrap":true,"foldStyle":"markbegin","mode":"javascript","enableMultiselect":true,"enableBlockSelect":true,"baseUrl":"https://ajaxorg.github.io/ace-builds/src-noconflict"})
→1行なので、3回クリック（トリプルクリック）するとすべてが選択されます。
(5). それをコピーしておきます。
(6). ブラウザで適当なサイトを開き、新規にブックマークを登録
(7). ブックマークを右クリック→「ブックマークを編集]
(8). URL の部分を消してから、Ctrl + V で、先ほどコピーした「ブックマークレット」を貼付け
(9). 「ブックマーク」をクリックすると、（実行を拒否されなければ）実行されます。
-
2). 「ブックマーク」をクリックして実行:
何も起きないので、ブラウザのコンソール画面（Ctrl+Shift+K）にて確認:
→こちらの、Firefox ブラウザでは、「Ace」の「ブックマークレット」の実行は「ブロック」されました。
ブラウザの設定によっては、動く環境の人がいるかもしれません。
-
3). 参考: サイト脆弱性について:
XSS（クロスサイトスクリプティング ）とは:
-
ある HTML に悪質なスクリプトを埋め込む攻撃です。 サイトに設置された入力フォームにユーザが情報を入力・送信する際に、埋められた悪質なHTML スクリプトが実行され、入力された情報に加え Cookie 情報なども攻撃者に送られたする、個人情報の流出とか、マルウェア感染などの被害に遭う恐れがあります。HTML に埋め込む形式の JavaScript が利用されます。
-
CSP（Content Security Policy）は、ブラウザ上でのコンテンツ読み込みを制限して、XSS（クロスサイトスクリプティング攻撃）等のリスクを軽減する仕組みです。
XSS の攻撃を軽減するだけでなく、クリックジャッキング など他の形式の攻撃も軽減できるようになっています。
-
4). 参考: 作成されたスクリプトを見やすいように整形:
実際には、こちらの作業は要りません。
-
「JavaScript / CSS 整形 」ツールを使用:
→貼り付けて、「整形」ボタンを押すだけ。下側に結果が表示されました:
javascript: (function inject(options, callback) {
var load = function(path, callback) {
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('script');
s.src = options.baseUrl + "/" + path;
head.appendChild(s);
s.onload = s.onreadystatechange = function(_, isAbort) {
if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
s = s.onload = s.onreadystatechange = null;
if (!isAbort) callback();
}
};
};
var pending = [];
var transform = function(el) {
pending.push(el)
};
load("ace.js", function() {
ace.config.loadModule("ace/ext/textarea", function(m) {
transform = function(el) {
if (!el.ace) el.ace = m.transformTextarea(el, options.ace);
};
pending = pending.forEach(transform);
callback && setTimeout(callback);
});
});
if (options.target) return transform(options.target);
window.addEventListener("click", function(e) {
if (e.detail == 3 && e.target.localName == "textarea") transform(e.target);
});
})({
"selectionStyle": "line",
"highlightActiveLine": true,
"highlightSelectedWord": true,
"readOnly": false,
"copyWithEmptySelection": false,
"cursorStyle": "ace",
"mergeUndoDeltas": true,
"behavioursEnabled": true,
"wrapBehavioursEnabled": true,
"enableAutoIndent": true,
"keyboardHandler": null,
"showLineNumbers": true,
"customScrollbar": false,
"hScrollBarAlwaysVisible": false,
"vScrollBarAlwaysVisible": false,
"highlightGutterLine": true,
"animatedScroll": false,
"showInvisibles": false,
"showPrintMargin": false,
"printMarginColumn": 80,
"printMargin": false,
"fadeFoldWidgets": false,
"showFoldWidgets": true,
"displayIndentGuides": true,
"highlightIndentGuides": true,
"showGutter": false,
"fontSize": "14px",
"scrollPastEnd": 0,
"theme": "monokai",
"maxPixelHeight": 0,
"useTextareaForIME": true,
"scrollSpeed": 2,
"dragDelay": 0,
"dragEnabled": true,
"focusTimeout": 0,
"tooltipFollowsMouse": true,
"firstLineNumber": 1,
"overwrite": false,
"newLineMode": "auto",
"useWorker": true,
"useSoftTabs": true,
"navigateWithinSoftTabs": false,
"tabSize": 4,
"wrap": "off",
"indentedSoftWrap": true,
"foldStyle": "markbegin",
"mode": "html",
"enableMultiselect": true,
"enableBlockSelect": true,
"baseUrl": "https://ajaxorg.github.io/ace-builds/src-noconflict" ←（注目）
})
→（注目）部分がチェックに引っかかったようです。ローカルを指定しても同じでした。
-
5). 便利だけどリスクが高いので、「Ace」の「ブックマークレット」の使用は断念:
ガードを下げれば実行できそうだけど、 悪意を持って、URL の文字列を少しだけ変えただけだと、ベタの「ブックマークレット」だと見逃すと思います。 設定は触らない方が安全です。
「Ace」は、「ブックマークレット」として動かすのでなく、html として動かす方が良さそう。
-
-
まとめ
Web ブラウザで使う「Ace」コードエディタを使ってみました。
それに伴い、「JavaScript」や「ブックマーケット」についても基本の部分を学びました。
-
Linux をコンテナで実行する機能のない、昔の世代の Chromebook を持っているのなら、ChromeOS の延命に使えそうです。
ただし、（手持ちのマシンは、ChromeOS を消して、Linux マシンにしてしまったので、）ChromeOS で「Ace」が使えるかは未確認。ローカルのストレージで起動できるかと、セキュリティ面のガードが堅いのでどうかな。 結局は、Linux マシン化しないと使えないかも。
-
それと、「JavaScript」の使用は便利な反面、セキュリティでのリスクが高いので、注意が必要です。
-
-
-
-
-
目次
-
-
- 目次
- - --- - --- - --- - --- - --- - --- - --- - --- - -
- 「Ace」コードエディタを起動:
- - --- - --- - --- - --- - --- - --- - --- - --- - --
- 1. Web で使える「Ace」テキストエディタ:
- - --- - --- - --- - --- - --- - --- - --- - --- - ---
- 2. ネット上の CDN（Content Delivery Network）を使うやり方:
- - --- - --- - --- - --- - --- - --- - --- - --- - ----
- 3. Ace のソースコードをダウンロードして使うやり方:
- 1). ソースをダウンロード:
- 2). 「~/ダウンロード/ace-builds-master.zip」を「~/apps/」に移動:
- 3). 作成された「~/apps/ace-builds-master/」フォルダを確認:
- 4). 組み込みに便利な、ビルド済みファイルのフォルダが「4つ」ありました:
- 5).「最小限のデモ: editor.html」(~/apps/ace-builds-master/editor.html)
- 6).「kitchen-sink 」(~/apps/ace-builds-master/kitchen-sink.html)
- 7).「bookmarklet 」(~/apps/ace-builds-master/demo/bookmarklet/index.html)
- 8).「scrollable-page 」(~/apps/ace-builds-master/demo/scrollable-page.htmll)
- - --- - --- - --- - --- - --- - --- - --- - --- - -----
- 3-2. 個人的なエディタとして「html」ファイルを作成:
- - --- - --- - --- - --- - --- - --- - --- - --- - ----- -
- 3-3. カスタマイズ時の項目:
- - --- - --- - --- - --- - --- - --- - --- - --- - ----- --
- 4. 参考: 「JavaScript」について:
- - --- - --- - --- - --- - --- - --- - --- - --- - ----- ---
- 4-2. 参考:「JavaScript」の書き方:
- 1). html ファイルの作成:
- 2). 外部ファイルとして読み込む場合に作成:
- 3). 実行のしかた:
- 例 1). JavaScript で、「アラートダイアログ」を表示:
- 例 2). 1行だけ、コメントにしたい場合:
- 例 3). 複数行コメントにしたい場合:
- 例 4). HTML のコメント構文を中で使った場合:
- 例 5). 数値と文字列を表示:
- 例 6). 変数の与え方:
- 例 7). 条件分岐の、if 文:
- 例 8). 条件が多い場合の、Switch 文:
- 例 9). 繰り返し処理、for 文:
- 例 10). 繰り返し処理、while 文:
- 例 11). 繰り返し処理、for...of 文:
- 例 12). 関数を作れば、複数個所で利用できます:
- 例 13). 引数の使い方:
- 例 14). 戻り値・返り値の使い方:
- 例 15). ライブラリを読み込む:
- - --- - --- - --- - --- - --- - --- - --- - --- - ----- ----
- 5. 参考:「ブックマークレット」について:
- --- - --- - --- - --- - --- - --- - --- - --- - --- - ----- ----
- 5-2. 「Ace」の「ブックマークレット」を使ってみました:
- まとめ
- -
-
-
-
