忍者ブログ

カレンダー

03 2024/04 05
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

最新コメント

[07/13 ♀はっか]
[07/13 ♀はっか]
[07/11 ♀はっか]
[07/11 ♀はっか]
[03/16 空竜]

最新トラックバック

プロフィール

HN:
空竜
性別:
女性

バーコード

ブログ内検索

アクセス解析

忍者アナライズ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

最近Processingなるものを触っている

そもそもProcessingってなんぞ?
Wikipediaさんによると…
https://ja.wikipedia.org/wiki/Processing
"電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境である。
アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。
視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、
電子スケッチブックの基盤としても利用できる"
…だ、そうだ。

公式サイトはこっち。
https://processing.org/

初見で「そういうプログラミング言語か?」と思ってたら、
APIの提供をしている統合開発環境なんだとか。
基本はJavaなんだけど、PythonやJavaScript(p5.js)に
モード切り替えして実装もできる。
とはいえp5.jsを触った感じ、APIに完全な互換性が
あるわけじゃなさそうだから、そこらへんは注意。

互換性で言うなら、Javaで実装したものを
JavaScriptで動かせるProcessing.jsってのもある模様。
ただし、2018年12月で更新が停止して使用非推奨になったとか。
OpenProcessingという、プログラム投稿サイトでも、
Processing.jsを廃止して完全にp5.jsに移行するらしい。

Processingjs Deprecation Notice | OpenProcessing FAQ
https://intercom.help/openprocessing/en/articles/3250763-processingjs-deprecation-notice

あと調べたところ、ProcessingはAndroidでも動かせるようにできるし、
もっと言えばマイコンでも動かせるらしい。
Arduinoが筆頭で、Raspberry Piでもいけるとか。
…Raspberry Pi 4 model Bの技術基準適合証明まだですか(正座待機なう


で。
自分が最近触ってるのはどっちかってとp5.js。
ExtendScript(AEスクリプト)みたいな、
特殊環境でのみ動くJavaScriptのタイプかと思いきや、
単純にライブラリをhtmlに読み込んでcanvasを更新してるだけの模様。
そういう意味じゃ、前にお世話になったthree.jsっぽくもある。
つまり普通にブラウザで再生できる。つおい。

問題はここから。冒頭にも書いた
「詳細な設定を行う関数を排除している」環境ってなんやねん、と。
まあいろいろあるんだけども、個人的に感じるところは…
MVC(Model View Controller)の概念がない、かな。

実装するのは基本setup()での初期化処理と
draw()での毎フレームの描画内容指定だけ、なんだけども、
「Spriteクラスを継承して、更新処理の後に描画処理を…」
「newしたオブジェクトのxの値を更新して移動させて…」
みたいな概念が全くない。
あるのはただ、図形の描画処理だけ、みたいな。

この座標に、この図形を描く。おわり。

一応「こいつの現在の状態はこれ」みたいな情報を持った
モデルに該当するオブジェクトを自作することはできるけど、
基本それをサポートしてない。
当たり判定?なにそれおいしいの?状態。
一般的なゲーム制作なんて以ての外。不向きオブ不向き。
キャラの存在しない抽象的なゲームなら作れなくもないかも。

さらに、描画される画面はリセットされない。
draw()の中で画面をリセットするなり、塗りつぶしなおさないと、
まるでWindowsの昔のスクリーンセーバーの如く、残像が残りまくる。
ある意味原始的。

メモリの管理はしなくてよくて、簡単な図形は描画できる。
さらに、キーボードやマウスの入力は(取れるけど)取る必要性すらなくて、
本当に「アーティストによるコンテンツ制作作業のため」という名目の下、
バグなんて存在しない無法地帯を展開できる感じ。
イイ感じの出力が得られれば、それが正義。

「亀を動かして軌跡で絵を描く」という教育向け言語のLOGOを
リッチにした感じの方がニュアンス的には正しいかもしれない。
画面を更新し続けてアニメーションさせる必要もなく、
出来上がった静止画像を作品として扱ってる人も多い模様。
というかそういう人の方がメインな模様。
ほげぇ~…異世界じゃぁ~…


で。
自分としては、2020年でFlashが終了するのに合わせて、
ActionScript3.0…AS3もサヨウナラなわけで。
研究室で使ってたメイン言語であるAS3がサヨウナラするにあたり
アレぐらいのノリで実装&公開できる
手軽な環境がないのは悲しいところではあって。

Processingはそういう意味では手軽なんだけども、
手軽すぎて心配になるレベルの代物ではある。
そもそもアニメーションがメインじゃないしなぁ…

昔、FlexBuilder3で「ブログパーツっぽいもの」っつって
Flashで1日1個何かしら作ってた時期があるんだけども…
FlexBuilderもブログパーツも今となっては
「なんだソレは」と言われそうな用語だよなぁ…?ww

今はその当時のノリに近しい感じで、
1日1個Processingで何か作るごっこをしてる。
…いや、単純に作るだけではなく、文字量はツイートできる範囲縛りで。

Processingを知ったきっかけがそもそもソレだったりする。
「つぶやきProcessing」というタグをつけて、Processingで動くコードをペタる。
ちなみに現在のツイッターの仕様上、280文字までつぶやける。
タグをつけるから実質261文字…かな。その範囲で組む。

この縛りが1日1個組む分には丁度いい分量なもんで。
作り込みもせず、マジで落書きするが如く組んでる。
たまーにちょっと真面目に組んでたりするけども。

すでに1ヶ月ぐらいは作ってて、ブツはGitHubにも上げてる。
https://github.com/SourceOf0-HTML/processing-p5.js
冒頭でちょっと取り上げたOpenProcessingってところにも投稿してみたり。
https://www.openprocessing.org/user/187469/
まあ、進捗そんな感じ。

WebSocketの使い方勉強して合体させたら、
当時研究室で作ってたハードウエア+Flashなやーつを作れて、
それはそれで面白いことできるかもなぁ。


ん。報告以上。

拍手

PR

Minecraft: Java Edition 購入

2月にマイクラの体験版をパッドを接続してプレイ&動画撮影したのだけども、
いまいち目標らしい目標も進捗もなく、ド下手プレイをしただけだったので、
体験期間も過ぎて終了&動画も放置してたんだけども。
3月末におとんからグラボ(1080Ti)を貰ったし
「こういう遊び方ならマイクラやってもいいかな」
と思える内容もあったりした結果「Minecraft: Java Edition」を
購入&プレイしたのでそのあたりの報告。


■昨今のマイクラの状態を整理

自分がマイクラを知った時期はまだBeta版で、
クロスプラットフォーム版と分離なんて当然されてなかったけども。
それでもMOD入れたりなんだかんだできるあたり、
Java版の方が楽しめると、個人的には思っている。

とはいえJava版のアプデがそろそろ荒ぶって来てるなーという印象。
エンドもなければラスボスにあたるエンダードラゴンもおらず、
クリアなんて概念はなかったし。
アイテムも片手持ちだったのが、今では両手それぞれに持てるようになったし。
敵Mobもへちょかったのが、AI賢くなって動きが良くなったし。
そこまでならまだしも、今となってはバイオーム増えまくりMob増えまくりで、
「バニラなのに元々MOD入ってるような状態やんけ」で、すごくカオスな感じ。

ダラダラ更新されて、現行最新バージョンは1.14.2。
オレが購入してプレイし始めたのは1.13.2からなので、
プレイ開始早々アプデに巻き込まれ、若干パニクったよね。
「今のマイクラは海がどえらいことになってんだなぁ…イカの存在浮きすぎ」
とか思ってた矢先、村と村人周りが大更新された挙句
「略奪隊」と「襲撃」のシステムのせいで、
その辺に敵Mobが群れで沸くようになった挙句、
適当に蹴散らした状態で村に入ると、村が襲われるという…ね。
突然沸く「行商人」も正直邪魔じゃね…?有効活用できた試しがない…

まあマジで嫌なら過去バージョンにして遊ぶこともできるからありがたい。
MODも当然と言えば当然だけど、過去バージョンにだけ対応してるものが大半だし。
そこらへんの融通が利くから、どんどん更新していってるのかもしれない。


■プレイスタイル

パソゲーそのものをあまりやらないってのもあって、
体験版はパッドを導入してやったりしてたんだけども…
使いたい機能に対してボタンが足りないし、
カーソル移動速度の微調整が効かないからエイムしにくいしで、
結局キーボード&マウスで操作に慣れた方がいいという結論に至った。

何より一番デカいなぁと思ったのが、三人称視点…マイクラで言うF5視点。
元々マイクラは一人称視点で進行させるのがデフォだと思い込んでる部分があるし、
だからこそ後ろからきた匠に爆殺されることも多々あると思うんだけども。
F5視点に慣れれば後方確認もできるしで、かなり安全&操作しやすいと思った。
とはいえ、狭い洞窟なんかに入るとカメラが荒ぶるから、
そこらへんはうまく切り替えられないとダメだなぁと、しみじみ。

あとはサバイバルモードに縛られる必要もない、というところ。
今のマイクラは特に、アイテムもメチャクソ増えているし、
その分クラフトのレシピも増えまくってるしで、
初見だとどれだけのことができるか、よく分からんわけで。
自分はクリエイティブモードで通常ワールドを作って、
コマンド使いつつ、サバイバルモードと切り替えつつで、様子見した。

やってみた感じ、地上よりも地下が安全だなぁという印象。
昔から「何をするにもまず木材」だったわけだけども、
地下にも結構な確率で廃坑が生成されるようになってるっぽいし、
廃坑が木材で出来てることもあって、廃坑を見つけさえしたら、
地上で木材収集する頻度を大分減らせるように思えた。
地下採掘でブランチマイニングもして、装備も充実させられたら、
あとは安心して地上探索なりなんなり、かなぁ?

トラップタワー建築自体はまだ試したことないけども、
エンチャントまで手を付けるとなると、作らないときつそうだなぁと思った。
とにかくエンチャントするための経験値が足りない。
ただ、村での交易を繰り返せばエンチャント済みの装備が
手軽に手に入るようになるから、いっそそっちを狙う方が手軽かもしれない。
「拠点作るのも面倒だし、村に住もう!」ってのが一番無難?
村は襲撃に備えて周りを要塞化するのがいいらしいよ。やってないけど。

MOD導入は今のところしたことない。バニラであれこれ試してる段階。
というか、バニラの時点でやれることが増えすぎてるってば。


■建築

正直、メチャクチャ掘って整地して湧き潰しして素材集めて建築して…って
サバイバルモードでマジで時間が掛かて建築したいかと聞かれると…
そうでもないのよね。
サバイバルなら装備を整えて、自分が満足できるぐらいの操作を身に着けて、
快適に敵Mobを倒せるぐらいになれたらいいかなぁ、って感覚。

そういう意味では建築はクリエイティブモードで
がっつりやる感じがいいなぁと思ってる。
で、素材やエンチャント周りも多少調べはしたのよね。
レッドストーン回路は使いこなせた方がいいだろうなぁと思って、
スーパーフラットのワールドであれこれ試したね。

遅延とかフリップフロップ回路とかクロック回路とか、
あれこれ調べては作ってみて、なるほどなーと。
ただ、そもそもマイクラのレッドストーン回路周りって
バグありきで成り立ってるものもあるし、
ブロックによって出力範囲がそれぞれだしで、なかなかややこしい。

そういう意味でも、やっぱ何よりコマンドが魅力的だなぁと思った。
時間を止めてずっと朝もできるし、ずっと晴れにもできるし、
敵Mobが湧かないようにもできるし、近辺の建築物検索もできるし、
座標指定でワープもできるし、バフもかけたい放題だし、
死んだときにインベントリを保持するようにもできるし。

コマンドブロックは前々から存在を知ってたから、
早速使って見てたんだけども、コマンドブロックとfillコマンドの
組み合わせが便利すぎてヤバかった。
好きな素材のブロックで埋めたい範囲を相対座標で指定したコマンドを
コマンドブロックに設定しておいて、あとは好きな場所でポチっていけば、
豆腐ハウスも量産できるし、整地も楽だし。

加えてストラクチャーブロックが便利すぎた。
使い方にかなり癖があるけども、建築物をセーブ&ロードできるのはデカい。
自分で好き勝手作ったやつをセーブして、回転だの反転だのしてロードしまくれば
それっぽい建築ができるあたり便利。
建築物の名前さえ分かっていれば、ロードすることで村を自力で作れてしまうのも強い。
Mobも一緒にセーブできるし、ストラクチャーヴォイドを使えば空気抜きもできるし。
強すぎ。


■マルチ鯖

最初「自鯖できるかなぁ?」と思って軽く調べてみてたんだけども、
IP固定してポート開放しなきゃいけないとか、ガチ鯖やねんなぁと…ww
我が家はおとんが別件で鯖を立ててたりするし、さすがに見送った。
ただ、大型マルチイベントとかやってる人の情報を見る限り、
主催者が専門知識のある人にお金払って依頼してやってる上、依頼されてる側も
「個人的にやってるけど規模がデカいから電気通信事業者としてやってる」
とかなんとか。そんなことになるのね…

で。そんなことせずともレンタル鯖もいろいろあるようで。
公式の鯖があるのは前々から知ってたけども、無料枠だと期限付きだし、
有料だと月額発生するし、そこまでするつもりもないし…

今は「aternos」っていう無料鯖を試し中。
ロースペックだし無操作時間10分で追い出される仕様だけども、
数人だけで遊ぶ分には問題ないと思う。
バージョン切り替えできるし、MOD入れられるし、
マップのアップロードダウンロードもできるし。

マルチ鯖ともなればローカルのマイクラともある程度差が出てくるわけで。
初見だと、とにかくラグがえぐい。矢が時間差で飛ぶ。
これは確かに「矢を追い越して自分に刺さった」事件が起こるわ…としみじみ。
エリトラ&花火でビュンビュン飛ぼうものなら、
ロードが間に合ってないマップ外まで出てしまって、頻繁に戻される。

試してはないけども、マルチが重いのは最近のバージョンであって、
1.0.0は超軽い、1.8.0ぐらいまでなら安定して遊べる、
それ以降はラグいしバグりやすい、って話は聞いた。
マルチ鯖で遊んでる人の動画とか見てると、大抵バージョンが低いし、
そういうことなんだろうなぁ…

マルチ鯖特有と言えば、ホワイトリストとOP権限もあるよね。
ホワイトリストの設定さえしておけば、鯖に入れるプレイヤーを指定できるし、
OP権限を持ってる人しか、えぐいコマンドは実行できないし。
まあ…入ってきた友人が「テレポートっでどうやるんだっけ?」って言うから
「OP権限ないと無理。付与するわ」っつって、OP権限付与してさ。
「これでやりたい放題できるで」っつったら…
次の瞬間killコマンド打たれて、そりゃあもうクソ笑ったよね。うん。

今はとりあえず、特に目的らしい目的もなく、
マルチ鯖上でストラクチャーブロックを使って建築してみてるところ。



他にもいろいろ書こうかと思ったけど、今回の報告は以上。

拍手

「SVGでアニメーションさせたいんじゃ」の詳細報告


放送でも取り上げてたけども…
放送内では語り切れないことについてクッソだらだら書いていくぅ~↑


安売りしてたとかでおとんが買ってくれた
Moho Pro12 と Poser Pro 11
のうち、今回使ったのはMohoだけ。

Poserの方は自作で3Dモデルを作る技術もツールもないので、いまいち使い道が思いつかないnow。
デッサン人形代わりにはなるかもね?ぐらい。
大量にプリセットがあるけども、リアルテイストすぎて上手く使いこなせる気がしない(白目)


【Mohoに対するマニアックな感想】

Mohoの方は2Dだから無茶ができる感。
ラスタ形式でもベクタ形式でも読み込めるし、ボーンを入れられるし、アニメーションを付けられるので、大体でOKができてありがたい。
フォトショ(psd)もイラレ(ai)もそのまま読み込める。
が、イラレはバージョン8までの形式しか対応してないらしく、CC2019を使っていようが、保存時にわざわざバージョンを落とさないといけない。
まあaiを読み込めるだけマシ?

Moho側で完結して作る場合はベクタ形式だから、パスの扱いに慣れてない人はキツいだろうけど、逆に言えばベクタ形式系の編集機能は付いてるわけで。
読み込んだデータも含め、パスの線の太さ・角度・塗りあたりもその場で編集&アニメーションできるし、フレーム間で勝手にモーフィングしてくれる。
ただ、アンカーポイントの数の変更には弱く、途中で変形させるために無駄にアンカーポイントを増やす羽目になったり…
その辺も含め、AEのシェイプ機能みたいなもんなわけで。
シェイプ乱用に定評があるオレ歓喜。


Moho上でのアニメーションの概念についてだけども。
描画ツール系でよくあるレイヤーと、AEのコンポジション・キーフレームの概念にプラスして、ボーンを使って制御する感じ。
理解できるまでクソややこしかったけども、分かってしまえばクソ便利だなぁという印象。

表示時の重なり順はレイヤーパネル上の順になる…まあ描画ツールではよくある話で。
途中でレイヤーの表示順序を変更するようなアニメーションは、上位のグループ(フォルダ)のオプションで設定すればできるようになる。
AEだったら同じコンポのレイヤーを重ねて、切り替えたいタイミングでインポイントとアウトポイントを…
ってやるところを、アニメーションの再生途中でマジでレイヤー入れ替えちゃうあたり、かなり強引。
意図せず編集途中でレイヤーを増やしたり移動させたりすると、既存のレイヤー順序アニメーション設定がご乱心なさるのでマジ注意。

で、このレイヤーはAEで言うところのフッテージ…かと思いきや、コンポ的な扱いらしい。
つまり、レイヤーを増やせば増やすほどコンポが増えるようなもので、グループレイヤーは中に入れてるレイヤーのプリコンポみたいな感じ。
レイヤーの各々にタイムラインが存在し、各々にアニメーションの設定を入れる。
グループに移動・回転アニメーションを設定すると、中のレイヤーのアニメーションも再生しつつ、一括で移動・回転する。

単なるグループもあれば、機能を持ったグループっぽいものがあって…
特にMoho的に一番重要であろう『ボーンレイヤー』は、中のレイヤーに対してボーンを入れてグリグリ動かせる。
単純にボーンに追従させて動かすこともできるし、メッシュワープみたいな感じでグニグニ変形させながら動かすこともできる。
今回は使ってないけど『フレームバイフレームレイヤー』なら中のレイヤーをパラパラ漫画形式で再生、『スイッチレイヤー』なら口パクや目パチのような差分レイヤーとして管理&切り替えられるようになる。
ラスタ形式だったらクソお世話になりそう。
ボーンの中にフレームバイフレームやスイッチを入れ子にすることも可能。
マスクの設定を入れることも可能。今回は目を顔でマスクしてるけど…作業画面では分からないね。動画出力時には反映される。
あとは使ってないけど、乗算やスクリーンのようなブレンドモードもある。
大体のことできるやん…


あと、めっちゃAE用語で喋っちゃうけど…
全コンポ(レイヤー)のタイムラインのインポイントは一律同時。つまり全部同時再生状態。
だからこのままだと再生開始タイミングの調整ができない。
特定アニメーションを含んだコンポを、インポイントをずらして設置して、再生速度はタイムリマップ入れて微調整!
…ってことは、できないofできない。

その代わりに使うのが『アクション』&『スマートボーン』。
個人的にはこの機能が一番ヤベェと思っている。
アクションごとのタイムラインは孤立していて、アクション各々にコンポのアニメーション設定ができる感じ。
作ったアクションを別のアクションにそのまま読み込ませて再生させることも可能。
さらに、このアクションにスマートボーンを紐づける、ということも可能。
スマートボーンは、回転角度=紐づけたアクションのタイムラインの再生位置、で…
別のアクションの中のスマートボーンを回転させると、紐づけたアクションを再生してくれる。
タイムリマップよりも断然直感的。つおい。

じゃあ、同じレイヤーに対してアニメーションを入れたアクション2つを、スマートボーンを使って再生したらどうなるのか。
なんとまあ、イイ感じにアニメーションをマージしてくれる。
今回だと、歩きのアクション中に、瞳の動き、瞬き、首振りのアクションのスマートボーンを操作してみてる。
歩きには体の揺れとかも入ってるけど、その辺も含めて全部マージされる。
立体っぽい動きもこれで表現できる。
なんやこれ…動作差分作り放題やないか…


あとはキーフレームだけども、ここについてはAEほどの自由度はない印象。
補間方法として、スムーズ、リニア、イーズイン、イーズアウトとかは設定できるけど、AEみたいにグラフエディターで速度を調整、みたいなことはできなさげ。
数値直打ちでの微調整もできないし、エクスプレッションも当然ない。
とはいえ、ループの設定は一応キーフレームに対してできて、次のキーフレームがくるまで指定した範囲のキーフレームをループ再生してくれる。
ただ、ループした瞬間の補間が効かない(そもそも補間とループの設定が同列扱い)ので、カクつくのがすっげー気になる。
今回は、足を下した瞬間の体の揺れでごまかしたけど、こんな苦労をするぐらいならループ設定を使わず、キーフレームコピペ乱打してやろうかと思ってしまうレベル。

その他、一応スクリプトも対応はしてるみたい。言語はLua。
Luaのコードはお遊びで買ったCodeaで見たことあるけども、組んだことはないなぁ…
まあJavaScriptと比べれば…いや、どっこいどっこいかな…ww


【Mohoから吐き出したsvgを魔改造したった】

mp4とかaviとかgifで出力できるのは、わかる。
しっかしsvg(サイトで表示できるベクタ形式画像)で出力できるとか…マジかよ…
やろうと思ったらサイト上で好きに配置&配色&変形できるし、JavaScriptで再生フレームいじれるんちゃうん…?
ってことで、実際にやってみた。

何パターンか試したけど…
つい昨日モンストにハブられかけた(強制終了バグ出ましたが何か?今日は無事)
Android4.4のブラウザでもそれなりに動作するのはこれっぽい。
20MBぐらいあるから気をつけろ!
http://dmrb.nobody.jp/walk/walk.html


で。
今回は260フレームってことで260個のsvgが出力された。
全部合わせて24MBでーす!ってゲロ重いわやめてくれww
いや、初回はもっと重かったんだけど、レイヤー名がそのまま出力されるから日本語から英語にしたり、今回は塗り設定だけで十分だから線を非表示にしたりしてケチった。

svgの中身を見てみる。
律儀に全ファイルにxml宣言とDOCTYPE宣言、svgのバージョンと名前空間宣言が入ってるのは、まあ分かる。
が。
いくらクラス名の衝突のリスクがあるとはいえ、各パスにデザインの属性を片っ端から付与するのはさすがにやめてくれ…
fill="none" stroke="#a60d3f" stroke-width="1" stroke-linecap="butt" stroke-linejoin="round"
ってだけで文字数どんだけあると思っとんねん…
ということで、さすがにクラス&CSSでの指定に移行させたい。
あと、パスそのものの情報も一部空白を取っ払えそう。

いや、それより一番の問題は…
実際にsvgを表示したときに、設定していた一部のマスクが効いてない。
詳しく差分データを用意してタグを解読していくと…
どうやら、マスク設定を有効にしたグループ内にグループを入れ子で置いた場合、マスク設定が出力されない模様。
mp4で出力したときは問題なかったし、Moho側のバグっぽい。

オマケにタグをよく見ると、表示しているパスをそのままマスクとしても流用する設定を入れていた場合、内容が全く同じパスを表示用とマスク用として出力していることが発覚。
どうにかならんかとsvgの仕様を調べたところ、useタグを使うことでパス情報の使いまわしができることが発覚。
どうにかしてuseタグに移行させたい。


とにかく。
出力したsvgの内容がめっちゃ不服。どうにかしたい。
AEだったら速攻でスクリプト書いてただろうけど、今回はMoho。
今回のケースに留まらず、ローカルファイルをいじるという意味では、もうちょっと汎用的で楽な手段が欲しいところでもある。
Ruby on Railsも勉強したことだし…
ということで、Rubyでsvgタグをいじるプログラムを組むことにした。

マスクの設定が出力できてないレイヤーの名前に識別用の名前を付けてsvgを出力しなおす。
で、svgをRubyで読み込んで、その名前を見つけたら、マスクの設定を自動で付与。
マスクのパスが使いまわせそうだったらuseタグで参照するようにした。
あと、無くても動くからxml宣言とDOCTYPE宣言をごっそり削除。
デザインの属性も一旦ハッシュに登録して、同内容の設定だったら同じクラス名を付与。
全部パス走査し終わったらハッシュの中身を確認して、styleタグにクラス名とCSSを出力した。

他に、1個のファイルにする実験もやってみたんだけど、それだと今度はファイル1個が重すぎる問題が発生。
自分が使ってるレンタルサーバーはアップロードできるファイル1個の最大サイズは3MB。1個で20MBなんて論外of論外。
試しに3MB未満になるように適当に10個ほどに分割してみたけど…
オレのAndroidじゃキャッシュがうまく動かないのか、全く表示できず。
結局、最終版は260個のままなのであった。


あとはアニメーション。
svgファイルは各々1個で完結した静止画なので、html上ではこれをJavaScriptでパラパラ漫画の如く再生(切り替え)させる。
これ自体はよくあるimgタグの切り替え処理みたいなもんで、そんなに難しいことではないんだけども…
問題はロード時間と処理速度。ということで、読み込み方法あれこれ試した。

愚直なのは、htmlに最初から全フレームのimgタグを非表示設定付きで置いとくパターン。
JavaScriptで後から必要数分のimgタグをぶち込む汎用的な方法もあるけど、速度で言えば前者の方が早い。
先に結論をいっちゃうと、試した中でこれが最強だったよ(爆)
それでもオレのAndroidだと表示までに30秒ぐらい待たされるし、なぜか未だに1フレーム目だけ表示時のリサイズ処理が走らないんだけどね。なんだろね?

次にやったのは、読み込むファイルが多いからいけないんだ!的な発想で、最早別ファイルを読み込まない、svgをhtmlに埋め込むパターン。
「svgファイルを1個にしたら20MBになった」っていってんのに、それをhtmlに埋め込むってことはだな…まあアップロードできないわな。
一応GitHubの方で無理矢理試したけど、オレのAndroidはロードが終わらないどころか、ブラウザが死んだよ(爆)

さらに、ajaxを使って後でがっつりリクエスト&ロードするパターン。
動かなくもないけど…オレのAndroidは1分ぐらい待たされた。うん。


あと別件で、imgタグじゃなくuseタグを使った表示もやってみた。
埋め込み式(ゲロ重htmlかajax)じゃないとダメなんだけど、一応表示&アニメーションはできた。
ファイルパスの指定を省略できるし、ファイルアクセス的には早くなるかな?と思ったけど、速度の体感差は皆無だったね…
まあそういう方法もあると知れただけでもOKとしましょう。


報告は以上。

拍手

課題で作ったサイト公開した近況報告

オレだよオレオレ。
…誰?
ってぐらい最近更新してないね。
えいりあんだもの仕方ないね。

近況報告ぅ~!はいっつもニコ生でしてるから、総括プラスアルファって感じ。


【オンライン学習終了】

TechAcademy
のWebアプリ・フロントエンド・Webデザインセットコース、全6ヶ月が9月2日に終了。
暴走してメンターの方々にかなり迷惑かけた感あるね…はっはっは…

で。
各コース2か月ずつだったわけだけど、全コースとも最終課題はオリジナルサービス・オリジナルサイトの作成だったもんで…
毎回新しいの考えるのもなんだったから、全コースとも1つのオリジナルサービス開発を最終課題として提出したった(酷い
課題合格して日程も終了した後、ドメイン取得とか、実装しそびれてる機能の実装とか、デバッグとか、チクチクやって、つい3日ほど前にやっと落ち着いたかなー?ってところ。


ブツはこれ。
Imaginnection

アカウント登録には要メアドだけども、登録済みのアカウントの投稿は設定次第で公開できる。
ということでオレの、いわゆる公式アカウントの投稿は↓こっち。
いまねくの投稿

どうやって触んの?ってのは…一応登録直後にガイドが出るようにもしてるけど…過去放送が参考になるかもならないかも。
2018/09/15放送分



そのうちニコ生で視聴者参加型投稿大会ゴッコしたいねww


・どういうサービス?
とりあえず「単語連想サービス」と名乗ってる。

単語から連想した単語を投稿していき、同じ連想をした人たちを「共感者」という扱いで一覧表示する。
投稿内容はマップという形で画面に反映され、他人をフォローをすると、その人の投稿も一緒に自分の画面に反映されるようになる。
画面下のツイッターボタンを押すとツイッターでマップを共有できる。
と言った感じ。

オプションで
共感者一覧での名前非公開(人数カウントだけされる)、
自分のマップの非公開(他人からマップを閲覧・共有できなくする)、
新規フォロー受付停止(他人からフォローされなくなる)といった設定もできる。


・どう使うもん?
「どうとでも使ってくれ」とは思うのだけど…
ラフに言えば連想ゲーム的に使ってもらってもいいし。
ガチで言えば、ブレインストーミングとかマインドマップみたいな使い方もできるかと。

今はまだまだ人が少ないから微妙だけど…
ある程度人が増えたら、共感者一覧から同じような発想の人を見つけて「わかるわぁー(共感&フォロー)」ってやっていってもいいし。

自分が一番いいなと思ったのは…「発想の発展形を見れる」ってところかな。
登録ユーザーが少ない現時点でも、各々性格が出てるなーとしみじみ思う。
その人の好きなものはもちろん、その人自身の世界観みたいなものが見えてくる。
「同じ単語でもこれだけセンスを感じるもんなのか」「こういう発想いいな」とさえ思う。
それだけでも楽しい。

一応URLベースで共有できるようにはしてるわけだし、自己紹介代わりに自分のマップのURLを張っておいても面白いかもしれない。

尚、メンターさんには「出会い系サービスに発展できそう!」とは言われた。
その発想はなかったwwなるほどwwwってなった。


・どうやって作ったん?
くっそややこしいし説明も面倒なのでこっち参考にして(をい)
2018/09/29放送分




【気になって読んだ本の話】

ツイッターでふと見かけて、なんとなく調べて、なんとなくで電子書籍版を購入し、勢いで読み切ってしまった本がこれ。

小さなチーム、大きな仕事 働き方の新しいスタンダード (ハヤカワ文庫NF) ジェイソン フリード

読み終わってから知ったんだけども、どうやらRailsを開発した人が書いた本らしい。
一応基本は、少人数で新しい企画や企業を立ち上げようとしている人向け、って感じ。
効率を上げつつ、物事に柔軟に対応していくためには…どうあるべきか…実例は…といった具体的なところの話もあるけども、ベースが精神論的な部分で書かれてて、そこが結構的を射てるなぁと思った。

見栄を張らず、背伸びせず、周りの言うことに振り回されず、適切な規模感で、無理せず考え、行動するために…と言った感じ。
世の中によく転がってる言葉の中身のなさを実感するね…ww

今のオレはニートで、だらだらしながらこういう本を読めるからこそ、そう感じるんだろうなぁ。
働いてるときにこれ読んでたらきっと「それができる状態でも立場でもねぇんだよ」としか思わないかもしれないなぁ…ww



今回の近況報告はこんなもんかな。
まあまたチクチク更新していきまっしょい。
以上。

拍手

プログラマっぽいかもしれない近況報告


やあ。オレだよオレオレ。
変人だよ。ちょっぴり久々?

近況報告しましょうね。
はい。


【オンライン学習3分の1終了】

TechAcademy

Webアプリ・フロントエンド・Webデザインセットコース、
全6ヶ月のうち2ヶ月(Webアプリコース)が終了。

WebアプリのメインはRuby on Railsなんだけど、
メンターさん(要は講師。フリーランスの人)にわがまま言って
寄り道しまくり…ってか脱線しまくってしまったわ。
まあ具体的に言うとだな…


・ローカル開発環境構築

学習では基本的にAWS(アマゾンウェブサービス)
のCloud9ってヤツを使ってやる。
要はブラウザで動く総合開発環境。
必要そうなものがすでにインストール済みの
Linuxをブラウザ経由で操作する感じ。
つまりローカルでのインストールなどが不要。
しかもマジの使用時間単位で1年間のみ無料。

初心者には優しい。間違いない。
しかしオレは自力でできないとクソ不安になる
石橋を叩いて壊すタイプ(ド迷惑)なので
初日真っ先にローカル開発環境の構築方法を
メンターさんに聞いたのだった…(酷)

実際にやったことはWindowsにVagrantをぶち込んで
Linuxを仮想マシンとして起動して
必要なもの(RailsやMySQLなど)のインストール、
githubからcloneしてきたブツが動くか確認、ってところかな。

あくまでVagrantで起動させただけではあるけども、
そこまでいけばコーディング周りはWindows側で
どうとでもしてやらぁな!と思っている(死亡フラグ)


・テストの実装

最初の2週間ぐらいでカリキュラムを一通りやってしまった。
が、テストについて触れられてなかったので、
テストの実装方法について聞いたわけだ。

で。教えて頂いたものがこちら。
Everyday Rails - RSpecによるRailsテスト入門
RailsにデフォでついてるMinitestよりも
RSpec使った方が便利やでぇ!ということで。
即日購読。

個人的にはちょーどいい難易度で読みやすかったね。
ただ、Cloud9でjsを使ったフィーチャーテストが
できなかったりしたので(Chromeのインスコがなぁ…)
網羅まではできず。

で、コース最終課題のオリジナルサービス開発にあたり、
設計したモデルのテストだけ自力実装してみた。
んー。役割分担かおす(ダメじゃん)


・その他もろもろ

あとは細々とした便利ツール(gem)を紹介してもらったり、
Ajax経由で既存ページの更新がかけれる方法を教えてもらったり、
後々のコースで触る予定のsassをRailsで使う場合の話を聞いたり、
結局カリキュラムガン無視でログインシステムをDeviseってgemで
実装しかけてる状態だから、そこについて聞いたりなんかして…
「オイ初心者無駄に背伸びすんな!」って自分で思う(遠い目)


んで今日。
ぼちぼちオリジナルサービスの開発を切り上げて、
次のフロントエンドコースのカリキュラムをやっていこうかな?
ってところ。
一応作ってるサービスはやっと基本機能の実装が終わった。
後々のコースの内容と組み合わせて表示面を実装しようと思ってる。
Webアプリのメンターさんにド感謝。
ありがとうございました…!
それっぽくなったらコンテストに出すなり公開するなり考えます。
それっぽくなったらね!!



【pixivFANBOXができてしまった】

んー…なんかね…「一般会員も登録できるようになったよ!」って
話題になったタイミングでね…どんな感じかなぁーってポチッてたら
できちゃったから…うん…まあ…晒しとく。
kuryu[pixivFANBOX]
名前がkuryuになってるけど、旧HNってヤツです。えぇ…



【iPad買った】

これまたちょっぴり前に話題になった新型iPad。
前からiPad気になっててオススメもされてたんだけど、
値段とか用途とか管理とかピンとなくてスルーしてたのよね…

で、そんなときにたまたま新型が出た挙句、
一番安いので32GBの37,800円、ApplePencilに対応ときたもんだ。
iPad Proほどのスペックはいらないし、
CellularじゃなくてもWi-Fi使えれば十分だし?
キーボードも買っておけば大概のことはできるっしょ?
と、言うことで…

128GBのWi-Fiモデル:48,800円
Bluetoothキーボード:12,800円
ApplePencil:10,800円
消費税込みで計78,192円なーりー。

とはいえ、他に保護シートとかペンのカバーとか
買ったから実際はもうちょいかかってるけど…
まあiPad Proの一番安いのでも1台69,800円だし、
備品足しても10万超えてないし、まあ妥当かな?

使ってる感想としては…


・機能制限できる範囲ヤベェ

大学時代にMacBook持ってたぐらいで
久々にApple製品を所有するわけだけども…
まあ…すごいね。
各アプリに許可する機能の微調整めっちゃできる。


・アポペンいいね

あと地味にお高いApplePencil、描き心地非常にいいね。
元々どっちかってと板タブ族なんだけど、
保護シートをペーパーライクにしたこともあって、
違和感なくガリガリできる。
メモアプリでもガリガリできるけど、
別途無料のibisPaintってヤツを入れてみた。
今のところ不満なし、かな。


・Codea入れてみた

1,800円の有料アプリ。ぶっちゃけ開発環境。言語はLua。
評価高いみたいだし、見た感じも面白そうだし、
ちょっと手出してみるかーってことで購入。

これね。大当たりだったわ。めっちゃいい。
まだまともに開発らしいことしてないんだけど、
サンプルだけでクソ楽しいし、遊べる。

基本機能の使い方がサンプルを見れば大体分かるし、
サンプルの中にマジのゲームが紛れ込んでて、
そのコードをいじればゲーム改造できるだけでなく、
普通にそのゲームが面白い。

しかも話によれば、本気を出すと
開発したアプリをそのままリリースできるんだとか。
ちなみに面白いっつってたサンプルのゲーム、
Cargo-Botってヤツなんだけど、無料で配信してるっぽい。
マジでリリースしてる。何それヤバイ。夢がひろがりんぐ。
iPadぱねぇ。



ってなところで。
まあ近況報告としてはこんなもんかな?
以上!
えんどおぶきんきょうほうこく。

拍手