View on GitHub

Naokisz

knzk.meアドベントカレンダー2017 12月10日分

この記事はknzk.meアドベントカレンダー2017の10日目の記事です。昨日はQuw__さんによる「イキリオタク」についてでした。 明日は女學生さんの神崎おにいさんが今すぐ北朝鮮に行くべきx個の理由(x=未定)です。

TL;DR

とても悩むけれど、せめてこれと、チラリとこれのちょっと前の表記の部分を読んで!

ちょっとした注意

一応PCサイトブラウザなどで確認してますが、100%スマホで作っているのでもしかしたらパソコンから見た場合BBCodeやホームページのデザインが崩れているかもしれません。すみません。

追記:android版firefoxで一部BBCodeが処理落ちや、意図していない動きをするバグを確認しました。androidをお使いの方は、その他の先進的なブラウザをお使い下さい。その他OSをお使いの方もfirefoxでバグが発生する可能性があるので、他のブラウザを使うことをお勧めします。
また、他のブラウザではカスタム絵文字のアニメーションが動作しない場合があるので、そのような場合はブラウザを変えてこのページを開いて下さい。

自己紹介

discordでただ通話を聞こうと参加すると、いっつもファボってる人だみたいなことを何度も言われたり、神崎おにいさんに呼ばれたからと電車内で通話したらガイジ認定されたnaokiszです・・・。
(discordで通話するとろくなこと無い・・・。)

結構私の名前の読み方聞く人いるので一応。私は"ナオキエスゼット"と読んでますが、もう私と分かれば何と読んでも気にしないと思います。元々メールアドレスから来たニックネームなので、元々の読み方が存在しないような感じです。

神崎丼に来るまでの経緯

最初に、itmediaさんの記事を拝見して、ma.mstdn.jpという一文字しかトゥート出来ないという特色を持ったインスタンスを知り、私はtwitterや他のインスタンスとは違ってとても殺伐としていて良い所だ!とはまってしまって、mastodonとは何かを知ることが出来ました。

それまでにも、mstdn.jpにアカウントは持っていましたが、twitterとの使い分けが分からなく、twitterだけで満足していたので、ここまではまることはありませんでした。

そして、ma.mstdn.jpを使っているうちに、連合タイムラインにknzk.meというitmediaさんの記事でも紹介されていたインスタンスのトゥートが流れていて、連合を遡って読んで飽き足らず、面白そうなトゥートをしていた神崎おにいさんや、NCLSさん、こおりちゃん(??)をフォローしてしまいました。(こおりちゃんのトゥートがma.mstdn.jpに流れていたら、多分それは私のせいです。)

ある時、ma.mstdn.jpにいては、こおりちゃんと会話出来ないし、神崎丼と呼ばれる所のローカルタイムラインをしっかりと見てみたいと思い立って、一度登録しようと試みましたが、「こおりちゃんぴゅっぴゅしちゃだめですか?」合戦がaboutページに表示されているローカルタイムラインで繰り広げられていて、ヤバイインスタンスだと思って登録するのをやめてしまいました。

そしてまたある時、もう一度LTLをちらりと見て今度こそまた登録してみようかと登録を試みましたが、確認メールがやってこなくてログイン出来ませんでした。 本当にサーバーのせいなのか確かめるために、私の持っていたもう一つのメールアドレスでも確認してしまいました。(確認メール送らないで無効化してしまえば良いだろうと思っていたのですが、勝手に鯖缶に承認されてしまいました・・・。)

神崎丼に登録出来なかったことが残念だと思い、一時的な繋ぎの為に(色々な経緯があって)friends.nicoに登録しました。多分神崎丼の確認メールが死んでなければfriends.nicoに登録してなかったかもしれません。

何日か経って、神崎おにいさんの空リプで確認メール無しでいつの間にか神崎丼に登録されてしまっていることを知りました。 (いくらなんでも確認メール無しで登録完了するの大丈夫かよと少し思いました。)

私はこうやって限界集落とか地獄とかブラックカオスとか言われる神崎丼にやって来ました。

BBCode組み合わせ学

what's this????

基本的には[spin][flip]を組み合わせて、図形を描く、複雑な動きを作ろうというものです。 ただ、最近BBCodeの組み合わせ方だけでなくて、スペース等をどこにどのくらい入れるのかで結構動きが変わってくることなどに気づいたので、ちょっと名前を変えたほうが良いのかなとも思ってます。(募集中)

これは私一人で研究してますが、流石にアイディアが一人で無尽蔵に湧いてくる訳では無いので、かおりさんの使っていたBBCodeや神崎丼discordのBBCodeチャンネルなどで他人のアイディアを少しは借りてきています。

一応最終目標としては、見た目では軌道が予測出来ないようなランダムな動きをするBBCodeを作ることを目指してます。(リサージュ曲線とか?)

本題に入る前に

これはBBCodeの基本についてある程度分かっていて、簡単なBBCodeを使って動きを作ることが出来るぐらいにはBBCodeに慣れていることを前提として書きます。 もし分からない、ついていけない場合は、一度やくもさんのアドベントカレンダーなどを見てみると良いかもしれません。(やくもさんのBBCodeについて書いてあった固定トゥートどこか行ってしまったか・・・。)

そして、特記が無い限り、[flip]は[flip=horizontal]を表すとします。

基本形について

基本的にはかおりさんの使っていたBBCodeのそのままの動きですが、[spin]の数が多過ぎて入力するのがダルいので[spin]の数を最小限までに減らして簡単にした物を基本形として、それを元にして色々と弄っています。(かおりさんの公開してくれていたhastepinのURLなくしてしまった・・・。)

私が何故これを基本形と呼ぶようになったかというと、単振動の動きをしているようだから、これを上手く使えばsin、cosとして使えて色々と思い通りの動きを作れるのではないかと思ったのが一番の理由です。 かおりさんがこれと似たコードを公開してくれた時まで、BBCodeはただ回転させるだけのつまらない物だと思っていたので、本当かおりさんのBBCodeは私にとってBBCodeの無限の可能性を感じさせてくれたという革命のようなものでした。 あのBBCodeが公開されていなかったから、今こうやってBBCodeについて書いていないと思います。

BBCodeの回転を"止める"ということについて

この基本形、またこれの派生のBBCodeで一番大切なことは回転を止めるということです。 BBCodeの性質上、動きをつける為には[spin]を使わなければなりません。 回転させることは簡単に出来ますが、回転を止めるには[spin][flip]の組み合わせにある決まりがあります。

表記などについて

ここで、簡単に説明するために、BBCodeに対してだとちょっと変わっていると思われる表記、考え方を導入したいと思います。 まず、[flip]は仕切りで、仕切りと仕切りの間に[spin]が何個か入っているとします。 それを、(1,1)のように順番に、仕切りで区切られた[spin]の数を並べていくとします。 何故このような表記にすると良いのかと言うと、私が[spin][spin]と何度も書きたくないというのと、括弧に入っている数字を同じ自然数で掛けても、また、結果が全て自然数なら同じ自然数で割っても、速さは違うけれど動きは同じになるという利点が有るからです。 ただし、この表記にも欠点があります。このやくもさんのDiscordのBBCodeチャンネルにあるBBCodeを例とします。

[spin][spin][flip=horizontal][spin][spin][spin][flip=horizontal][spin]🖕😋[/spin][/flip]     [flip=horizontal][spin][/spin][/flip][/spin][/spin][/spin][/flip][flip=horizontal][spin][spin][flip=horizontal]:oahyou:[/flip][/spin][/spin][/flip][flip=horizontal][spin][spin][spin][flip=horizontal][spin][/spin][/flip]     [flip=horizontal][spin]🖕😂[/spin][/flip][/spin][/spin][/spin][/flip][/spin][/spin]

このBBCodeには途中に[/spin]などがあり、途中で枝分かれしてるようになっています。私がまだそこまで枝分かれを必要としてなかったり、この表記、考え方をし始めた時にはこのように枝分かれすることを想定してなかったので、当分はこのままで、必要となったらまた新たな表記を考えたいと思います。

結局BBCodeの回転止めるにはどうすれば良いの??はよ!!

前置きを書いていたら思いもよらず結構長くなってしまいましたが、ここからが私にとっては本題です! 簡単に一言で言うと、ここで紹介した表記で一番左から数字を1番目、2番目、3番目...とすると、

(奇数番目の数の合計) - (偶数番目の数の合計) = 0

となる時、BBCodeの回転は止まります! ちなみに、計算結果がプラスになった場合、BBCodeは通常回る向きに、マイナスになった場合、その反対向きに回り始めます。

何故こうなるのかというのかを(1,2,1)を例として説明すると、一番外側の[spin]が回転させようとして、+1となり、[flip]で反転して符号が逆になり、その内側に[spin]が2個あるので-2となり、この時点で合計-1となります。 そして、また[flip]があり、符号が反転し、その内側に[spin]があるので+1となり、合計0となります。 よって、一番内側の部分は回転しなくなります。

回転止めただけ??BBCodeなのに動かないんだけど??

この状態であると、確かに一番内側の部分は回らなくなりますが、前の説明の通り、その外側には動く部分があります。 そこに文字や、スペースを入れると、一番内側の部分が回らないのに外側が回る、外側が動くお陰で内側が動くなど様々な動きをすることが出来ます。 基本的に基本形、またはその派生は、それぞれの[/flip]の後に同じ数のスペースが入っています。(今までのBBCodeを見てると、このような慣例があるそうです。)

動きを大きく、派手にする為には

多分ここで書いてきたことを元にしてBBCodeを書いたとしたら、何かしらの動きをするBBCodeが出来ていると思います。 ただし、思ったよりも動きが小さい、ウザさが足りない(?)など満足出来ない所があるかもしれません。 そのような時、多分役に立つだろうと思われることが私には4つあります。

1つ目は、スペースを挿入、増量することです。多分動きを大きくしたいと思った時は一番に思いつくことだと思います。 ただしこの方法では、全角スペースを入れ過ぎると動きが壊れてしまうという欠点があります。 後で書きますが、基本的にBBCodeは文字を大きくする、文字数を大きくすると、直線の軌道であるべきものが楕円軌道になってしまう、動きが乱れてしまいます。

2つ目は表示する文字の配置を工夫するということです。普通、[spin]などで挟まれた部分には
:middleparrot:
など、一つの文字の塊しか入れないと思います。 しかし、BBCodeは回転させるものであり、回転は回転の中心軸から遠く離れれば離れるほど動きは大きくなります。 なので、動きを大きくしたい時、
:middleparrot:       :middleparrot:
のようにすると良いと思います。 また、この方法を使うと、文字の塊の数が2倍に増えて派手になるという効果もあります。

3つ目は[large]で文字を大きくするということです。文字を大きくすると、文字が強調されることによって文字自体の存在が大きくなって動きの見た目が変わってきたり、圧倒感が出てきたりして少し違った物のように見えると思います。

4つ目は[spin]を適当な所に入れてみたり、取ったりしてみるということです。BBCodeは[spin]1個違うだけで大きく動きが変わります。 [spin]を1個入れる、取る時にしても、場所をどこにするかによって大きく動きが変わってきます。 例えば、下のBBCodeのように全角スペースの所に入れ子してBBCodeを入れてみたり、文字を囲んでる[spin]の数を入れてみたり、という感じです。

これらのことなどを色々と試してみて、自分の思い通りの動きを作ってみてください!

BBCodeを動かす為の全角スペース、文字について

普通、BBCodeを動かす為にはスペースを用います。(まあ、見せたい物だけを見せて、どうやって動いているのかなんて分からなくても良いから当たり前のことですね。) しかし、どのようにスペースを入れてる部分が動いているのか確かめたい、動きがおかしいからデバッグしたい、わざと文字を入れて回したいなどの時、適当な文字をスペースの代わりに入れる事もあります。

BBCodeに入れるスペースなどの個数は、ただ動かしたいときには全角スペースだと2個、3個で良いと思います。 大きく動かしたい時には、文字数や[large]でどのくらい大きくしたかに依りますが、全角スペース5個くらいまで安全圏かなと思います。

さらに動きを大きくしたい場合は、文字が小さい場合出来るかもしれませんが、動きが崩れていないか注意が必要です。 私が行っているチェック方法としては、①knzkappで見る、②ブラウザで見てみる、という感じです。(スマホのブラウザとパソコンのブラウザで動きが違うかもしれないとか知るか・・・。) 結構knzkappではまともそうに動いているのに、ブラウザで見ると動きが崩れている、またはその逆みたいことが良くありました。

また、ホームページにトゥートを貼り付けたい場合、一度貼り付けた後に動きをチェックした方が良いかもしれません。(結構挙動違います。)

まあ、普通はこのようにちゃんと動いているか気をつける物ですが、わざと動きを崩してみるのも面白いかもしれません。

良い感じのBBCodeが出来た後の仕上げ

良い感じのBBCodeが出来上がった時、動きが大き過ぎて表示出来る範囲からはみ出てるかもしれません。 横方向にはみ出るのは神崎丼やマストドンの仕様上どうしようもないですが、縦方向は幅を大きくする事ができます。 ただ改行を入れると無視されるようですが、全角スペースなどを入れて改行をすると改行を入れることが出来、幅を広げる事が出来ます。(改行、半角スペース、改行とすると改行が無視されるようです。)

また、BBCodeの表示処理は重いので、(サーバーにはそんなに負荷は無いそうです。)もしあまりにも速く回転させるBBCodeなどの重いBBCodeを公開する場合は、そこまでスペックが高くないパソコン、スマホに配慮するためにトゥートに適切にNSFWを付けましょう。 低いスペックのパソコン等でも神崎丼を見てる人がいるかもしれないことをどうか忘れないであげてください。(BBCodeでテロは論外です。)

神崎丼Local TimeLineは神崎丼民みんなの物ですからね。

後書き

頭の中にある物垂れ流すように書いていたら案外結構長く書いてしまいました・・・。 もしちょっと書いて終わってしまったら、マストドンに欲しい機能とか叫んどこうかと思ったら、時間も足りなくなり、結構書いてしまったのでやめました。 私にとっては長くなってしまったような気がしますが、まだ書き足りない、書くのを忘れてることが有る様な無い様な気がします。

初めてのアドベントカレンダー、結構余裕があるなと思っていたのですが、結局締め切りに追われちゃいました。 本当はセンター試験1ヶ月前にバタバタしたくないと思って前もって書き進めていたのですが、始める時期が遅かった、ペースが思ったよりも上がらなかったせいでギリギリになってしまいました。 (口が裂けてもモチベーションが0だったとは言えない・・・。)

GLSLと似てて、sin、cosに似てるから、BBCode色々出来る、楽しいと思っていたけれど、まさかアドベントカレンダーを書くまで好きになるとは思ってなかったなぁ。人と話すのがそんなに好きではないからBBCodeと話す、BBCodeで話すという感じになっちゃってるのかなぁ。

スマホで文章を書くのって大変ですね。受験が終わらない限り親がパソコン使うのを許してくれなさそうですが。 片手モードがあるからという理由でgoogle日本語入力を使って文章を書いているのですが、"BBCode"さえ予測変換候補に入らないのは何なんだか。 片手モードがあって、予測変換がしっかりしてて、余計な候補は消すことが出来るキーボードが欲しい・・・。

時間が出来たら、私の為のBBCodeを高速で作り上げるCプログラム書く予定なので、来年BBCodeトゥートが増えるかもしれません!

センター試験まであと1ヶ月。1年間の成果が出るように頑張る!

















あー勉強疲れた。今日も神崎丼遡ろ!

BBCodeギャラリー

適当に良さげなBBCodeを置いていきます。アドベントカレンダー担当日が終わっても追加していくかもしれません。えっ、明らかにボツだと思われる物が混じってる??BBCodeは全て輝いているからボツなんて元から存在しないんだよ・・・。