初FE FE警察だ！（ふぁいあーえんぶれむ） リシテアちゃんかわいいやったー！って思いながら帝国ルートしてたんですけど、気づいたら女帝のモノになってました。 おや？ じゃ、2周目はじめます。次はリシテアちゃんがウチの子になるんだゾ（キモ面）

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　 →　重すぎ、一番綺麗にできるけど負荷が半端ないので現実的じゃない っていう問題児なので、もし省略を誰かに頼むときは 「なんかこう、下のほうがグラデーションで消えてく感じで省略してほしい」 って頼みましょう。 下白のグラデ掛けるだけでなんとかなるので作るほうとしては非常に楽です。 あとこれは個人的な意見ですが、見栄えが「...」よりもグラデでスッと消えたほうがいいと思います。 それでは今日はここらでサヨウナラー

以前作成したM3のサークル並べてチェックするやつ、次回春M3までに改造します。ていうかあのまま使いたくない。使いたくなくない？ 改造計画事項 １．デザイン一新 デザインに大幅な変更を加えます。具体的には、「ウェブアプリっぽく」します。 ひとまずワイヤーフレームだけ適当に書きました。中のコンテンツは特にまだ考えてないので、現状のものをそのまま入れてるだけです。現状のものだと右下にメニュー開閉ボタンがあるんですけど、開いた後もクソダサいんですよね。流石にこれは不味いなってことで、WEBアプリを意識してデザイン組み直します。 とりあえず、世の中のWEBアプリとかウチで作ってるシステムのデザイン見まくって大体の構成練る感じですかね。とはいえ、おおまかな部分はさっき見せたあのワイヤーっぽいのにするので、後は中身のコンテンツをどうするかってぐらいですけど。 配色に関しては絶望的にセンスがないというか、勉強不足なのでそれっぽいものを置いてるだけです。M3のキーカラーとかあればいいんですけど、見た感じそういうのもないっぽいので適当に配置します。 ２．システム追加 ひとまず考えてるものは以下のもの。 ・一覧表示・チェック済みのサークル数を数える 相変わらずウェブストレージでやりますが、多分このぐらいならできるはず。例のごとく、PCが変わったりブラウザが変わったり、万が一ストレージの内容がぶっ飛んだらデータは消えます。可能ならエクスポートする機能とか付けたいんですけど、非常に面倒そうだし実装してもどうせ使わなさそうなのでやりません。 ３．システム変更 指定のエリアを表示する機能が一応あるんですが、なんかダセえので変えます。具体的には、セレクトボックスから選択できるようにするか、それ以外の方法を考える予定です。それ以外だと…ボタンをクリック・タップしたらリスト表示されるとかですかね。 わかんね。 以上 これ以上やるともうわけわかめになるのでやりません。余裕があればなんか追加するってことで。 今回のデザイン一新とかは、今後なにかを増やそうとしたときとかに増やしやすいようなデザインにするという意味もあります。なので、サイドメニューという形にはしますが、メニュー内コンテンツはほぼなしな状態になります。仕方ない。 実は残り１ヶ月半もないわけですが、まだ公式のサークルリストも出てないので多分大丈夫だと思います。多分間に合う、間に合うと信じたい。 ぼく頑張るよ。