AviUtlスクリプトと和解せよ その3 コード解読編１
ライン（移動軌跡）のコードを見る会
前回より、AviUtl拡張編集Pluginで入手出来るスクリプトのコードについては自由に扱ってよいと解釈した。という訳でまずはドン。
コード
--track0:ライン幅,2,200,16 --track1:先端,0,500,48 --track2:固定速度,0,100,0,0.01 --track3:描画間隔,0,400,10 --dialog:色/col,col=0xffffff;先端図形/fig,fig="三角形";先端位置補正(%),f_pos=70;最小間隔(dot),min_step=2;主線描画(%),c_size=100;補助描画(%),l_size=0; -- ライン部分 base_x = obj.getvalue("x") base_y = obj.getvalue("y") obj.load("figure","円",col,obj.track0) obj.effect() obj.ox = obj.ox-base_x obj.oy = obj.oy-base_y w2 = obj.w/2 h2 = obj.h/2 t = 0; f = 0; l = 0; n = 1; d = 0 s = w2*obj.track3/50; if( s < min_step ) then s = min_step end if( s < 1 ) then s = 1 end ex = obj.getvalue("x",0) ey = obj.getvalue("y",0) x0 = ex y0 = ey while( t < obj.time ) do r = s while( r > 0 ) do if( l <= 0 ) then if( t >= obj.time ) then break end sx = ex sy = ey f = f+1 t = f/obj.framerate ex = obj.getvalue("x",t) ey = obj.getvalue("y",t) l = math.sqrt((ex-sx)*(ex-sx)+(ey-sy)*(ey-sy)) n = l end if( l > r ) then d = d+r l = l-r r = 0; x1 = ex+(sx-ex)*l/n y1 = ey+(sy-ey)*l/n else d = d+l r = r-l l = 0 x1 = ex y1 = ey end if( obj.track2 > 0 ) then if( t >= obj.totaltime ) then break end t = d/(obj.framerate*obj.track2) elseif( l > 0 ) then t = (f-l/n)/obj.framerate end end if( c_size > 0 ) then lx = w2*c_size/100 ly = w2*c_size/100 obj.drawpoly(x0-lx,y0-ly,0,x0+lx,y0-ly,0,x0+lx,y0+ly,0,x0-lx,y0+ly,0, 0,0,obj.w,0,obj.w,obj.h,0,obj.h) end if( l_size > 0 ) then r = math.atan2(y1-y0,x0-x1) lx = math.sin(r)*w2*l_size/100 ly = math.cos(r)*w2*l_size/100 obj.drawpoly(x0-lx,y0-ly,0,x0+lx,y0+ly,0,x1+lx,y1+ly,0,x1-lx,y1-ly,0, 0,h2,obj.w,h2,obj.w,h2,0,h2) end x0 = x1 y0 = y1 end if( obj.track2 > 0 ) then t = (f-l/n)/obj.framerate else t = obj.time; x0 = base_x y0 = base_y end obj.drawpoly(x0-w2,y0-h2,0,x0+w2,y0-h2,0,x0+w2,y0+h2,0,x0-w2,y0+h2,0, 0,0,obj.w,0,obj.w,obj.h,0,obj.h) obj.ox = obj.ox+base_x obj.oy = obj.oy+base_y -- 先端部分 if( obj.track1 > 0 ) then obj.load("figure",fig,col,obj.track1) obj.effect() obj.ox = obj.ox-base_x obj.oy = obj.oy-base_y r = 0 l = 4*4 s = t e = t t = 0.5/obj.framerate while( s > 0 or e < obj.totaltime ) do s = s-t e = e+t if( s < 0 ) then s = 0 end if( e > obj.totaltime ) then e = obj.totaltime end x = obj.getvalue("x",s)-obj.getvalue("x",e) y = obj.getvalue("y",s)-obj.getvalue("y",e) if( math.sqrt(x*x+y*y) >= l ) then r = math.atan2(x,y) break end end x0 = x0-math.sin(r)*obj.h*(f_pos-50)/100 y0 = y0-math.cos(r)*obj.h*(f_pos-50)/100 sx = math.sin(r)*obj.w/2 cx = math.cos(r)*obj.w/2 sy = math.sin(r)*obj.h/2 cy = math.cos(r)*obj.h/2 obj.drawpoly(x0-cx-sy,y0+sx-cy,0,x0+cx-sy,y0-sx-cy,0,x0+cx+sy,y0-sx+cy,0,x0-cx+sy,y0+sx+cy,0, 0,0,obj.w,0,obj.w,obj.h,0,obj.h) obj.ox = obj.ox+base_x obj.oy = obj.oy+base_y end obj.setoption("focus_mode","fixed_size")
ｵｱｰ!(瀕死)
解読
…ひとまず上から見ていくことにする。なお所々に挟んでいる所感は概ね2023/03当時のものである。
トラックバーと値入力ダイアログ
--track0:ライン幅,2,200,16 --track1:先端,0,500,48 --track2:固定速度,0,100,0,0.01 --track3:描画間隔,0,400,10 --dialog:色/col,col=0xffffff;先端図形/fig,fig="三角形";先端位置補正(%),f_pos=70;最小間隔(dot),min_step=2;主線描画(%),c_size=100;補助描画(%),l_size=0;
これらはスクリプト用インターフェースを設定するための記述である。詳細は以下を参照。
trackは以下画像の右側部分の内、「回転」より下の4項目（トラックバー）を好きな様に変更できる。都度変更するパラメーターがある場合はここを使用すればよいであろう。
dialogは上記画像の「設定」内の項目（値入力ダイアログ）を変更できる。要はコンフィグである。
先頭に--と記載されているが、これはLuaのコメント記法にあたる。なぜコメントアウトする必要があるのかと一瞬思ったが、そういうものだと思いなおすことにした。
トラックバーに設定した項目は、obj.track*という変数として使用できる。*には0～3の数字が対応する。値入力ダイアログに設定した項目はその後に続くcolやfigを変数として使用できる。なお、これらは仕様上すべてグローバル変数として宣言されることになる。
続いて「ライン部分」とコメントされた部分以降を見ていく。
obj.getvalue
base_x = obj.getvalue("x") base_y = obj.getvalue("y")
objと付くものはAviUtl専用に定義された変数や関数である。逐一WiKiを見るべし。
「指定した時間のトラックバーの値を取得します」とな。なんのこっちゃと思ったが、上記をざっくりいくと、base_xは「ナウのx座標」、base_yは「ナウのy座標」を取得したことになる様だ。なぜは一旦置いておく。
obj.load
obj.load("figure","円",col,obj.track0)
様々読み込みができるようだが、ここでは図形を読み込むモードが使われている。その後の引数はname、color、sizeと続いているので「col色の円をobj.track0サイズで読み込む」という操作をしている。で、後でobj.drawpolyで実際に描画をするのであろう。ちなみにライン（移動軌跡）は、実際は線ではなく円の集合体でラインを表現している。はえーあたまいい。
obj.effect()
obj.effect()
フィルタ効果、要はエフェクトをかけるために必要なのだと思われる。随分中途半端な位置にあるなと思ったがそういうもんだと（以下略）。
obj.ox,obj.oy
obj.ox = obj.ox-base_x obj.oy = obj.oy-base_y
基準座標からの相対座標である。オーン。で、基準座標とはobj.xやobj.yである。つまりトラックバーのxやyである。オーン。とまあ当時（2023/03）は仕様をよく理解していなかった。そのため現相対座標から現基準座標を引く理由が分からぬ。このツケの結果は後日紹介する。
obj.w,obj.h
w2 = obj.w/2 h2 = obj.h/2
名前の通り、オブジェクトの幅と高さである。ここでは上でロードした円の情報を取得し、その半分の値をw2とh2に代入している。何に使うかは後で分かるであろう。
変数群その１
t = 0; f = 0; l = 0; n = 1; d = 0 s = w2*obj.track3/50;
ﾝﾞﾝﾞﾝﾞﾝﾞ
謎の変数初期化祭りにたどり着いた。唯一sについては「円の幅に描画間隔を掛け50で割る」計算をしていることは分かった。意味が分かったとは言っていない。ひとまず後のコードを見てから考えることにする。
制御文その１
if( s < min_step ) then s = min_step end if( s < 1 ) then s = 1 end
これを見た時の感情は外国で道に迷ったときに日本語の看板を見つけた時の安心感に似ていた（？）。こういうのでいいんだよ。ただし意味が分かったとは（以下略）。変数sがmin_step（初期値2）より小さければ強制的にmin_stepにする。さらにそれが2より小さければ強制的に1にする。
コーヒーブレイク
大分頭も厳しくなってきたので、ここで改めて動作確認を行う。特にトラックバー、ダイアログ、sあたりは何かつかめるかもしれない。
ライン幅
track0。文字通り線幅が変わる。
先端
track1。先端サイズが変わる。
固定速度
track2。分かりにくいがフレーム毎の移動距離が変わる。
描画間隔
track3。円の設置間隔が変わる。
色
dialogのcol。カラーパレットがガビガビなのはご愛敬。
先端図形
dialogのfig。未紹介。矢印はこの三角形で表現していた。
先端位置補正
dialogのf_pos。未紹介。図形の中心が描画の中心という訳では無い様子。
最小間隔
dialogのmin_step。1 < min_stepの時に円同士の最小間隔に指定される。
主線描画
dialogのc_size。未紹介。これも結局の所線の幅が変わる。
補助描画
dialogのl_size。未紹介。新しく線が生えてくる。半点線の様なものが描画出来る。
一旦まとめ
26/130にしてこの文量となってしまったため、キリも良いので残りは次回に回す。ともあれトラックバーとダイアログが何者か、記すことはできたのでよし。以上。
AviUtlスクリプトと和解せよ その2 ライセンス確認編
ライン（移動軌跡）のコードを見る…見たかった会
前回環境の構築は完了し、いよいよプログラミングの話題に…
その前にライセンスの話
と思っていたが、これから諸々コードを載せるにあたり、重要なことがある。それがライセンスである。世の中のソフトウェア、ないしプログラムは当然誰かが作成したものであり、それには著作権というものが発生する。
細かい解説はここでは省くが、これは作成者に対しほぼ自動的に与えられる権利であり、要は「これは俺のもんやで。勝手にどうこうすんなや」と主張することができる、というものである。そのはず
しかしながら、ことプログラムにおいては、この主張が全部まかり通ってしまうと今後の開発者が何もできなくなってしまう。という訳で開発者は事前にライセンスを提示し、「ここまではおｋ、ここからはNG」という線引きを決め、世に出すことが出来る。その種類は色々あるが、中には（誤解を恐れず言えば）「自由に使ってね！」というライセンスもある。そのため後続の開発者は、そういったプログラムを拝借して楽をするお勉強をしても良い訳である。逆に言えば、ライセンスの提示されていないものはどう扱っていいか解釈出来ないため、どちらかというとライセンスの提示はしたほうが良い、ということになるであろう。
AviUtlのライセンスは？
AviUtlのお部屋にはこう書かれている。
このプログラムはフリーソフトウェアです。 商用を目的とした業務でも使用できます。 このプログラムの使用によって何らかの障害が発生した場合でも 作者は一切の責任を負わないものとします。
以上より、AviUtlはフリーソフトウェアであると解釈できる。なるほど商用利用もOKだなんて太っ腹だぜ。…んでフリーソフトウェアってなんだ？
フリーソフトウェアとは？
ざっくりググると以下のような情報が見つかる。
わかんねえ
…情報を整理しよう。フリーソフトウェアとは「著作権は放棄してないが如何様（使用、複製、改変、再配布）にでも使うが良い」と定めたものを言うらしい。「ただし何かあっても責任は取らん」という免責系は含まれない様だが、まあほぼ暗黙と言って差し支えないであろう。ええやんと思ったがここで引っかかる部分があった。
フリーソフトウェアの定義にこう書かれている。
プログラムがどのように動作しているか研究し、そのプログラムに あなたの必要に応じて修正を加え、採り入れる自由 (第 1 の自由)。 ソースコードが入手可能であることはこの前提条件となります。
おおん？
確かにスクリプト単体で見れば誰でもコードが見れる（ら抜き）状態にあるが、AviUtl本体のコードは無い。ということは、厳密にはフリーソフトウェアではなくフリーウェアという扱いになるのではないかと思い始めた。
フリーウェアとは？
上記によると、本来のフリーウェアは、あくまでロイヤルフリーであり、その他あらゆるものについて自由（フリー）であることに言及しない。当初コードの公開からの改変までを本ブログに載せようと思っていたため暗雲が立ち込めたが、さらに プロプライエタリソフトウェアという概念があることを知った。
プロプライエタリソフトウェアとは？
というかAviUtlのWikiにも書いてあった。
プロプライエタリソフトウェアとは、フリーソフトウェアに比べコードの公開を限定的に、または非公開にしているソフトウェアを指すらしい。
で、結局どういうことよ？
上記情報を踏まえ、好意的に解釈しなおすと以下の通りになる。
- AviUtlは「プロプライエタリソフトウェア」である
- そのため本来の「フリーソフトウェア」と異なり、ソースコードの全公開は行っていない
- しかしながら、公開している一部のコードについては、「フリーソフトウェア」の概念に準じて良い
- なおSDKなど、さらに一部のプログラムを扱う場合は注意点あり
ええやん
それであれば安心してコードを扱わせていただくことが出来る。先に感謝の意を表明する。 ただし、上記はあくまで好意的に解釈し勝手にありがたがっているだけであるので、場合によっては解釈が間違っており、本内容、並びに以降の内容は変更される可能性があることに留意されたし。
まとめ
当初は「ライン（移動軌跡）のコードを見る会」のつもりだったが、案の定たどり着かず「見たかった会」となった。とは言えライセンスを把握するというのは大切であると思うので、今後も気にしながら物事に対応したいものである。以上。…と思ったが、ここまで書いて気づいた。
今まで引用したサイトは本当に引用してよいものだったか？
という訳で過去記事で引用したサイトをすべて辿ってきた。見落としが無いことを前提にすれば、今までの引用物はいわゆるライセンス的なものに違反していない様である。とりあえずよし。さらにその副次物として今更気が付いたが、引用したサイトの管理人様からスターなるものをつけていただいていた。此方も付けねば…無作法というもの…
さて、ライセンスを把握するというのは大切であると思うので、今後も気にしながら物事に対応したいものである。以上。
AviUtlスクリプトと和解せよ その1 環境準備編
…で、どうすれば
前回スクリプトについて話題に挙げたが、さて目的を達成するためにはまず作成方法を学ぶ必要がある。このような時は難しく考えず、とりあえずgoogle様にお伺いを立てることが重要である。ここは我の華麗なる検索力を
…出てくる出てくる。脳みそなんていらんかったんや
いくつか参照した結果、以下の情報が参考になった。
情報を整理すると、
使用できるファイル形式に種類はあるが、これが一番手っ取り早いと認識した。
その前にLuaと和解せよ
AviUtlスクリプトはLua、具体的にはLua 5.1で記述する。知らない言語だったため一瞬心が折れそうになったが、ひとまずググってみる。
ふむ、よくわからん
しかし見る限りC言語と親和性が高いとのこと、それならポインタで挫折した程度にはかじったことがあるので何とかなるかもしれない。
その前に環境を構築せよ
こういうものはとりあえず形から入ってあとから諸々考えるに限る。今までの情報を見る限りエディターさえあれば開発は可能そうである。デバッグはおそらくAviUtl本体でやればよろしい。という訳でエディターはすでに使用していたVisual Studio Codeを選択。
ポータブルモードはいいぞ。
ただし素のままではLuaをうまいこと扱うことができない。そこで拡張機能を追加で導入。
最低限上記2点を導入することで開発は可能になる。さて早速何かしようと思ったがこの時点では何もわからぬ。さてどうしようか…と思った所であるものに気づいた。
いい資料、あるじゃあないか
そうだ。よく考えてみればおおよそやりたいことに対する部分アンサーはある。ライン（移動軌跡）である。これの仕組みが分かればLuaの記述方法とブツの作成方法が一挙に把握できる…かもしれない。そうと決まれば拡張機能の動作確認も合わせてしまおう。
ちなみにライン（移動軌跡）、並びにAviUtl拡張編集プラグインに同梱されているスクリプトは、aviutl.exeのディレクトリ内「exedit.obj」に格納されている。早速VSCodeで開いてみる。バックアップは忘れずに。
おお！お…おお？おおお！？
エラー28件、ワーニング648件、インフォメーション325件とおびただしい量の問題が発生している。なんだこれは。
…ひとまずひとつづつ確認していくことにする。まずはエラー。
予期せぬうんたらと未定義のかんたらとある。クイックフィクスもありだが、確かこの記載は「複数のスクリプトを一つのファイルにまとめる」際に使用するものであった。おそらく自作スクリプトには不要なので見なかったことにする。見る限りエラーはすべて予期せぬ系なので全無視でワーニングへ。
先ほどの未定義と同じである。確かLuaはC言語等と違い、変数や関数をそのまま宣言するとグローバルになるとのことであった。で「このグローバル君、どこにも定義されてなくね？」と言っている。確かに「obj.」関数群はAviUtl専用の関数のようであるし、どこからもインクルードしていない。（というかできるのか？）
という訳でこれはクイックフィクスする。するとワーニングが5件まで減った。こりゃすげえや。続いて残りを確認する。
廃…止…？数学関数の一つなんだとは思うがよく分からん。なお上記の通りAviUtlではLua 5.1が使用されているが、現行バージョンは5.4の様子。一旦これは様子見とする。あとはインフォメーション。
「グローバル変数の頭文字が小文字だけど、”local”忘れかスペル間違えてねえか？」とのこと。余計なお世話なのでは？確かにコーディング規約は大事なので後で確認するとして、ひとまずこれもクイックフィクス。
最終的にエラー28件、ワーニングは5件まで減った。うちエラー28件は使用しない記法に対して発生している、ワーニングは使用するか分からない数学関数に対して発生しているため気にしなくとも良い。おおよそ下準備は整ったものと思われる。
次回へ続く
今回は「AviUtlスクリプト作成には」「Luaが必要であり」「そのため環境を構築して」「なぜかバグ取りする羽目になった」話で終わってしまった。次回より今度こそコードの話に移れるはずであるが、どうせ寄り道の果てのブログなので予定は未定とする。以上。
備忘録作成までの経緯
はじまり
皆様は「VOCALOID(ボーカロイド)」をご存じだろうかだと思う。
実際の所、ボカロを含めた音声合成、ないし歌声合成ソフトはゴマンとあり、どれがどれだか分からん諸兄も多いことだろう。
かつて我もVOCALOIDでの曲作りに挑戦したが、哀れ青年はただの1曲も世に出すことは無く挫折してしまったのであった。
Synthesizer Vとの出会い
さて、去る2022年の末にある動画を見つけた。
このソフトは「Synthesizer V」と呼ばれる。細かい技術はよくわからないが、最近流行りのAIを使用し、いわゆる「調声」を行うというすげーものらしい。とりあえず聞いてみた。
すげー(語彙力)
かつて初音ミクでガイアの夜明けし、巡音ルカで狂喜しIA(イア)で乱舞、NEUTRINOで「もうこれでいいんじゃないかな」と思っていたが、それらをはるかに超えるクオリティを感じるとんでもない代物だった。
(もちろんこれは「より人間っぽいのが好き」という個人の主観からであり、その他が劣っていることを指す訳では無い)
Synthesizer Vについては以下のURLを参照されたし。
いざ「ボカロP(語弊あり)」になるためにリハビリ
で、買っちったわけである
これが2023年の1月頭のことであった。最終的には曲も含めて自作するのが目標だが、まずはリハビリが必要であった。所謂運動不足で鈍り切った体にはジョギングも毒である。
それから毎日猿のようにいじくり回し、2月末には3曲ほどのカバー音源が完成していた。このように何かを作るのは実に10年ぶりである。なかなかどうしてよいものだ。ここまでは何の問題も無かった。
予定が狂い始める
さてせっかくなのでこれをニコニコ動画にでもアップしようとしたが、そうなると動画もつけたくなる。しかし大層な動画を作成するスキルは無い。そこで先達に習い、ソフトの画面をキャプチャーしてお茶を濁そうとした。
動画のキャプチャーには「スーパーアマレココ」を使用。
これでSynthesizer Vの作業画面を再生したものをそのままキャプチャーした。よく分からん画像1枚などという絵面よりははるかにましである。
キャプチャーした動画と音声を結合するため、動画編集ソフトは「AviUtl」を使用。
このあたりのソフトはかつて使ったことがあったので、幸いにも作業時間はそこまでかからなかった。
さて、改めて作成した動画を見返してみると、なんともパッとしない。すこぶる地味である。せかっくなので打ち込みや調整についての解説なんぞもつけてはどうかと思い立った。AviUtlなら諸々の編集も可能である。
当初は解説箇所が表示されたらテキストを挿入するつもりであった。しかしその序盤で「どこのことを言ってるか分からんな」となり、さっそく挫折の兆しが見えた。
あるスクリプトとの出会い
AviUtlは「プラグイン」や「スクリプト」といった拡張機能を導入することで、より高度な編集をより簡単に行えるようになる。らしい。あいにくそこまで使い倒したことは無い。
AviUtlについての説明等は先達の表したありがたい情報群に丸投げする。
さて、ひとまず必要になった機能は「テキストと解説箇所を結んでわかりやすくする線的なもの」であった。
本家の「拡張編集Plugin」にライン(移動軌跡)というものがある。ある点からある点までを結ぶ線もしくは矢印を、動画のフレームに合わせて自動で伸ばしてくれるスクリプトである。さっそく使ってみたが、残念ながらイメージに合わない。さらに線とテキストの位置調整もめんどくさい。もっとこう、解説動画でよくある「ニュバシイッ(?)」っとなる感じを簡単に…
あるやんけ
おおよそ己の考えつく物事は先達が何かしら出しているものだと常々思って生きているが、やはり探せばあるものである。ちなみにこのような形態のアイテムを「引き出し線」と呼ぶらしい。また一つ賢くなった。
という訳でこちらも使ってみたが、なんとこれもイメージと少し違う。何が違うのかしばらく考えた所、どうやら我のイメージとしては、解説箇所をポイントするのではなく、「枠で囲む」ことを欲していたことが分かった。
一応このスプリクトは、ポイント部分を四角形にすることは可能であるが、そのサイズを任意に変更することは難しい。しかしそれ以外はベストマッチである。線をぬるぬる動かすことができる。これは良いものだ。
「無いのなら」
上記で紹介した「丸付折線テキストpd改造.obj」では、ポイント部分の図形を非表示にすることもできた。あとは「枠で囲む」部分を作ればよいだけである。その前に挙げた「ライン(移動軌跡)」は、2点間だけでなく、任意の点を与え、その点群を通る線つまり「四角形の枠」を作成することが可能である。ということは、「ライン(移動軌跡)」で解説箇所を囲み、「丸付折線テキストpd改造.obj」で邪魔にならない所に残りの引き出し線とテキストを表示、いい感じにアニメーションでもつけてやれば良い。作成方法を記載してみる。
- 解説箇所のあるフレームに移動
- 大まかに枠を描くため、4点分の座標を確認
- ライン(移動軌跡)のアニメーション開始フレームを決定
- ライン(移動軌跡)のアニメーション終了フレームを決定
- ライン(移動軌跡)の中間点を2点分作成
- あらかじめ決めておいた座標をそれぞれに入力
- 動作チェック
- 丸付折線テキストを任意の場所に配置
- 丸付折線テキストのアニメーション開始フレームを…
くそめんどくさい
これはいかん。こんなことをしているとまた挫折してしまう。さてどうすればよいか。改めて他に良いスクリプトは無いか探してみたが、上記スクリプトに比べ「これは」というものは見つからない。それらしい物自体はあるにはあるが、残念ながら他のソフト関連の情報であり、AviUtlで使用できるものではない。さてどうしたものか…と立ち止まった時、悪魔のささやきが聞こえた。
無いのなら作ればよい
まとめ
これは、歌声合成ソフトでカバー動画をアップするために、今の所終わりが見えないプログラミング沼にはまり込んだ哀れな人間の備忘録である。
テストページ作成 - 備忘録作成の為の前準備
備忘録を書くにあたり、ひとまず必要そうな記法を確認する。
Markdown編集を使用。CSSは以下。
/* base */ .table-of-contents { } .table-of-contents::before { content: "目次"; font-weight: bold; } h3 { background-color: #171717; color: #ffffff; border-left: #06c270 0.4em solid; padding: 0.4em; } h4 { border-left: #06c270 0.2em solid; border-bottom: #6f6f6f 1px dotted; padding: 0.2em 0.4em; } h5 { border-bottom: #6f6f6f 1px dotted; padding: 0 0.4em; } h5::before { content: "■"; color: #06c270; padding-right: 0.4em; } .red { color: #d91f11; } .emphasis { font-size: 1.5em; font-weight: bold; } /* code */ .code-line { counter-increment: linenumber; } .code-line::before { content: counter(linenumber); display: inline-block; color: #858585; text-align: right; width: 3.5em; padding: 0 1.5em 0 0; } pre.code { background-color: #1e1e1e; color: #d4d4d4; padding: 2em 1em 1em 1em; overflow-x: auto; white-space: pre; } pre.code::before { content: attr(data-lang); display: inline-block; background: #06c270; color: #ffffff; padding: 0 0.5em; position: absolute; margin-left: -1em; margin-top: -2em; } .lang-c .synComment { color: #ffcc00; } .lang-c .synConstant { color: #ce9178; } .lang-c .synIdentifier { color: #dcdcaa; } .lang-c .synPreProc { color: #9b9b9b; } .lang-c .synSpecial { color: #d4d4d4; } .lang-c .synStatement { color: #c586c0; } .lang-c .synType { color: #569cd6 } .lang-css .synComment { color:#ffcc00; } .lang-css .synConstant { color: #05c270; } .lang-css .synIdentifier { color: #d4d4d4; } .lang-css .synPreProc { color: #d4d4d4; } .lang-css .synSpecial { color:#ff0000; }/*?*/ .lang-css .synStatement { color: #d4d4d4; } .lang-css .synType { color: #5b8dee; } .lang-lua .synComment { color:#ffcc00; } .lang-lua .synConstant { color: #b5cea8; } .lang-lua .synIdentifier { color: #dcdcaa; } .lang-lua .synPreProc { color: #ff0000; }/*?*/ .lang-lua .synSpecial { color: #ff0000; }/*?*/ .lang-lua .synStatement { color: #c586c0; } .lang-lua .synType { color: #ff0000; }/*?*/
h3 - 通常文
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
長椅子は町のぼんやり眼団をかっこうを出し外ならまし。ところがどうそれどころですたというバケツたまし。生意気たたのならはなところが皿の上手曲の所をはにわかにだめたらして、いつまで首を教えられんたまし。
入っすぎいつも子が赤くだてさっきのさきのいちど汁へいろ第二血汁のおじぎから飛びたちときたた。楽長は半分ぶっつけながら出しじ。からだは二すましおいでのように弾きていた。
手はむし手たり私をつかまえとやった。ぶんは床下へどっかりにして赤にセロのようのなれがヴァイオリンをくわえてとうとうゴーシュにしててどし。
h4 - 各種記法
#include <stdio.h> int main (void) { printf("Hallo World!"); }
sll.preprocessing.drawMaterial = function(x, y, a) if a == nil then obj.drawpoly(x - obj.w / 2, y - obj.h / 2, 0, x + obj.w / 2, y - obj.h / 2, 0, x + obj.w / 2, y + obj.h / 2, 0, x - obj.w / 2, y + obj.h / 2, 0) else obj.drawpoly(x - obj.w / 2, y - obj.h / 2, 0, x + obj.w / 2, y - obj.h / 2, 0, x + obj.w / 2, y + obj.h / 2, 0, x - obj.w / 2, y + obj.h / 2, 0, 0, 0, obj.w, 0, obj.w, obj.h, 0, obj.h, a) end end
引用
何かに使うかもしれない。
インラインコード<div>。
