最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる
ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト
Nintendo SwitchコントローラーにWebアクセス、なぜ可能なのか
みなさんはNintendo Switchを持っているだろうか。そのSwitchのコントローラーであるJoy-ConにWebブラウザーからアクセスできることをご存じだろうか。つまりJoy-Conを入力デバイスとしたゲームなどをWebアプリとして作れるということだ。今回はWebブラウザーがJoy-Conにアクセスできる仕組みについて紹介しよう。 WebHID APIの概要 WebブラウザーがJoy-Conにアクセスできるのは、WebHID APIがブラウザーにサポートされたからだ。WebHID APIとは、名前の通り、HID（Human Interface Device）にアクセスするためのAPIで、JavaScriptのコードを通して利用できる。 誰にとってもなじみがあるHIDを具体的に挙げるとしたら、マウスやキーボードだろう。WindowsやmacOSなどのOSで世の中のマウスやキーボード
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
Webサイトのデータ転送量のうち平均44%は「広告」
角川アスキー総合研究所（東京・文京）は、「スマホでのコンテンツ視聴に占める広告の比率調査」を実施した。その結果、15の主要なコンテンツサイトにおける単純平均では、全データ転送量のうち44％が広告と推計されたことが分かった。 また、コンテンツサイトの多くで、そのデータ転送量の半分以上を広告が占めていたことが判明した。アスキーの類推によると、スマホを持つ4人家族の場合、約2900円が広告のデータ転送量に費やしていることになるという。 調査はiPhoneの標準Webブラウザ「Safari」から15のコンテンツサイトにアクセスし、コンテンツを表示した際の全体のデータ転送量を計測。広告ブロックツールで広告を非表示にした際のデータ転送量も計測し、その差を広告のデータ転送量と推計した。なお、広告ブロックツールで広告を除外できないFacebookのようなサイトは、今回は調査対象外としている。 サイト別に測
Web口振受付と即時口振に頼らなければならない新型決済スキームの問題 - novtanの日常
ドコモ口座の問題はシステム的な部分でいうと「本人確認と認証が甘い」に尽きるんですが、それ以前の問題として、このビジネススキームが何を根拠に成立していて、その根拠に基づいた対応が行われていたか、ということがありますね。なにぶん、それなりに新しいことをやろうとしている話なので必ずしも法整備は十分ではないし、抜け道というか、既存の制度だったらこうすれば使えるよね、というスキームをひねり出して実施していくわけです。なので、根本的な法律や制度の問題とは別に、2者間で成立させるための個別の契約が必ずあるわけです。それがどのくらい今回の事態を想定していたかは定かではないですけれども、少なくともここについて一般に開示されることはないでしょう。でも、そこがキモってのがこの話の難しいところ。 とはいえ、銀行との資金移動に持っていく部分については口振契約ということは明らかですので、そのへんをちょっと考察してみま
続々連携がストップしているドコモ口座とWeb口振受付の問題について - novtanの日常
詳細不明なところもありますのでなんとも言えないんだけど、外部から見える範囲でわかる問題点について解説してみます。詳細を調べたら問題なかったり、中の人だけが知っている仕様によってクリアされている問題もあるかもしれません。 事実誤認があれば訂正しますのでよろしく。 そもそもドコモ口座って？ ドコモユーザーならおなじみ、それ以外でも使えるアカウントサービスである「dアカウント」に紐づけてキャッシュレス決済などで使用できる電子マネー（だよね）のことです。 dアカウントは元々はドコモ契約者向けのアカウントサービスだったんですが、スマホを起点としたサービスを提供するに当たり、汎用的なアカウントサービス（ID提供サービスとも言えます）にするためにドコモの回線契約とのつながりを限定的にしたものです。GoogleアカウントやFacebookアカウントでのログインと同様、dアカウントでのログインができるように
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
グーグルはクローム以外のブラウザーをいじめる悪癖があるみたい
グーグルはクローム以外のブラウザーをいじめる悪癖があるみたい2019.04.19 16:0053,307 西谷茂リチャード 直るといいな。 オンライン検索でテック業界を上り詰めた会社Google（グーグル）は、ブラウザー競争でもしたたかでした。どうも、YouTubeやGoogleドライブなどの人気Webサービスを通じて、ライバルのブラウザーを蹴落としているそうなのです。 Edgeは置いてけぼりにされた？｢Edge｣は、Microsoft（マイクロソフト）が力を入れて改良しているブラウザーで、ページの表示がGoogleの｢Chrome｣ブラウザーより速い時もあったり、メモの機能が便利だったりと隠れた人気者でした。でも最近、その中身がほとんどChromeと同じになってしまっているんです。ブラウザーの主幹的な部分が、Chromeと同じもの（Chromium）をベースとしたものに変更されたため…（
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
作りたいWebアプリのアイディアを迷走せずに作る方法。まず、エディターを閉じることから始めよう - Make組ブログ
何かを作りたいときは、エディターをいきなり起動してはいけません。 エディターを閉じて、まずはイメージをまとめることに集中しましょう。 なぜこの文章が必要か なぜ何かを作る前にイメージをまとめる必要があるのでしょうか？ 頭の中には完璧な作りたいもののイメージがあることでしょう。 であれば今すぐにでもプログラミングを始めるのが賢明なように思えます。 ですがそうしてはいけません。理由は「作りたいもののイメージは単なる幻想だから です」。 頭のなかにあるイメージはとても素晴らしいものですが、多くの場合は曖昧で、触れられない、価値を検証できないものです。 それを一旦書き出して、まとめていく方法を知っておきましょう。 まとめていく中で作るものがより明確になり、自分でも気づかない価値を発見できます。 作るものをまとめて検証することで、作り始めた後の手戻りを防ぎます 作るものをまとめて明確にすることで、作
EFOとは？効果が高いフォーム改善ポイント12個と改善効果｜Webマーケティング・SEO相談はデジ研
EFOは、ユーザーのCVをしやすくするためのフォーム最適化の取り組みを言います。フォームまで遷移してくれたユーザーを取り逃すことが無いように、EFOはWebマーケティング成果を高める重要な施策の一つになります。 どのようなサイトにも必ずある「お問い合わせフォーム」。実は、このお問い合わせフォームの作り方次第で、CVRが劇的に変わるのをご存知でしょうか。もし、CVRの数値が悪く、アクセス数の割に目標としているCVに到達しないのであれば、EFO（お問い合わせフォームの改善）による施策の実行をおすすめします。 そこで今回は、EFOについて、当社が行った事例をもとにご紹介したいと思います。 「EFO」とは、「Entry Form Optimization」略称で、日本語に直訳すると「入力フォーム最適化」という意味です。フォームをユーザーが入力しやすくすることで、入力完了率を引き上げ、問合せ数母数を
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
サイボウズ、「副業として働く人」を採用
既に他社や個人で仕事を持っていることが応募の条件。募集する職種は、Webアプリケーションの開発やテストを担当するエンジニア職と、製品プロモーションやWebディレクターを担当するビジネス職の2種類。 副業を同社は「複業」と表記。「補助／副を表す意味だけでなく、パラレル（並行して）キャリアを持つという意味も込めたい」という。募集職種は一部に限っているが、今後職種を拡大することも検討する。 サイボウズは2012年に社員の副業を解禁。それ以降も自由度の高い勤務形態や充実したサポートを設けるなど、「働き方改革」に積極的に取り組んでいる。 関連記事 モーレツ社員こそ、働き方改革が必要だ 「電通鬼十則」が批判を浴びているが、「正直、どこが悪いんだろう」と思っているモーレツ社員は少なくない。働き方改革に乗り切れない社員たちに、“働きやすい企業”で知られるサイボウズはどのように対応したのか？ 中小企業、「今
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
変態的 CSS トリック
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
ブロガー・Web関係者必見！モバイルとPC同時に閲覧できる超便利ブラウザ「Blisk」の存在を君はまだ知らない - Brian'z Imagination
レスポンシブデザインが流行してきているとはいえ、こんなことをしているはてなブロガーさんやWebデザイナーさんは後を絶たない。 PCでいちいちブラウザの幅を変えながらデザインを確認している わざわざUserAgent Switcherでユーザーエージェントを切り替えて表示を変えている 横にiPhoneやAndroidの実機を置いて表示を確認している そもそもモバイルを意識していない(論外) そんなWebデザインにかかわるすべてのひとに紹介したいのが、「Blisk」という超絶便利なニューカマー・ブラウザだ。いままで「え？こういうブラウザっていままでなかったの？」と不思議に思ってしまうくらい、発想はシンプルだが革新的なブラウザだ。まだベータ版であることやこれまでWindowsでしか公開されていなかったので紹介するのを戸惑っていたけれど、いよいよMac版もリリースしたので、堂々紹介していきたい*1
週に数時間だけGoogleにスパムを行い月収500万円も稼いでいたスパマーが衝撃の実態を激白
By Unique Hotels ヒートマップ付きアクセス解析ツール「Ptengine」のマーケティング部門でVPを務めるJeff Deutsch氏は、インバウンドマーケティング業界に入る前まで、Googleに対するスパム行為で月収5万ドル(約560万円)もの収益をたたきだしていました。さらに当時の勤務時間は週に10時間も働けばいい方だったという恐るべきスパマーの実態について、Deutsch氏が告白しています。 Confessions of a Google Spammer https://inbound.org/blog/confessions-of-a-google-spammer ◆2009年のDeutsch氏の考え方 Deutsch氏は2009年当時、「もしスパム行為が間違っているのなら、なぜスパムはネット中で成功しているのか？」というブラックハットSEOを行うスパマー特有の考え方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画力難民の救世主！ 発想が天才すぎるエンジニアの作ったサイトに「凄すぎ」と称賛の声
Biscuit（ビスケット） | いつものアプリがタブに埋もれない無料ブラウザ
プラネックス、世界中どこでも日本と同じサービスが使えるルーター ～中国でもFacebookやTwitterが利用可能に
