秋M3の気になるサークルリストできた!!!!

イエーイめーっちゃ疲労感

ぼくのM3チェックリスト http://event.saikofall.com/m3/2018-autumn/

数日かけて作りました、チェックリストです。 まさかここまで時間が掛かるとは思いませんでした。

先日カタログを買って、まだ1週間あるし余裕やろと思ってたんですが、思いの外手強い。 全サークルをチェックしてたのが原因なんですけど。 だけどそのおかげでしっかり見れたゾ!

今回の事前調査では26のサークルに当たりをつけました。 当日はガンガン狙っていきますよ~~~~。 まだ行く順番とかは決めてないです。

通販とかデジタルで良いのでは!?と最初は思ったんですが、結局行きたくなるんですよねぇ。 定期的にこの手のイベント(即売会)は行きたくなるからしょうがないです。 そもそもほとんど現場の雰囲気を味わうために行ってる節がありますね。 しょうがない。

サークルリスト

リンクで上げてますが、今回はちょっと頑張りました。 最近流行りだって会社で聞いたのでUIkitを利用しています。 英語で書かれたコンポーネントを見ながら作るのは結構手間やんな…。 それでも簡単にカードタイプのリストを作れたので上々なんですが。

ドメインはこのブログに使ってるやつをサブドメイン切って使ってます。 新規取得したり、どっかのサーバーの初期ドメインはあまり考えたくなかったので。 別にWordpress入れて管理するわけでもないのでいいかなーと。

リストの生成にはjsonを使っています。 jsonに記述した要素をjsで引っ張ってきて出力してるって感じ。 なので実はHTMLのファイルはほとんど記述がなかったりします。 リストは全部jsで出力してるからですね。 とても便利。 正直わかる人ならWordpressとか必要ないってことになりますね。 まあ大規模なものはまた別ですが。

というこって、なんだかんだであまり利用したことのない技術を使ってるわけですよ。 主にjsonとUIkitらへん。 前者は会社で使うこともありますが、UIkitは趣味の範囲内のものですね。 なんでかって? この手のはそれを使う前提でデザイン起こしてもらう必要があるからだよ!!! 基本的に自由度が失われるので、ちゃんとデザインも各コンポーネントに沿って作ってもらう必要があるんですよね。

といった感じで作りましたが、実はまだ完成形ではありません。 なぜかと言えば、このままだとスマホでは見づらいからです。 カード型の弱点だと思ってます。

現在実装中の機能としては、ページ右上にあるアイコンですね。 これを押すと「リスト型」と「カード型」に切り替えができるって寸法です。 jQueryでゴリゴリ開発中です。 ぶっちゃけそんなプログラム部分は終わってるんですが、リスト型のデザインで手間取ってる感じです。 実はjs部分は終わってたりして。

目標は明日の終わりぐらいには作り終わってるってところです。 そうしないと間に合わないからね。

当日はこれと紙とスマホに保存したチェックリストを臨機応変で使っていくことになります。 楽しむぞ。

それでは今日はここらでサヨウナラー

関連記事

デフォルト画像
2018.10.27
東京行きます

M3にレッツラゴー 23時05分のバスに乗り、M3へと参ります。 帰宅はなんと明日の午後8時予定という強行スケジュール。 まあいつものことなんですけど。 到着は朝5時なので、なにかしらで時間を潰す必要があるんですね。 列が形成されるのは大体8時半とかそんくらいなので。 何してりゃいいんですかね…。 ギリギリまでチェックページを改修してたりしたのでもうこんな時間です。 あと2時間切りました、ていうかとっくに切っています。 でもおかげで良い出来になったと思いますよ! 昨日と今日はページ眺めてニヤニヤしてました。 ぼくのM3チェックリスト http://event.saikofall.com/m3/2018-autumn/ 公開してからやったことと言えば、とうとうMAP機能を追加したりしましたよ。 とはいっても、自分の手でひとつひとつポイント打った地図を表示させてるだけなんですけど。 あと、スマホで見やすいようにテーブル表示にする機能も実装。 これで当日もスマホで確認することが可能となりました。 コミケは地図アプリが充実してますけど、こういうイベントだと使いづらいんですよね。 仕方ないっちゃ仕方ないんですが、規模が違うし。 これから当分、イベントでは今回作ったjsonによる管理サイトを使いたいと思っています。 Wordpressを使わない理由? ページが重くなるからに決まってるだろ。 とても暇なので、多分終了後もインフォメーションページ作ったりすると思います。 そうしたほうが追加したときにページ遷移が楽ですからね。 URL直打ちとかクソ雑魚すぎる。 それはともかくとして、M3行ってきます。 夏コミでは結局やらなかったんですが、なんとかして戦利品ページ作ります。 多分。 ではいってきます。 それでは今日はここらでサヨウナラー

デフォルト画像
2018.11.30
複数行の文末3点リーダー省略「line-clamp」で省略がされないバグ

line-clamp 仕事で憤慨したので珍しく技術エントリです。 世の中のニュースサイトとかブログサイトでは、度々「文末省略」が用いられます。 ググればいくらでも出てくる、text-overflowとかのことです。 これを使えば文末に3点リーダーを持ってきて、文章を省略することができます。 1行ならな! 2行以上になると、また別のプロパティを用いる必要が出てきます。 それが「line-clamp」。 -webkit-line-clamp: 3; ってのとそれ専用のプロパティを指定してあげると、line-clampの数の行で3点リーダー省略してくれます。 超有能。 しかしやはり制約はつきもので、webkit系ということもあってかIEやFirefox(?)などでは使えません (火狐は違ったかも) それに正直使用は推奨しないのがこれのビッグ・問題点です。 なぜならおそらくは今後制定されることのないプロパティだからー! ほぼ仕様版的な感じで、なおかつもう開発されることはないと思ったほうがいいです。 なので人間ならおとなしくPHPとかJSで区切るようにしましょう。 どっちもある程度の制約もありますが、ちゃんとプログラムでやったほうがいいよ。 【本題】line-clampで区切れない場合がある まずはこちらをご覧ください。 See the Pen line-clampで区切れない場合があることの説明 by 【LIGHT WINGER】 saiko (@saikofall-the-typescripter) on CodePen. このコードを簡単に説明すると ・メニューの切り替えタブと、中身のタブがある ・タブ1/2/3をクリックすると、対応した中身タブの表示が切り替わる っていうだけのものです。 使い道としては、ちゃんとデザインすればタブ切り替えメニューになったりします。 最近だとサイドバーに表示するミニランキングとかそういうの? さてここで本題、見りゃわかるんですが、タブ2をクリックして表示させますと、なぜかline-clampが効いてない状態でタブが表示されます。 もちろん、3つのタブすべてに同じcssを適用しており、理想の表示としてはタブ1のようになるものとします。 で、これを調べてたのですが、どうもwebkit系特有のバグ?だそうですね。 というわけで下記の2ページを参照。 マルチラインのラインクランプ(省略記号)は、私は、H3タグにこのクラスを適用 -webkit-line-clamp is not respected when visibility is hidden どちらも英語ページですが(上のは無理くり日本語翻訳されたもの)、言ってることはひとつです。 どうやら、line-clampは再描画?が上手くされないらしいです。 今回上のメニュー切り替えでは、隠れているものには「visibility:hidden」が設定されています。 それを切り替えタブクリックでvisibleにしているわけですね。 ですのでレンダリング時点でvisibleがhiddenしてるってのが原因だそうです。 これはwebkitのバグとして認められているのでどうしようもありません。 諦めろん。 ただし、解決策がないわけではなく、その要素を「hide().show()」とかで再描画すると直ります。 だから開発者ツールでline-clampを付けたり消したりするとなぜか直るっていう現象が起こったりするわけですが。 やってはないんですが、もしかしたらvisibilityじゃなくてdisplay:noneとかなら影響が出ないかもしれませんね。 アレも多分再描画だし。 でも色々とcssの動きが面倒になるのでやっぱりhideとshowとかで再描画させてあげたほうが楽かも? クソ雑魚js使いなので正直正しいかもわからんっす。 ぐち ぼく思うんですけど、そもそも3点リーダーの省略やめようぜって。 だってアレ面倒なだけじゃないですか。 css → できないのとできるのが多すぎ、そもそも制約デカすぎ php → 文字数制限があって日本語だと微妙、バイト制限でやっても結局多少のズレは発生する js  → 重すぎ、一番綺麗にできるけど負荷が半端ないので現実的じゃない っていう問題児なので、もし省略を誰かに頼むときは 「なんかこう、下のほうがグラデーションで消えてく感じで省略してほしい」 って頼みましょう。 下白のグラデ掛けるだけでなんとかなるので作るほうとしては非常に楽です。 あとこれは個人的な意見ですが、見栄えが「...」よりもグラデでスッと消えたほうがいいと思います。 それでは今日はここらでサヨウナラー

2021.02.09
ファンタジーサバイバル「Valheim」をやろう!

オープンワールドは好きですか? 休日、何気なくSteamを探訪していたら新作のゲームを発見。その名も「Valheim」! まーたオープンワールドだよ。死ぬほどあるからね、この手のゲーム。 バイキングっぽい見た目で、神々の世界みたいなワールドを探索するオープンワールドゲーム…。いつものやつじゃねーか!と思いながら即ポチ。 今月にリリースしたばかりの新作で、アーリーアクセス2000円この程度ならお買い得と思って何も考えずに買ってしまうのが悪い癖です。だから貯金も0なんだよな。 それはさておき、このValheim、容量がまさかの1GBしかないという挑戦っぷり。むしろどこに容量割いてんだよってぐらいちゃんとグラフィックもそれなりなんですが、どうなってるんでしょうかね。 とはいえ、美麗グラを堪能するゲームではないので、そこに期待してもしょうがないです。 夜はマジで暗いけど、空にある謎の世界樹みたいなのは好き…。 まだゲームプレイ時間3時間程度なのでなんとも言えない所ですが、割と楽しいです。近頃プレイしてたオープンワールド系は敵と戦うようなものでもなかったので、槍作ったり弓作ったりで戦闘の準備をするのが本当に楽しい。やっぱり殺しあってこそのオープンワールドなんだよな。 公式も推奨してますが、マルチプレイをしたほうが良いです。ぼくは友人とやってますが、ソロで…まあソロでできない難易度でもないけどもにょる。別にソロでも楽しいと思いますよ(小声) まだアーリーアクセスなのでほとんど要素もないでしょうが、一応ロードマップは既に提示されている模様です。今年だけでも第一弾から第四弾まで予定されているので、大体春夏秋冬で更新していく感じになるんですかね。結構期待が持てる新作だと思っています。 紹介できるようなことも特にないですが、皆もValheimやろうな!バイキングになってゴブリンみてえな連中を殺してやろうや!