1. libru1

    Posted

    libru1
Changes in title
+「文言」でレンダリング-IDE編 お手軽環境構築なし!
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,45 @@
+### はじめに
+
+2019年末彗星のように現れた「文言/wenyan-lang〜漢文風プログラミング言語」もう試してみましたか。私は試してみました。[公式](https://wy-lang.org)のフッターには[WIKI]も増えています。
+<img width="922" alt="Screen Shot 2020-03-01 at 5.05.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334227/4ceb5a14-2190-1e52-2c53-1380fef4a7c8.png">
+
+興味はあるけれど...とまだの方にお手軽環境構築なしですぐに試せるオンラインエディターをご紹介します。
+
+オンラインエディターが[こちらhttps://ide.wy-lang.org/](https://ide.wy-lang.org/)に引越しになりました
+
+ソースコードも[言語本体](https://github.com/wenyan-lang/wenyan)と[別プロジェクト](https://github.com/wenyan-lang/ide)になりスタイリッシュにより使いやすくなりました。
+
+### ポイント
+:white_check_mark:テーマがライトとダーク選べる!(エディター見た目大事)
+:white_check_mark:レンダリング出来る
+:white_check_mark:オフラインでも使える
+:white_check_mark:My Scriptsでスクリプト管理できる
+:white_check_mark:実行結果とJavaScriptはすぐ見れる
+
+### 使い方
+
+まずはアクセスすると(:arrow_down:はdarkテーマ)こんな見た目
+<img width="1429" alt="Screen Shot 2020-03-01 at 4.59.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334227/55f1277b-8248-7dbd-5ccb-6fe691248eea.png">
+
+大きく4つのペイン(左、中央、右、下部)に分かれています
+
+**左側**:サンプルプログラム、My Scriptsの選択
+  「+」で新しいMyスクリプト追加
+  「↓」で編集したソース保存
+**中央**:ソースコード表示、編集作業部
+   highlight、コード補完も完備
+   ※サンプルソースはサーバーに取得に行かず、Build時に同梱の物を表示 
+ 「compile」でwenyanソースを右側にJavaScript変換、実行結果を下部に表示
+**右側**:wenyanソース「compile」(transpile)結果表示
+  「?」でヘルプ(link表示) 
+  「⚙」でテーマ変更など設定変更
+**下部**:ソースの標準出力結果
+ 「Render Book」ソースの**レンダリング**
+   ※「↓」レンダリング後表示され、結果をダウンロード出来る!!! 
+
+### おわりに
+
+いかがでしたか。苦労したレンダリングが2クリックで完了。拍子抜けする簡単さ。
+サンプルプログラムもcontributeされ増えています。
+
+2019年12月に使ってみた方も是非活用してみて下さい。