パンフレット

ダウンロード方法

リンク

エディターは Chrome ブラウザ、タブレット、または携帯電話でのみ動作します。ただし、最初にエディタを削除するエクスポートされたゲームには制限がありません。

ライブ
ダウンロード
- bacione.html をダウンロード
- ファイルマネージャーを開きます
- bacione.html をクリックして Chrome ブラウザで実行します
- 「実行」をクリックしてスキーゲームをプレイします
Games.pdf - Ski と Marslander のチュートリアル
YouTube - 製品デモ
Reddit - レディットのディスカッション
Github - github ディスカッション

バシオーネ？

Bacione は「Keep It Satisfyingly Simple」のように「大きなキス」を意味します。

目的

オフラインの電話で小さな JavaScript ゲームをプログラミングする

ミッション

クラス内で最も親指に優しい IDE を作成する

デザイン

このエディタの設計目標は、コンピュータを持っていない人、または単純に携帯電話やタブレットで小さな JavaScript ゲームをプログラミングしたい人に快適な体験を提供することです。対処する追加の制約としては、オフラインであることと、外部キーボードがないこと (親指またはスタイラスで画面に入力すること) があります。このユースケースに適合するエディターやキーボードアプリは数多くありますが、それらはすべて最適とは言えません。 2 つの主な問題は、1) 特殊文字へのアクセスと 2) リファクタリングのクリック数を減らすことです。 #1 を解決するには、追加キー機能をサポートするか、キーボードアプリをインストールする必要があります。 #2 を解決するには、リファクタリングに必要なクリック数を減らす必要があります。これら 2 つの問題を解決すると、画面の大部分が占有され、コード領域のためのスペースがほとんどなくなります。これに対処するために、エディターには組み込みのキーボードと効率的なリファクタリングツールが含まれています。

特徴

他の電話エディタと比較してクリック数が少なくなります。
共通キーはワンクリックです。
コンテキスト認識ロジックによりクリック数が減少します。
コードをリファクタリングする作業が軽減されます。
完全にプログラム可能なキーボード。
独自のキーボードアイコンと機能を作成します。
携帯電話やタブレット向けに設計されています。
セットアップは必要ありません。
1つのファイル。
簡単に共有できます。
オフライン。
プレーンなバニラの JavaScript。
依存関係はありません。
無料（GPLライセンス）
広告なし
Chrome ブラウザの Android ファイルマネージャーから実行します。
編集が簡単なエディター。
エディターでエディターを編集します。
エディターはわずか 7 キロバイトです。
スワイプと長押しリピートをサポートします。

制限事項

ポートレートモードのサポート: このエディタはポートレートモードのみをサポートします。
互換性: エディターはタブレットまたは携帯電話の Chrome ブラウザでのみ動作します。ただし、エクスポートされたゲームにはエディターが削除されるため、そのような制限はありません。
マルチファイル:エディターは大規模なゲームやマルチファイルプロジェクト向けに設計されていません。これは、Android のファイルマネージャーから Chrome ブラウザーで HTML ファイルを開く場合、複数のファイルがサポートされていないためです。すべてが 1 つのモノリシック HTML ファイル内に含まれている必要があります。これは、外部の画像や音声ファイルを使用できないことも意味します。代わりに、プログラムで作成された要素を利用できます。たとえば、Marslander ゲームではベクターグラフィックスとノイズジェネレーターが使用されており、他のいくつかのゲームでは絵文字が使用されています。

このエディターがニーズをサポートしていない場合は、Neovim と Termux および Apache を試してみることを検討してください。これらのツールの構成はここで見つけることができます。

問題

カーソルの位置のずれ: エディタウィンドウでファイルの最後を強く上にスワイプすると、カーソルがテキストと位置がずれることがあります。推奨される回避策は、最後から少し後退することです。

注意事項

以下の変更に関する参照は、ひし形の記号で表される「その他」ボタンにある「エディターの編集」機能を指します。

Edit-the-Editor : エディタはエディタ内で編集できます。ただし、これはライブではないため、「保存」をクリックして、新しく作成されたタイムスタンプ付きの HTML ファイルを開く必要があります。新しいものが壊れている場合は、以前のものを開けてください。この機能は、単純な変更をサポートするためのものです。複雑な変更は、Neovim などのより堅牢な環境で実行する必要があります。
実行: 実行ボタンは、カーソルを含むゲームを実行または停止します。わかりやすくするために、ゲームフレームは正方形でキーボードの上に表示されます。これにより、編集と実行を簡単に切り替えることができます (往復 2 回のクリック)。これが制限のようで、より大きなゲームフレームが必要な場合は、ライブラリ内のエディタまたはキャンバスサイズ変更コードを変更するか、ライブラリを使用しないこともできます。また、[ゲームのエクスポート] ボタンを使用して、エディタービューにあるものをエクスポートすることもできます。また、exportgame() 関数の動作を変更することもできます。エクスポートを使用する場合の欠点は、その HTML ファイルを Android ファイルマネージャーから実行する必要があることです (往復 7 回クリック)。
キーボードサイズ: キーボードのサイズは、正方形のゲームフレームを考慮した後の残りの領域です。これは、携帯電話ではキーボードの幅が画面の幅とほぼ同じであり、タブレットでは画面の幅の約半分であることを意味します。
キーボードの位置: タブレットでは、キーボードは右下隅にあります。右手の親指の代わりに左手の親指を使用して入力する場合は、変更できます。
カスタムキーボード機能: このエディターは、すべての主要な機能にワンクリックでアクセスできるカスタムキーボードを備えているため、特に便利です。これをサポートするために、プログラミングにとって重要な 32 個の特殊文字のうち 22 個には 1 クリックでアクセスでき、残りの 10 個には Shift キーを使用してアクセスできます。スペースキーが異常に小さく、右下隅にあることに注意してください。さらに、バックスペースキーとリターンキーは他のキーと連携することが多いため、2 行目にあります。たとえば、テキストを切り取るにはコピーを押してからバックスペースキーを押し、選択を解除するにはリターンキーを押します。このレイアウトが気に入らない場合は、変更できます。
選択: このエディタの主な利点は、効率的な選択です。選択はコンテキストに基づいて行われます。カーソルの位置に応じて、単語、行、段落、またはコードのブロックが選択されます。選択がどのように機能するかを確認するには、YouTube ビデオをご覧ください。選択は [コピー] ボタンで実行されます。つまり、2 つの処理が同時に行われます。これは主にボタンの数を減らすためです。切り取りは 2 つの手順で行われます。[コピー] (選択してコピー) をクリックし、次に [Backspace] (選択範囲を削除) をクリックします。コピー後に Enter ボタンをクリックすると、カーソルが選択範囲の末尾に移動します。切り取り (コピー/バックスペース) に行が含まれている場合、カーソルは 1 行進みます。これは、多くの場合、ユーザーが行を切り取るときに次の行の後に貼り付けることが意図されているためです。これは、コードをリファクタリングする際のクリック数を減らすのに役立ちます。選択 (コピー) はナビゲーションにも使用できます。たとえば、カーソルをブロックの末尾に移動し、開始ブロック文字の前にカーソルを置き、[コピー] をクリックし、[Enter] をクリックします。ただし、貼り付けバッファーに使用する予定のものがある場合は、これを行わないでください。「コピー」を複数回クリックすると、選択ルールに従って選択範囲が拡張され、矢印キーを使用すると、一度に 1 文字ずつ選択範囲が拡張 (または拡張解除) されます。
コピーと貼り付け: エディター内でコードをコピーして貼り付けるには、エディターの内部コピーアンドペーストボタンを使用する必要があります。外部ソースからコードをコピーするには、長押しして [コピーアンドペースト] を選択するなど、システムのコピーアンドペースト手法を使用します。
書式設定: 携帯電話では、エディターのスペースが非常に重要なので、多くの空白スペース、特に水平方向の空白スペースを確保する余裕はありません。インデントにはスペースキーを使用できます (Tab キーはありません)。Enter キーを押すと前のインデントが保持されます。インデントは分岐とループにのみ使用し、関数本体をインデントする代わりに、前後に垂直方向の空白を使用するようにしてください。例については、Marslander ゲームを参照してください。
コメントボタン: コメントボタンはデバッグに非常に便利です。「コメント」ボタンを押すと、コードがコメント化され、コピーが貼り付けバッファーに配置されます。次のステップでは、それを貼り付けて編集します。新しいコードの結果が気に入らない場合は、それを削除して元のコードのコメントを外すのは簡単です。
ナビゲーション: ナビゲーションは主に画面にタッチすることによって行われるため、ホーム、エンド、または垂直方向の矢印キーはありません。代わりに、おおよその位置をタッチした後にカーソルを正確に配置できるように、左右の矢印が表示されます。テキストサイズを拡大するズームキーも、カーソルを正しい場所に配置するのに役立ちます。
推奨サイズ: 携帯電話でコードをナビゲートするのは非常に難しいため、1 回のジェスチャーでスクロールできる十分な大きさのゲームを作成することをお勧めします。
全画面: 全画面モードをアクティブにすると、コードの操作や編集のためのスペースがさらに広がります。ズームボタンを上にスワイプすると、全画面表示に切り替えることができます。
ビューを閉じる: 閉じるボタンはありません。ビューを閉じるには、任意の場所をクリックするか、オプションを選択します。ビューは次のとおりです: ヘルプ、その他、差分、およびエラー。
絵文字の生成: 初めて「その他」ビューを開いたとき、アイコンが読み込まれるまで少し時間がかかります。
ピッカー: Color-Picker と Icon-Picker は Paste にコードを挿入するため、何も起こっていないように見えても心配しないでください。 [貼り付け] ボタンをクリックしてコードを表示します。
エラー検出: このエディタには、(入力時の) リアルタイムのエラー検出はありません。「実行」をクリックするとエラーが発見されます。エラーメッセージが表示され、(ビュー上の任意の場所をクリックして) エラーが閉じられると、エラーが発生したコード内にカーソルが自動的に配置されます。一致するペアを必要とする括弧やその他のブロック文字を単に忘れただけである場合、エラーメッセージが明確にならないことがあります。これを支援するために、付属プロセスはすべてのブロック文字を単純にカウントしてカウントが均等であることを確認し、エラービューに追加のメッセージを表示します。
Diff 関数: Diff 関数は単純なので、正確な結果は生成されません。これは、ファイルが開かれたとき、または最後に保存されてからの進行状況のおおよその指標のみを提供するように設計されています。
保存メカニズム:エディターの保存機能は HTML の制約によって制限されます。回避策として、保存するたびに新しいタイムスタンプ付きファイルが生成されます。ダウンロードフォルダーに保存する場合は、他の目的でファイルを保存しないようにすることが重要です。これにより、作業をすぐに再度開くことが困難になる可能性があります。また、古いエディター HTML ファイルを定期的に削除し、最新バージョンのみを保持します。
テーマ: エディターは、カスタマイズ可能な表示エクスペリエンスのために明るいテーマと暗いテーマの両方を提供します。「その他」ボタンを上にスワイプすると、テーマを切り替えることができます。変更または追加することもできます。