thumb

関連記事

デフォルト画像
2018.08.22
ムームードメインのデザインがリニューアルしてた

中途半端すぎない? 気づいたらムームードメインのデザインが変化していました。 どうやら今月の20日にイメチェンが完了した模様。 トップページとかを見てみると、なるほど今風なデザインになっています。 が、ものっそい中途半端。 具体的に言うと「80%リデザイン、20%そのまま」って感じのデザイン。 中途半端さの理由 サラーっと目を通すと、フラットデザイン的な緑をベースカラーとして、細かい部分で青を使ってるといったところでしょうか? 要素と要素の間に大きくマージンを取ってる辺りも、今風な雰囲気を感じます。 しかし問題は中に入ってから。 前までのままで、要素をそのまま使ってる箇所が大量にあるんですよね。 例えばここ。 https://muumuu-domain.com/?mode=bulk 「一括取得の流れ」とかをそのまま引っ張ってきちゃってる。 ドメイン移管の説明ページとかも恐らく前までのものを利用しています。 特に酷いのはコントロールパネル。 リデザインするならここがメインじゃろがい!と思ってしまいますが、一切変化なし。 背景取っ払ってヘッダーとフッターを差し替えてるだけです。 これの何が問題かと言えば、全体的にフラットな雰囲気で作成してる中にweb2.0時代のボタンとかが混ざってしまっているのが問題ですかね。 デザインとしてごちゃまぜになってて統一感が失われてるんですよ。 GMOという大企業が、この中途半端なデザインで「リニューアルしました!」とお知らせしてる辺り中々にキテるなと思います。 どうしてこうなった?どうしてこうなった!? なんででしょうね。 普通に考えたら ①デザインが納期に間に合わなかった ②コーディングが公表までに間に合わなかった ③最初からこのつもりだった ③は論外だと思いたいところ。 webの商売でこれとか面白い冗談言うね君って感じです。 ①②は…よくないけどまあしゃあねえな! 大方外注する費用(もしくは時間)がなくて内製してたけど限界があったからそのままにした感じでしょうか。 まあムームー的にはロゴの新調がメインで、そのロゴに合ったデザインがある程度できてれば良いという考えだったんでしょうかねえ? よくわかりませんけど、見た目が余計にダサいのでなんとかしてくれませんかね。 お名前.comだってあんな(使いづらいシステムに)変化を遂げたんですから。 ぼくがクライアントなら普通にブチギレ案件ですけど内製でしょうし問題ないんでしょう。 多分そのうち内側も全部変えるんでしょ? 知らんけど。 それでは今日はここらでサヨウナラー

2019.12.19
iosも無事エターナルタワー開幕 #pso2es

Appleの不手際らしい https://twitter.com/sega_pso2es/status/1207263997684146176 公式の情報もそうですが、他のアプリでもアップデート配信が遅れていて色々と影響が出ていた模様。pso2esも例にもれずしてやられてたみたいです。有名所だとぷよクエとかがめちゃくちゃ待たされたとかなんとか。 これだからAppleってやつはいけ好かねえんだ!!!(自分もiPhone) 無事開幕 それはさておき、本日明朝にios版のアップデートも無事配信されました。おかげでエターナルタワーを開幕させることができましたとさ。 仕事が妙に長引いたりデュエプレが始まったりと色々あった関係であまりできていませんが、とりあえず第2層までは終わりました。エターナルタワーのほうは基本的に簡単なステージばかりだと思うので、さっさと終わらせたい所…。 今回のエタワ、悲しいことにサイカ・ヒョウリじゃなくなってました。でもカザミノタチなのでどっちにせよエタワ限定で最大1110%。正直アビリティMAXとか地獄でしかないので多分そこまで頑張りませんが。レベル9くらいまで上げれば他の☆13と同じ性能になるとかなんとか。 というわけで今回の目標はカザミアビ9ということで。 よろしくおねがいたします。

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