Media HUD…HTMLでHUDを開発する(3/3) lsl-markdownの紹介

By On 2016-12-23 · Leave a Comment

html_css_javascript_and_the_awesome_jquery_infographic_header

このエントリーはセカンドライフ技術系 Advent Calendar 2016の参加記事です。
http://www.adventar.org/calendars/1673

HTMLでHUDをつくる講座 ３日め。
今回は前回までに紹介したテクニックを集約してつくったアプリの紹介をします。

lsl-markdown

lsl-markdown-cap

lsl-markdownの完成品はMarcketPlaceで配布しています。
フリーソフトなのでぜひゲットして試してください。
https://marketplace.secondlife.com/p/lsl-markdown/10150341

ソースコードはgithubで配布しています。
https://github.com/masterpoppy2/lsl-markdown

Q. どんなスクリプト?

A. LSLで開発したMarkdown Viewerです。 ノートカードでは対応していない、URLのハイパーリンク・画像のインライン表示・表(table)やリストの表示などの機能がある文書を作成してSL内で作成することができます。Webブラウザ(CEF)で動作するので、テクスチャで文書を作るのは違いスクロールしたりテキストをコピー(CtrL+C)することができます。プリムMediaで動作するブログシステムのようなものだともいえます。 XyzzyTextのように文字数を増やすためにリンクプリムが増やす必要はなく、長い文書でも１プリムで表示します。

Q. Markdownってなに？

A. 簡単な記法でリッチな文書をつくることのできる簡易マークアップ記法です。詳しくは下記を参照、またはインターネットで “Markdown” を検索するとたくさん情報がヒットします。
http://www.markdown.jp/what-is-markdown/

上のスクリーンショットでいうと、左のテキストのようなノートカードを作成してスクリプトといっしょにいれると、右のHUDのように表示されるようになっています。 操作感としてはスクロールやズームができるPDFビューワのような感じになっています。

Q. どうやって使う？

A. lsl-markdownには２つのタイプが用意されています。

  • Stand Alone HUD type

    ノートカードのかわりとして配布するのに便利です。
    アバター同士で手渡ししたりグループ通知に添付して簡単に配布できます。
    HUDのなかのノートカードを編集してmarkdownのコードを書きます。

  • Viewer HUD Giver type

    看板として設置してタッチすることで自動でHUDを装着させます。
    Temporary Attachなので装着を外した後にインベントリに残りません。
    看板パネルのなかに入っているノートカードを編集してmarkdownのコードを書きます。
    (HUDを取り出して編集する必要はありません)

Q. 覚えるの大変そう

A. Markdown記法自体はそんなに難しいものではありません。 インターネットで “Markdown チートシート” で見つかる記事を参考にしながら書けば、すぐに使いこなせるようになるとおもいます。
チートシートの例：
http://kobito.qiita.com/ja/docs/about-markdown
http://qiita.com/oreo/items/82183bfbaac69971917f
http://qiita.com/tbpgr/items/989c6badefff69377da7

Q. 画像はどこからもってくるの？

A. SecondLifeにテクスチャとしてアップロードしたファイルをそのまま利用することはできません。 どこかの公開WebサーバーのファイルURLを直接指定する必要があります。 GyazoやImgurなど画像共有サービスにアップした画像ファイルを使うのがお手軽です。 もちろんレンタルサーバーやアップローダーにアップロードしたファイルもOKです。 FacebookやGoogle+などアカウントでのログインが必要なファイルは表示されないので注意してください。

Q. 動画は貼れる？

A. Markdown記法は動画の埋め込みには対応していませんが、HTMLタグでも記述することができます。 Youtubeのiframe埋め込みタグなどを利用して動画の埋め込みが可能です。

Q. ノートカードでコード書くのだるい

A. Markdown専用のフリーなエディターソフトがたくさんあります。

Kobitoが使いやすくておすすめです。(ただしkobitoはHTMLタグには非対応です)
http://kobito.qiita.com/ja/

Q. 見た目がモノクロでダサい？

カスタムCSSを適用することができます。 黒背景(background-color)で文字は白にしたり、太文字(Bold)要素だけ赤文字にしたり、背景画像(backgrouund-image)を設定することもできます。

Q. 必要動作環境?

A. CEFを利用するため、正常な動作には下記のViewerが必要です。 またMedia再生と自動再生をOnにしている必要があります。

Second Life 4.0.0 (307894) 以降
Firestorm 4.7.7 (48706) 以降
その他CEFに対応したTPV

Project bento対応firestorm 5.0.1がリリースされて普及しつつあるのでビューワのバージョンの心配はなくなってきそうですね。

lsl-markdownの中身の解説

lsl-markdownのしくみを一部紹介します。 全コードは マケプレで配布 している現物か github を参照してください。
２つあるタイプのうちStand Alone HUD typeのほうで解説します。
コードはgithubにアップしている ここ(LSL) と ここ(HTML部分だけ) です。

スクリプト動作は下記の流れです。

  1. 装着したらhttp-inサーバーのURLを取得してPrimMediaを設定する。(LSL)
  2. ページが表示されたら$(document).ready(function() {})で初期化を行う。(html, jquery)
  3. 初期化の内容は各ボタンにjqueryで機能を設定する(jquery)
  4. ajaxでカスタムcssとDisplayNameをhttp-inに問い合わせる(jquery)
  5. ajaxでmarkdownのコードを問い合わせる(jquery)
  6. キャッシュがない場合ノートカードの読み取りを開始(LSL)
  7. 読み取ったデータを１行ずつ返す(LSL)
    ここで読み出したデータはキャッシュとして保持し、2回め以降は全文を一度に返すようにしています。(LSL)
  8. 返ってきたテキストをmarkdownに変換して画面に表示(jqueryとmarkdown-it.js)
  9. 最終行まで読み出し終わったら一度全文を再レンダリング(jqueryとmarkdown-it.js)

使用しているライブラリは下記です。 これらをすべて cdnjs から呼び出しています。

  • jquery

    みんなだいすきjquery
    https://jquery.com/

  • markdown-it

    このアプリの影の立役者。markdownをテキストHTMLに変換するやつ。
    CommonMark準拠でかつGitHub Flavored Markdown対応で表とかhtmlとか使えるのがいいからこれにした。
    https://github.com/markdown-it/markdown-it

  • semantic-ui

    右下はボタンはこのGUIフレームワークをつかっています
    いろいろ探したけどここのボタンが通常は透明でマウスオーバーすると白くなるのがよかった
    http://semantic-ui.com/

  • github-markdown-css

    スタイルがgithub風になってCool!
    カスタムCSSを作りたい人はこいつがつかってるclassを上書きするように作ればOK
    https://github.com/sindresorhus/github-markdown-css

プリムメディアのHTML上にURLリンクを使うときに１つ注意するところがありました。
ハイパーリンクは通常クリックすると同じウインドウ内でページ遷移しますが、プリムMedia上でこのままの挙動を許すと当然ページが変わってしまうのと、操作ボタンを非表示にしていると元のページに戻れなくなります。 プリムメディアは新しいウインドウを開く機能がないので target=”_blank” も利用できません。 対策として下記のようにhttpを含む<a>タグを抽出してリンクURLをajaxでhttp-inに送信して、LSL側でllLoadURLをつかって開かせる処理としました。 ほかのアプリでも同じだとおもいますので参考にしてください。 こういう処理をするときはjqueryのセレクターに正規表現を使うと1行で処理できるので便利です。

“Media HUD…HTMLでHUDを開発する” シリーズ
最後はだらだらとアプリの説明をしただけになりましたがいかがでしたでしょうか。

HTMLやjavascriptの基礎的な部分の説明は端折ってしまったのでそのあたりわからない方はちんぷんかんぷんだったかもしれません。 ゴメンナサイ。 これを機にHTML,CSS,javascript, jqueryこのあたりを勉強してみてください。
floating textやxyzzytextで文字の表示機能の実装に難儀してきたスクリプターからすると、CEFが導入されたことでSL内でWebアプリを使うという実装方法としての選択肢が１つ増えたことになります。 JavaScriptなWebアプリはすでに技術として十分確率されていて、ドキュメントや本も充実していているし、ライブラリも豊富にあってしかもそれらを自分のサーバーに配置することなくてお手軽にcdnから呼び出すことで利用できます。 HTMLとJavaScriptのコードはstringに書く必要があるためLSLの容量だとすぐにいっぱいになってしまうのがネックですが、自分が管理する外部サーバやgistなどにファイルをおいて Includeする ことにすればいくらでもリッチなアプリを作ることができます。 拡張性は無限大といっても過言ではありません。 ぜひいろいろな方法を試してみてください。

 

関連記事へのリンク

1日め: Media HUD…HTMLでHUDを開発する(1/3)
https://masterpoppy2.github.io/archive/index.html
2日め: Media HUD…HTMLでHUDを開発する(2/3)
https://masterpoppy2.github.io/archive/index2.html