エスビー食品の企業サイトは、長らくCMSを入れずに運用してきました。しかし、モバイル対応など運用面で課題が出てくるようになり、CMSはWebReleaseを導入し、クラウドのAWSに刷新しました。 しかし、いざリニューアルの準備作業に取り掛かると、要件定義の範囲が多岐にわたり、「全体像を把握できていない」、「技術要素の知識が不足」などの壁に突き当たりました。そこからリニューアル費用とは別枠で予算をとり、要件定義をするための「事前要件定義」を半年ほどかけて実施しました。今回のリニューアルがスムーズに進んだのは、この事前要件定義のおかげだったかもしれません。 そう語るのは、エスビー食品の菊地竜太さん。 エスビー食品がサイトをリニューアルしたのは、2018年8月2日（エスビー食品が制定したハーブの日）。実際の開発・移行にかかったのは約1年ですが、その前の半年を事前要件定義のための棚卸しに割き、W

ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。 当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。 画像: ツイートより 元ネタは、下記ツイートからです。 💡 Change the color of your favicon when dark mode is enabled.#codyhousenugget pic.twitter.com/Hie9Pgt9MQ — CodyHouse (@CodyWebHouse) July 7, 2020 ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。

WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 <a href="{URL}" target="_blank" rel="noopener">LINK TEXT</a> のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without this, the new page can access your window object via window.opener. Thankfully the origin security model of the web prevents it reading your page, but no-thankfully some legacy APIs mean it

編集や校正の基本として、疑問符（？）や感嘆符（！）の後に空白をいれる（スペースを空ける）という慣習があります。この慣習の意図とは何か、またスペースがあいていれば全角アキでも半角アキでもどちらでもいいのかを解説していきます。ブログや小説など表記する媒体によって使い方こそ変われど、大事なのは「読者さんにとって、わかりやすいか・読みやすいか・理解しやすいか」であることに変わりはありません。 今日は、編集者っぽく「日本語の文章の書き方」について。あなたは、疑問符（？）や感嘆符（！）の後に空き（スペース）を入れてますか？ なぜアキを入れるのでしょうか？ それは……。 疑問符（？）や感嘆符（！）のあとにはアキをいれるのがオススメ編集の基本として、疑問符（？）や感嘆符（！）のあとにはアキをいれる（スペースをいれる）という慣習があります。 編集者としては納得して受け入れている、ある意味ルールなのです。しか

FirefoxMozilla/5.0 (機種・OS) Gecko/20100101 Firefox/72.0 ↑わかる SafariMozilla/5.0 (機種・OS) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15 ↑まあわかる IEMozilla/5.0 (機種・OS; Trident/7.0; rv:11.0) like Gecko ↑意外にすっきりしてる ChromeMozilla/5.0 (機種・OS) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36 ↑おまえはMozillaどころかAppleWebKitでもSafariでもないだろカスか？ EdgeMozilla/5.0 (機種・OS

25日かけてカレーを作りたいです。 という気持ちはとてもあるのですが、私は一人暮らしを始めて8年が経とうとしている中カレーを作ったことが1度もありません。 このアドベントカレンダーは コーディング！なるほど分からん！状態なのを脱却するために 25日かけてコーディングをカレーに例えて、1日1記事頑張って書くとかそういうやつです。 自己満の！アウトプットするもんです。 最終的にはカレー×技術で何か作ります。 カリー化や、カレー日記等はしないです！！！！！！！！！！！！！

私 is 誰 今年の7月にドワンゴの教育事業部に異動し、N予備校でプログラミング講師をやることになりました。 現在は週2回ニコ生やN予備校上にてプログラミング入門コースの授業放送をしています。 ドワンゴ自体は7年目となり、ニコニコ動画の開発を4年、エンジニア教育やエンジニア採用を2年ほどやってきました。 この記事で書きたいこと 現部署に異動後、教材のインプットを兼ねて『N予備校プログラミング入門コース』を履修したのですが、明らかに難易度が僕の想像した "入門コース" から外れたガチ編成になっていて衝撃を受けたことが記事を書こうと思ったきっかけです。 中身としてはとても良い教材になっているので、僕のような勿体無い誤解が少しでも減れば幸いです。 入門コースはいわゆる入門コースではない 『プログラミング入門コース』のゴールは ドワンゴがエンジニアとして採用したいレベル や IT企業のエンジニアイ

Web向けテスト自動化サービス「mabl」を試してみました。mablはChrome拡張を使ったキャプチャリプレイ系テスト自動化サービスですが、API呼び出しや分岐など、かゆいところに手が届くSeleniumIDEといった印象でなかなかいい感じ。 テスト自動化サービスが注目される理由 従来型のQA・テストサービスは、人やチームをアサインしてマンパワーでなんとかするスタイルが多いと思います。企業も「品質 ＝ テスト」や「品質 ＝ QA」とすりこまれてしまい、品質が話題になったら「QA組織が必要だ！」になりがち。これはとても大きな間違いだと思います。 そして、どの業界も人手不足となり、この「マンパワーでなんとかする」がうまく機能しなくなってきました。僕の周囲でよく聞くのが「テストベンダーに頼んだけど、バイトレベルがアサインされて逆に管理コストが大きい」といった話。 高いお金払って苦労するぐらいな

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない

Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの

楽天市場での販売を止めて1年と経たずに、自社ECサイトで売り上げをすぐに取り戻せそう——。そんなSPA（製造小売り）を勇気づけるツイートが、2カ月前に話題になった。 つぶやいたのは、1716年創業の老舗企業｢中川政七商店｣（奈良県奈良市）で、取締役兼コミュニケーション本部本部長を務める緒方恵氏。同社は日本の伝統工芸を生かした生活雑貨を企画・製造・販売する。どのように実現したのか、奈良の本社で緒方氏に話を聞いた。 ブランドコントロールについて長期で考えた結果、昨年の8月に楽天市場店を閉じた。 EC全体の4割を担っていた楽天を閉じるのは肝が冷えた。 が、1年かからずに本店サイトで楽天分をカバーできるように成長させることができそう。 勝因はひとえにメンバーの成長。これに尽きる。感慨深い。 — 緒方 恵 / 中川政七商店 取締役 (@notmegumi) June 23, 2019 ブランドコント

こんにちは、ペンギン男です🐧 珍しく受け身でなく、主体的に不明な点の解明に乗り出した今回。しかし、それにしてもGoogleはそういったニーズにも応えられるように、きちんと情報発信を怠らないものですね💦 このトピックに関する、前回の記事↓ ———————————————————————— 【目次】 おさらい 構造化データテストツール 構造化データのメンテナンス サーチコンソール上で「このサイトでは構造化データが見つかりません」と表示される場合の、アルアル 最後に ———————————————————————— おさらい 構造化データとは 検索エンジン理解促進対策 リッチスニペットの充実にもつながる ウェブページ上、どういう構造のコンテンツになっているかをより明確に表示させる機能 「構造」「マークアップ」というくらいなので、「HTML」を意識したもの なので、求人情報などのコンテンツには

Note: Read about past updates to this technology in other blog posts about Intelligent Tracking Prevention, and the Storage Access API. The beta releases of iOS 12.2 and Safari 12.1 on macOS High Sierra and Mojave include an updated version of Intelligent Tracking Prevention (ITP). For purposes of developer communication, we’ll refer to it as ITP 2.1. With this update we further reduce trackers’ a

CSSの値に指定できる単位といえば、pxや%などがおなじみ。でもレスポンシブなサイト制作では、vhやvwといったViewport単位がとても便利です。基本と使いどころを解説します。 CSSにViewport単位（Viewport Uints）が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。Viewport単位について聞いたことはあるものの、詳しいことはまったく分からないという人は、この記事で理解を深めてください。 単位とその意味 CSSにはViewportを基準とした単位が4つあります。vh、vw、vmin、vmaxです。 Viewport Height（vh）：viewportの高さに基づく。1vhはviewportの高さの1%に相当する Viewport Width（vw）：viewportの幅に基づく。1v

PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-

まあ正直このサイト自体は、無断転載と著作権侵害の巣窟だし、勝手に広告ポップアップするしで全然褒められたサイトじゃないんだが、 タグの取り扱いに関してだけは本気で感動したので紹介したい。 他のサイト（ニコ動とかpixivとか）もこういう仕組みになってくれないかなあ。 タグ数に上限が無い本当に無制限ってことはないだろうが、見かけ上の上限は無い。少なくとも50個くらいは付けられる。 キャラ名や作品名、シチュや場所を表す言葉から、キャラの人数、ポーズ、付けている装飾品の隅々までほとんどタグ化されている。 pixivなんかでよくある「好みの絵を探したいけど俺の好みはタグで表されない！」的な現象はほとんどあり得ない。 タグに属性がある作者名や作品名やキャラ名には「Artist:」「Copyright:」「Character:」といった専用の属性をタグに付与することができ、これが付いているとタグの色が変

まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感

XMLこそがウェブの未来であるという見方が支配的だったために、2004年のOperaとMozillaの共同提案は却下され、W3CでHTMLを改良する道が閉ざされました。そこでブラウザーベンダーが集まってW3Cとは別の組織でHTMLやHTMLに関連する仕様の改良を行う、というのがWHATWGのはじまりです。 以来今日に至るまでずっと、WHATWGはHTMLの開発を（ある期間はW3Cと共同で、ある時期からはW3Cとは別に）し続けています。「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク（W3C HTMLのこと）は答えではない」というのはWHATWG HTMLのエディターであるAnne van Kesterenの言葉の通り、WHATWG HTMLを第一に参照すべきでしょう。 HTML5勧告以降のW3Cの動向 さて、W3Cに話を戻します。HTM