JS不要！CSSで固定要素のアレを簡単に実装【position sticky】
さて、昨今IEのサポートが切れた関係で、IEをカバーをする必要が無くなってきています。 弊社でも一部以外、IEはサポート対象外としています。 IEを考えると新しめの技術を使えなかったのですが、縛りが解禁されてだいぶ経ちますね。 そんな背景を踏まえ、今回はcssのposition stickyについてご紹介しようと思います。 固定要素のあれこれをstickyで解決 皆さま、画面上で固定要素は使
2022.3.24
デザイナーも知っておこう「相手が行動するプレゼン資料」
私たちデザイナーは、他の部署メンバーが作り上げたプレゼン資料のデザイン添削を行う機会がときどきあります。 作業内容としては、まず見やすい状態にするためにデザインルールを作ります。あとは決めたルール通りに実際にレイアウトを行います。つまり、見た目を綺麗にするだけの作業に留まっています。インハウスデザイナーならば、もう一歩踏み込んでプレゼンの目的や結果を意識したデザイン業務を心掛けたいですよね。…とい
2022.3.24
シェル芸のすすめ～awk, xargs, date～
エンジニアであれば、ログの調査、環境構築、データの整形などLinuxコマンドを書く機会はたくさんあるかと思います。 コマンドは所謂「枯れた技術」ですが、「枯れた技術」であるが故に話題に上ることは少なく、集中的に学ぶ機会は少ないように感じます。 結果として、毎回コマンドを使ってやりたいことを上手く実現できずにモヤモヤしている方も多いのではないでしょうか（私のことです）。 シェル芸本との出会い そ
GA4移行の切り札、Google Analytics の gtag.js と「接続済みのサイトタグ」の仕組みを徹底解説
ユニバーサルアナリティクスの終了がアナウンスされましたね。そこで本日はユニバーサルアナリティクスと Google アナリティクス 4 プロパティ（以降 GA4 と表記）を併用したり、移行する際に使われることが多い「接続済みのサイトタグ」機能について解説します。 「接続済みのサイトタグ」とは端的にはユニバーサルアナリティクスの記録用に埋め込んだタグをそのまま使って、Google Analytics
完成後も編集できる！ネオンサインの作成方法【Illustrator】
最近作成したネオンサインオブジェクトが編集できて便利だったので、作成方法をご紹介します。 今回作成するネオンサインの特長です。 Adobe Illustrator のみで作成できる（＝ Adobe Photoshopや他ツールを使用しない） テキストの色・フォント・線幅などを完成後も編集できる グラフィックスタイルに登録できる それでは作成方法を見ていきましょう。 1. 白地素材を用意
2022.2.28
第17回LT大会を開催しました
先日、第17回LT大会を開催しましたので、その様子を報告させていただきます！ 今期は最後の開催となります！今回も熱いLTバトル？が繰り広げられました！！ 今回の発表テーマ 1人月で70万円/月の赤字を削減した話 そのインデックス効いてないかも 9Pが狂おしいほどに遅いのでなんとかしたい あまり実用的じゃないAI知識 強制メンテオブザイヤー Java SE 11 Silverのオンライン試験
並列処理でRails5アプリURIHOのRSpecの時間を短縮する
最近RSpecの時間が長く、開発速度に影響がでていることに悩んでいたのですが、 RSpecの処理を並列化するparallel_testsというGemを導入して処理時間を短縮することができました。 この記事ではparallel_testsを導入した経緯を通常のRSpecが遅い理由を共に説明し、 parallel_testsの導入方法と実際にどれだけ短縮されたかをご紹介いたします。 通常のRSpe
簡単！javascriptライブラリとテキストで～図を作成
シーケンス図を書く機会があり、その際に使用した便利なjavascriptライブラリがあったので２つご紹介します。 エクセルやパワーポイント等で図や矢印を綺麗に引くのが苦手な人でも、テキストで書けば綺麗に図を作成できます。 1. js-sequence-diagramsで図を書く js-sequence-diagramsはシーケンス図をテキストで表現できるjavascriptのライブラリです。
2022.2.17
「BudouX」を使ってテキストの折り返しを自動化しよう！
GoogleのGithubリポジトリに日本語テキストの自動改行マークアップ支援ライブラリ「BudouX」が公開されました。 日本語は言語的な特徴として明確な文字区切りが存在しないため、一般的なブラウザはテキストの折り返しを最適化できていません。 BudouXはそんな問題に対し機械学習によって日本語の文章に自然な改行位置を自動挿入してくれます。 BudouX - github オフィシャルのサ
【用語解説】プログラミングにおける「ストリーム」とは？
ある日、「ストリームって何ですか？」と弊社の新人から質問されました。 Webで調べてみたそうなのですが、曰く「ストリームとはデータの流れ」。う～ん、わかったようなわからないような…… プログラミングをしていると時々出会う単語ですが、なんとなく雰囲気でやり過ごしがちで、いざ説明しようと思うとなかなか難しい単語ではないでしょうか。 今回はそんな「ストリーム」という単語を「ビュッフェ」と「コース料理」に
視覚調整でユーザーの「違和感」を解消しよう！
見る側にストレスを与えず心地の良いデザインを提供するために、違和感のない配置や色使いはデザインをするうえで非常に重要なポイントです。 ほとんどのデザインツールには要素を均等に配置する整列の機能が備わっていますが、均等に配置したデザインのはずなのに人間の目で見るとしっくりこない場合があります。そんな時に大切なのが視覚調整です。 では視覚調整とはどのようなものなのでしょうか。 視覚調整とは？ 数値
2022.1.14
nth系おぼえがき
nth系はいざ使うときに「あれ？なんだっけ？」と思うこともあるのでメモとして残します。 目次 :nth-child(★★) 奇数、偶数 ★n：★の倍数 n+★：★番目以降 ★n+●：★の倍数＋● :nth-last-child：最後から数えて その他 :first-child、:last-child :first-child（最初だけ） :last-child（最後だけ） :
2022.1.12