開発環境の大幅な刷新が必要性はわかるけれども(しんどい)

倒れるプログラムのキャラクター

パートタイムなエンジニアとして復帰してから早くも1年と8ヶ月が経ちました。早いなあ。始めの1年2ヶ月は前任者であり技術部門の責任者であったAさんの部下として、Aさん退職後の6ヶ月間は責任者代理として仕事をしてきましたが、開発環境を変えるというのは楽しいけれどしんどいですね。自分の趣味であれば新しい技術に対しては楽しさ100で接することが出来るんですけど、業務でってことになると学習コストがそのまま納期へのプレッシャーとなっていくので、なかなか楽しんでばかりもいられない。ただでさえ歳取って新しいことが入って来にくくなってるので、若い頃よりもさらに学習コストが掛かる。きついなー。

続きを読む

Laravel + Bootstrap4でレスポンシブ・フォントサイズ(Responsive font sizes/rfs)を有効にする【#np2020】

Bootstrap.jpg Bootstrap v4.3から、デバイスやビューポートのサイズに合わせてフォントサイズを変更することが出来る「レスポンシブ・フォントサイズ」に対応しています。ドキュメントを読むと、

RFSは、 $enable-respond-font-sizes Sass変数を true に変更してBootstrapを再コンパイルすることで有効になる
と書いてあります。 Laravelの場合、Bootstrapのソースコードはnode_modulesディレクトリ以下にあり、そこに設定ファイルもあるのですが、このディレクトリはレポジトリに登録されていないために環境によってかわることがあるし、Nodeのトラブルを解決する為に削除→再インストールをされることもあるディレクトリです。なので、ここの設定を変更してもあんまり意味がありません。 ていうかそもそも「laravel/node_modules/bootstrap/scss/vendor/_rfs.scss」では、
// Disable RFS by setting $enable-responsive-font-sizes to false
$enable-responsive-font-sizes: true !default;
となっていて最初から有効になってます。そうなのねー

続きを読む

SCSSコンパイル時に「Incompatible units rem and px」エラー【#np2020】

npmのサムネイル画像 以下の構成をコンパイルしようとしたときに

├ resouces
│    ├ _variables.scss
│    └ app.scss
└ public
└ app.css 
次の様なエラーが出ました。
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
^
Incompatible units rem and px.
最初何のことだかさっぱりわからなかったのですが、これ要するに、
数式に含まれている要素の単位は同じじゃないとダメだよ
ということなんですね。 ソースを見返してみると「_variables.scss」の中で「$font-size-base 」が「px」で指定されていましたが、ここはBootstrap4が使っている部分なので「rem」で指定しないといけません。 というわけで「14px」を「0.9rem」に変換して再度コンパイルしたら無事成功。なるほど。

続きを読む

サイボウズLiveの「タイムライン」が邪魔なのでCSSを適用して非表示にする

25_01.jpg パートタイム・エンジニアの職場で、情報共有のために「サイボウズLive」というサービスを使っています。外部サービスとの連携はなく、割と独立した設計であり、UI設計も含めて正直使いやすいとは言えないのですが、まあ僕が入ったときから使ってて改めて他の探してきて提案するのも面倒なので、使っています。業務連絡が投稿されたとき以外、ほぼ見てませんけど。 で、その「サイボウズLive」にて、去年の11月に「タイムライン」という機能が追加されました。 タイムライン機能を追加しました | チームのためのスマホアプリ サイボウズLive サービス全体の更新情報が、トップページで確認出来ますよという話なのですが、これが……微妙に邪魔。一番上に、画像を転載させてもらっていますが、この右側のフレームが「タイムライン」です。これ、可動式じゃないんです。ここに固定。しかも、幅固定。なので、ウィンドウ幅を小さくしていくと、一番重要な「メンバーへのお知らせ」の幅がどんどん小さくなっていく一方で、相対的にタイムラインの占める割合は大きくなっていきます。 正直、別に誰がいつどこに投稿したかとか要らないので(そもそも通知で把握出来る程度でしか更新されていないし)、このタイムライン、非表示にしたいけど、どうやらそもそも非表示にする機能すら存在しない様子。「サイボウズLive」のサポート掲示板でも要望が提起されているけど、実装するつもりはないみたい。

タイムライン非表示機能 – 要望詳細 – サイボウズLive IDEABOX

無駄というかユーザビリティを損ねる邪魔な機能ですね。 これほど無意味なものはあまりお見かけすることがないので驚きです。

全くです。

続きを読む

レスポンシブかつグリッドな「Responsive Grid System」 【feedpost tips】

ResponsiveGridSystem.jpg 昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。3回目はサイトデザインを支えるCSS「Responsive Grid System」。その名の通り「Grid System」でありながら「Responsive」であるという特徴を持った……なんだろう、「CSSテンプレート」とでも呼べば良いのかな? その特徴や導入の仕方などについては、以下のサイトを読んでもらえれば大体わかるので気になる方は読んでみてください。

Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋

先日、WEB Designingさんに執筆させてもらったResponsive Grid Systemですが、なんと原稿が出来て入稿し、発売間近くらいのタイミングで仕様変更され、めちゃめちゃ焦ったセナです。皆さんこんにちわ。 さて、というわけで、今日は僕が日頃お世話になっているResponsive Grid Systemの仕様変更に伴い、ちょっとResponsive Grid Systemの使い方をもう一度見なおしてみる目的と、Web Designingさんに執筆させて頂いた内容に現在のバージョンと相違が見られるので、その簡単なご説明をさせて頂ければと思います! 執筆記事の方を楽しみに見て頂いている皆さん「あれ?なんか違うくない?」と混乱させてしまいましたら本気で失礼しました!この記事から最新バージョンの仕様がちょっとでも説明できれば幸いです!

追記では、思い出話しがてら簡単な説明などを。

続きを読む

【メモ】 GridSystemなどのリセットCSSを導入してXdebugが改行されなくなってしまった場合

12_02.jpg ダンプの結果を綺麗に整形して表示してくれるモジュール「Xdebug」はPHP開発の定番ですが、今開発しているサービスであるタイミングから表示が崩れてしまいました。具体的には改行されなくて1行になってしまう(上画像参照)。 PEAR/PECLの変更も行っていたのでサーバの設定の問題だと考えてあれこれいじっても直らず、結果的にはGridSystem導入によるリセットCSSの影響であることが解りました。なんだそれ。

続きを読む

CSSで指定出来る色名

05_02.jpg CSSにおける色の指定はこれまですべて「#ff0000」形式で統一してきました。 理由は、

  • 「色名指定」では柔軟な設定が出来ない(一段階濃くとか)
  • ブラウザに解釈を任せたくない
で、特に設定の柔軟性については、コーディングしている統合環境の補完で「aqua」「black」「brue」などの17色しか表示されないのもそう考える理由の1つになっていました。でも、違うのね、もっとたくさん指定出来る色名あるのね、というのが今回の本題です。いまさらですが知りませんでした。 参考になるサイトはたとえばこちら。 CSS/HTML色見本 全部で140色もの色名が色見本・RGB値と共にリストアップされています。これを見て自分がよく使っていた色が「OrangeRed」とか「DarkRed」で指定出来るんだと解ってちょっと目鱗でした。自分程度の柔軟性なんて、既に設定されている範囲の中でしかなかったです。なんとまあ。 数字を細かく調整して柔軟に設定した色って、後で忘れちゃうことが結構あるんですよね……作業の効率を考えたら「色名」で設定する方のもありかなあと。特にCSSに不慣れな人が参画するプロジェクトにおいては、色を「色名」で指定すると見通しが良くなって良いのではないかなと思います。色コードやRGB値で表示される色を想像しろと言っても厳しいものがありますし。 そんなことを考えて、最近は、文字色や背景色をできる限り「色名」で指定するようにしています。

続きを読む

gistの埋め込みを入れると表示が崩れる件

17_02.jpg ブログにコードの一部だけを載せたいようなとき、githubのgistにアップしてその埋め込みをブログに貼るというのを良くやるのですけど、このところずっとその埋め込みの表示が崩れて難儀してました。 上の画像にあるとおり、

  • スクロールバーが2重に出てしまう
  • コードの一番上に隙間が出来る
  • 行番号とコードの行がずれる
といった感じに崩れてしまって、コードは読めるものの見栄えがよくない。とはいえ埋め込みってことは通常CSSの管理はサービス側の仕事だし、こっちでやれることはないんだろうな……と思ってたらそうでもなかった。これiframeじゃなくて生のHTMLタグを書き出してるんですね。そうだったのか。だからCSSをこちらで設定してやれば崩れるのを修正出来ると。

続きを読む