jThird Editorの使い方

jThirdは作品の引用とWeb3Dでの投稿が可能なプラットフォームです。

「作ったWeb3D作品を投稿するプラットフォームが欲しい」という声から生まれたのがWeb3D投稿・視聴サービス『jThird』です。
全ての機能を無料で使うことが出来ます。

この記事では登録が完了したユーザーのために専用開発ツールであるjThird Editorの使い方を解説します。

開発に必要な環境

IE以外のWebGL対応PCブラウザを使ってください。
本来はIE11もWebGLに対応しているのですがファイルのドラッグアンドドロップに対応できなかったので当面サポート対象外です。

視聴ページ自体はAndroidやiOS8のスマホ・タブレットでも動作します。

新規にプロジェクトを作成する

初めてログインすると以下のように真っ白な画面が登場します。

中央上部のプラスボタンで入力フォームが現れます。
ブラウザによってデザインは異なりますが機能は同じです。

4~20文字の半角英数またはアンダースコアを使って作品のIDを入力してください。
「/works/」直下のディレクトリ名になります。
作品のタイトルとは関係ありません。

正しく入力すると全ての機能が有効になり以下の2か所にIDが反映されるはずです。

画面の見方

1画面だけで開発から公開まで全ての作業を行うことが出来ます。
プロジェクトの流れに沿って左から右に各機能が配置されています。

全体で5つのブロックに分かれており画像の番号付近にあるボタンをクリックすることで展開が可能です。
おおまかな役割は以下の通り。

① ファイルのアップロード
② コードエディタ
③ jThreeのスニペット集
④ 公開設定
⑤ 作品の完成プレビュー

ファイルのアップロード

1アカウントにつきコードも含め合計200MBまで好きなデータを保存できます。
(PHPファイルや.htaccessはアップロードできません。)
作品URLのルート以下に3つのディレクトリがありそれぞれに異なった役割があります。
/assets/と/works/ディレクトリ合わせて100MBまで、/share/ディレクトリ単体で100MBまでアップロードできます。

/
┣ assets/
┣ works/
┗ share/

<img src="/assets/img/hoge.png" />のようにルートからの絶対パスで指定するといいでしょう。
全てのデータはブラウザからの直接アクセスや他サイトからの直リンクが出来ない設定になっています。
（ただし、jThirdの公開ページからダウンロードされてしまう可能性があることに留意してください。）

assetsディレクトリ

各ユーザー専用で自由にディレクトリを作成しファイルを保存できます。

worksディレクトリ

新規でプロジェクトを作成するたびに作品IDを名前にした子ディレクトリが自動生成されます。
作品IDディレクトリ以下には隠しファイルとして「index.html」「index.css」「index.js」「index.goml」が存在しコードエディタでのみ編集が可能です。

ディレクトリの作成やファイルのアップロードは作品IDディレクトリ以下で自由に行えます。
プロジェクトを削除すると対応する子ディレクトリも消去されます。

shareディレクトリ

jThirdユーザー全員でファイルの共有が可能なディレクトリです。
自分のユーザーIDの子ディレクトリ内は自由に変更できます。
全てのユーザーにリンクを使ってもらうことが可能で自身も他のユーザーのディレクトリをコードから参照できます。

(現在公開されているjThreev2.1.0ではtxrタグから/share/以下への参照が出来ません。mmdタグなどは動作します。次のバージョンで修正する予定です。)

① クリックで開閉し右側にディレクトリ内の詳細を表示できます。

② クリックした場所のパス。ルートからの絶対パスなのでそのままコピペしてコード内で使えます。パスを入力して簡易な探索もできます。

③ ディレクトリ内のファイルや子ディレクトリの一覧。ブラウザで閲覧可能な形式のファイルをクリックすると右にプレビューされます。「×」ボタンで削除。

④ ファイルのプレビュー。バイナリファイルなどの場合はダウンロードされます。

⑤ ディレクトリ新規作成フォーム。名前を入力してエンターで生成されます。

⑥ 各ディレクトリの残容量表示。

⑦ ドロップ操作によるファイルアップロードエリア。日本語名のファイルにも対応してます。

作品ファイルの編集

各プロジェクトごとにHTML/CSS/JavaScript/GOMLファイルを編集できます。
GOMLファイルの書き方はスクリプト0行で驚くほど描けるWebGLを参照してください。

① 編集するプロジェクトの変更が可能です。

② プロジェクトの作成・削除ボタン。削除すると公開されている作品でもデータが破棄されます。同時に/works/ディレクトリ以下のプロジェクト用ディレクトリも消去されます。

③ ツールバー。戻る・進む・エディタ内検索・ローカル保存・クラウド保存・拡大・縮小・エディタカラー変更が可能です。
ローカル保存（フロッピーボタン）はブラウザの保存領域を使うので公開済みの作品にも影響を与えず編集が出来ます。保存するたびに右側でプレビューできます。
クラウド保存（雲ボタン）は「/works/作品ID/」以下に保存します。公開済みの作品なら更新されます。

④ ファイル変更タブ

⑤ コードエディタ。フォーカス中は以下のショートカットキーが使えます。

キー	操作
Ctrl + S	ローカル保存
Ctrl + F	検索する
Ctrl + Z	元に戻す
Ctrl + Y	やり直し
Ctrl + X	切り取り
Ctrl + V	貼り付け
Ctrl + C	コピー

jThreeスニペットの活用

jThreeのドキュメント・スニペット集として使えます。
詳細な解説はjThree備忘録を参照してください。
デザインは異なりますが操作方法は大体同じです。

① ビュー切り替えタブ。

② この一覧から解説やスニペットを探します。

③ スニペットの使い方と挿入先を確認できます。

④ 「↑」ボタンで現在のカーソル位置にスニペットを挿入できます。

公開の設定

作品を公開するための設定が出来ます。
公開したあとでも作品の編集が可能です。

① 公開ステータス。「Public」にチェックを入れるだけで公開出来ます。編集内容を反映するには上記の「雲ボタン」をクリックしてクラウド保存をしてください。
URLやIFRAMEのコードは直下に現れます。「Draft」にチェックを入れると非公開になり、外部から作品の閲覧が出来なくなります。

② タイトル入力フォーム。40字以下の半角英数字とスペース、アンダースコア、ハイフン、@が利用可能です。入力後、エンターキーで反映されます。

③ サムネイルを指定します。jThird本体で管理するのでアカウントの保存容量に影響を与えません。100KB以下の好きな形式の画像を投稿出来ます。サイズはアスペクト比を16:9にすると枠にピッタリ収まります。

④ サムネイルのプレビュー。

jThirdフレーム

ローカル・クラウド保存ボタンを押すたびに内容が更新されて自動再生されます。
右下のボタンで全画面表示、再生後に現れる左下のボタンで停止が出来ます。

まとめ

これでjThird Editorの解説が一通り終わりました。
動画のアップロードよりは相当手間がかかりますがその分自由なコンテンツを投稿することが出来ます。
国境を越えて楽しまれる作品を作りましょう！