console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
新人の作ったWebアプリが穴だらけ!? ログイン画面に潜むセキュリティの”あるある”ワナ
ネット上で商売するのが当たり前な時代。自社でWebサイトやWebアプリを抱える企業も相当な数になっている。そこでインシデントが発生すれば信用、ブランド、収益……失うものは計り知れない。 本連載では情報セキュリティの専門家・徳丸浩さんが制作した脆弱性診断実習用のWebアプリ「BadTodo」を題材に、ストーリー形式でWebアプリ制作に潜む“ワナ”について学んでいく。 登場人物は全て架空の存在だが、ワナは全て現実にあり得るもの。せりふは徳丸さんの監修の下制作した。 特集：Webコンテンツの守り方 情報漏えい対策術 経営や企業イメージに大きな打撃を与える情報漏えい。近年ではWebサイトの改ざんやデータベースを狙った攻撃により情報を盗み出す事案が話題になっている。本特集では情報漏えいを引き起こすサイバー攻撃と、WAFによる対策について解説する。 カクーノ株式会社：Webアプリ開発を手掛ける企業。本
フロントエンドエンジニアにおすすめchrome拡張機能 - Qiita
はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です
サイトリニューアル時のSEO対策とは？失敗しないためのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
メディアコンサルティンググループの楓です。 競合ひしめくオンライン環境において、サイトリニューアルは会社の一大プロジェクト。コンセプトにデザインの方向性、コンテンツの構成など決めることは山積みです。 しかし、検索エンジン最適化（SEO対策）の観点まで考慮されているでしょうか？ 私がコンサルティングを行う中でも、「サイトリニューアル後に検索順位が下がった」「検索エンジンからのアクセス数が減少した」といった相談を受けることがあります。 そこでこの記事では、サイトリニューアルで成果を出すために行うべきSEO対策について、よくある原因をもとに解説します。 SEO対策における基礎体力を備えたサイトリニューアルを行えば、質の高いアクセス数を獲得しやすい・広告に頼りきることなく集客ができるなど、ビジネス上の強力な武器となります。ぜひこの記事をご覧いただき、サイトリニューアル時のSEO対策にご活用ください
CSSの美しいシャドウもこれなら簡単！ box-shadowを重ねた面倒なコードを簡単に生成できるツール -boxshadows.xyz
直感的なインターフェイスで、CSSのbox-shadowを使用した複雑で美しいシャドウを簡単に作成できるツールを紹介します。 シャドウはさまざまなパラメータで正確に調整でき、リアルタイムにシャドウの見た目とCSSのコードが生成されます。CSSの初心者でも経験豊富な人にとっても便利だと思います。 boxshadows.xyz boxshadows.xyzとは boxshadows.xyzの使い方 boxshadows.xyzとは boxshadows.xyzは直感的なインターフェイスで、レイヤー化された複雑なシャドウを正確に、そして簡単に作成できるオンラインツールです。シャドウのタイプ、シャドウのぼかしと広がり、オフセットの調整など、さまざまなパラメータを調整しながらリアルタイムにシャドウを確認しながら作成できます。
SEO対策の第一歩！競合サイト分析の方法をコンサルタントが解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディアコンサルタントの太田です。 オウンドメディア運用のノウハウをお伝えしている私の記事ですが、今回は「競合サイト分析」について解説しています! 私もふだん、業界研究も兼ねて競合サイト分析を必ずおこなっています。この記事をご覧のみなさんも、たとえばなにかはじめてのことに挑戦するとき、事前に他社の事例を調べたりしたことがあるのではないでしょうか。それも一種の競合分析です。 というわけで今回は、プロ目線での競合サイト分析の方法を紹介します！ 分析時に意識したいことについてもお話しするので、ぜひ参考にしてみてくださいね。 そもそも競合サイト分析とは？ “競合サイト”の定義 一概に「競合」というと、いわゆる同業他社のような形で、自社と類似するサービスや商品を展開する他企業を指します。 しかしWebサイトにおいては、これが少し異なります。 Webサイトにおける競合とは「狙う顧客が近い需
サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse · Unlighthouse https://unlighthouse.dev/ Unlighthouseを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https://nodejs.org/ja/download/package-manager 今回は
使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA
ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。 そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 この記事ではデベロッパーツールでCSSをデバッグする方法や便利な機能などを紹介します。記事で使用しているデモは以下のリンクから確認できるので、実際にデベロッパーツールで操作しながら読み進めてみてください。 サンプルを別ウインドウで開く ソースコードを確認する 1. DOMのスタイルを確認 / 変更する デベロッパーツールでは、画面上でスタイルの確認、変更ができます。 (1)デベロッパーツールを開く まずはGoogle Chromeを開きます。 確認したい箇所を右クリックし、［
これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
フロントエンド開発の準備
開発の前に決めておくこと 後から変更するのが難しいこと、大きな手戻りが発生する可能性のあることをできる限り開発のはじめに決めておきます。 多言語対応の有無 URLに依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対応する予定はなかったけど、後から必要になってしまった場合は仕方ないと思います。 OGPの必要性 動的ルーティングに対するOGPの必要性によってレンダリング方法の選定やCDN周りの選定が変わってきます。 SEOのニーズ こちらもOGP同様レンダリング方法に影響します。 OGPに関しては後からなんとかなることもありますが、SEOが重要なサイトの場合、そもそもSPAを選択しない方が適している可能性もあるので重要です。 対応ブラウザ/バージョン これを明確にしないと、一部のブラウザで使用できないCS
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい
iPhone, iPadの最新機種まですべてを網羅、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes
Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスのスクリーンサイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 2022年の最新モデル、iPhone 14シリーズ、iPad Air(5th Gen), Apple Watch Series 8をはじめ、最新機種から初代までの情報が網羅されています。 Screen Sizes サイトを利用するのは簡単、登録など面倒なことは一切不要です。 アクセスして、サイドバーから欲しい情報にアクセスするだけです。 iPhone 14 Pro Maxは今までになかった新しい解像度ですね。
レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。 無料で、多くのデバイスをサポートしているのがいいですね。 WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！ Mobile FIRST レスポンシブの確認を簡単にできます。 スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
「Cookieを許可してください」を自動的に非表示にできる拡張機能「I don’t care about cookies」を使ってみた
ウェブサイトを閲覧していると「クッキーの保存許可」を求めるメッセージが表示されることがあります。このメッセージが表示されるたびにポチポチクリックしてCookieの設定を行うのを面倒に感じている人も多いはず。無料で公開されているブラウザ拡張機能「I don't care about cookies」を使えばCookieの許可設定を自分の代わりに自動操作してくれます。 I don't care about cookies 3.3.8 https://www.i-dont-care-about-cookies.eu/ 「I don't care about cookies」はChrome版・Firefox版・Edge版・Opera版・Pale Moon版・広告ブロッカーのフィルター版が配布されていますが、今回はChrome版を使ってみます。まずは「I don't care about cooki
エンジニア出身ディレクターが語る！サイト制作前に押さえておきたいポイント3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのビールです。 はじめてのブログ執筆です！ 今回はフロント／バックエンドのエンジニアだった自分の経歴から、サイト制作前に押さえておきたい3つのポイントをまとめてみたいと思います。 「サイトの制作/リニューアルを検討しているが、何から手をつければいいかわからない……」ということでお悩みの担当者の皆さん、まずはこの3つのポイントを押さえておきましょう。 ドメインはどこで管理してる？ サイトを公開するにあたって必要不可欠な「ドメイン」。LIGのWebサイトで言うと、「liginc.co.jp」がドメインです（Webサイトの住所みたいなものだとよく言われますね）。 サイトのリリースにあたって、ドメイン管理画面に入って設定を変更する場合もあるので、自社で管理しているのか、あるいはサイトを制作した制作会社が管理しているのか、事前に把握しておくことが重要になります。 制作前に「ド
Webサイトの保守運用を全て解説！【作って終わりではない】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社LIG、Webディレクターのセイタです。 さて今回は、制作したWebサイトの公開後に訪れる、保守運用について全てを徹底解説します。 「長い道のりを経て、ついにWebサイトを公開！ あとは放っておけばOK！」ではないのがWebサイトを考えるうえで大切なところ。公開後にしっかりと保守運用を続けることが必須なのです。 株式会社LIGとは 2009年設立のWeb制作会社。年間150サイト制作。これまで国内外において30以上のWebデザインアワードを受賞。複数の海外拠点を生かしたシステム開発力も強み。 もちろん保守運用もお任せ！ぜひご相談ください 👉Web制作の実績・お問い合わせはこちら Webサイトの公開は「完成」ではないんです！ 目的を実現するためのWebサイトとして公開できるよう要件定義からはじまり、デザイン・実装・テストを経て、ついに公開！プロジェクトメンバーの皆さん、
Webディレクターに捧ぐ...…。保守案件でドキュメント化すべき3つの項目 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webディレクターのりくです！ ポケモンカードに相変わらずハマっています。ポケットモンスター金・銀ぶりにゲームも再開し、ヒスイ地方でポケモンを捕まえる日々を過ごしております。 さて、今回は保守案件のドキュメント化についてお話しします。保守案件を引き継ぐ機会が増えたのですが、この情報はどこに載っているんだろうと探すことが多く……。 引き継ぐときに後任担当者が欲しい情報をまとめましたので、最後までご覧いただけると幸いです。 保守案件引き継ぎ後に困ること 保守・運用案件引き継ぎ後も制作・開発時同様、多岐に渡る業務が存在します。そのため、運用担当者が変更時に引き継ぎが甘いと下記のような問題にぶつかります。 サーバ情報がわからない サーバ情報が複数あって、対象サーバがどれかわからない サイト構成がわからない デザインデータの格納先がわからない WordPressのログイン情報がわからない 外部ベンダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利なのが登場！ これ一つでWeb制作に役立つ機能がたくさん使用できるChromeの拡張機能 -SuperDev
https://domains.google.com/registrar/search