モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」の紹介
要素の高さをビューポートに吸着させる手段として、100vhが最適解ではあるが、モバイルブラウザにおいては悩ましい点があることをご存知だろうか。 モバイルブラウザには、URLを表示するアドレスバーとタブ切り替え操作等のコン…
Web制作Web制作Web制作
Web制作表示崩れの報告？閲覧環境の情報共有ができるWebツール「mybrowser.fyi」が便利！
マークアップエンジニアならば、「表示が崩れている！」と報告を受けた経験があることと思う。そのようなとき、決り文句のごとく、 「ブラウザは？」「OSは？」「ブラウザのサイズは？」 を質問するのだけれど、報告主がクライアント…
Web制作VSCode拡張機能「Fabulous」でCSS記述を時短！高速コーディングのお供に
CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追…
アプリ[React Native] トースト通知するライブラリ「react-native-tiny-toast」の紹介
ユーザーの操作に応じて状態を知らせる機構に「トースト通知」というものがある。ローディング中であることを伝えたり通信の成否を伝えたり、ポップアップ表示することでユーザーの迷子を防ぐことに寄与するものだ。 とくにネットワーク…
Web制作セレクタ間のチルダ記号って？CSSの間接セレクタ「E ~ F」を使いこなそう！
このエントリーでは、CSSの間接セレクタについて共有したい。 CSSのセレクタ定義には、さまざまな用法があって、なかでも「タイプセレクタ、子孫セレクタ、IDセレクタ、クラスセレクタ」は一般的だろう。マークアップに精通して…
Web制作画像トリミング機能を提供するJSライブラリ「react-image-crop」の紹介
画像トリミング機能は、ビューアソフト等に見られる代表的な機能のひとつであるが、Webアプリに実装しなければならないシーンは滅多に遭遇しない。一方でサムネイルの生成であれば、サーバサイドで一定サイズにトリミングすることを考…
お知らせ/募集U・Iターン転職を考えてる、あなたへ！会津ラボにUターン入社して１ヶ月目の所感
初めまして、会津ラボへWebエンジニアとして入社をした渡部です。2019年11月に地元である会津若松へUターン入社して、早いもので約一ヶ月半が経ちました。 Uターンを数年前から検討していたのですが、実際にUターンしたのは…
アプリGoogleマップアプリのスワイプパネルを再現する「rn-swipeable-panel」を紹介
Googleマップアプリを起動するとスクリーン下部にスワイプパネルの存在に気づく。ここには、対象エリアのスポット情報を案内されている。おもにグルメ種がカテゴライズされていて、パネル内の操作で事足りる場合もある。 このよう…
Web制作[React]ドラッグ&ドロップのファイルアップロードを簡単実装！「react-dropzone」の紹介
ファイルアップロードUI設計のややこしさときたら…。<input type=”file” />で済むのなら、なんと明快なことか。そういう覚えはないだろうか。 <input type=”file” />だけであ…
ライフ経営知識・経験が無いなら「教科書」から学び・実践してみる
はじめまして、プロジェクトマネージャの遠藤です。 もっぱら、予算、原価、利益と会社の「売上計画」を達成する為の活動が主な仕事で、肩書きはプロジェクトマネージャではありますが、管理業務はほとんどエンジニアに頼りっきりの毎日…
