2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた（Amazon SES + AWS Lambda + API Gateway） | DevelopersIO
S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた（Amazon SES + AWS Lambda + API Gateway） はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」で公開した HTML ウェブサイトに、メールフォーム付きのお問い合わせページが欲しくなるケースも多いと思います。 そこで今回は AWS のクラウドサービスをフル活用し、完全にサーバーレスで動作するメールフォームを構築してみました。 1時間ほどの作業でお問い合わせフォームを実装でき、AWS に触れることで「サーバーレス構成」の基本を理解するのにも役立ったので、備忘を兼ねて構築方法をご紹介します！ 今回の構成（概略図） サーバーレスだと何が嬉しいの？ おサイフに優しい メール送信のバックエンドに利用するAWSサービス（Amazon SES、Lambda、API G
「おたくでホームページ作るといくら！」と大阪弁のお爺さんから元気な電話が長野のwebサイト制作会社にかかってきた
稲田エイジ｜BtoBのWebサイト制作／Web活用支援／コンテンツ支援／HubSpot @inada_h 「おたくでホームページ作るといくら！」と大阪弁のお爺さんから元気な電話。 ぼく「ど、どちら様ですか」 じじ「大阪の◯◯という会社ですわ。そんなんどっちゃでもいいんで、おたくでホームページ作るといくら！」 ぼく「何のWebサイトを作るご予定ですか？」 じじ「00ページだといくら！」 ↓ 2020-12-03 12:47:00 稲田エイジ｜BtoBのWebサイト制作／Web活用支援／コンテンツ支援／HubSpot @inada_h BtoBのWebサイト戦略策定、制作、Web活用支援とコンテンツ支援を担当／Web制作会社『JBN』に所属／https://t.co/jbW7xEhXPA／ミッション＝「伝わる」をふやす／HubSpot プラチナ パートナー／ユーザー・企業・社会の三方良しにWe
ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ
平尾誠@ARUTEGA.Inc @Makopontass コーディングを外に出すことが増えてきた。 やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。 この再現性への執着心がないと伸び代を感じれない。 2020-09-20 00:34:07 吉本 集 / aru inc. @tsuDoi220 いやー、実際そうなんですよねー。 ピクセルパーフェクトに、そもそも拘っていない人に、仕事お願いしたくない。テクニックどうこうより、全然こっちのほうが大事。ほんとに。 後、速度とちゃんと納期守ること。 当たり前のようだけど、意外とね、、、 twitter.com/makopontass/st… 2020-09-20 00:45:27
phpでvar_dumpした時の表示を整える3つの方法 - Qiita
はじめに phpでvar_dumpで変数の値を確認するデバッグ手法があると思いますが、それをそのままhtml上で表示すると こんな感じになってしまいます。 このままでは中の構造が追いにくく分かりにくいので形を成形して表示する方法を3つ紹介します。 サンプルコード <?php $sample = array('first' => array('first_children1' => 'a', 'first_children2' => 'b', 'first_childeren3' => 'c'), 'second' => 'd', 'third' => array('third_children1' => 'e', 'third_children2' => array('grandchildren1' => 'f', 'grandchildren' => 'g'))); var_dump($
Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはうぃーす！ しょごです。 先日ノートPCを購入しました、これでスタジオでドラム録音とか動画作成とか気兼ねなくできます。 久しぶりに演奏動画でもアップしよう、、ゲーム実況もいいな。。。ふふふ。。 さて、今回はInstagramAPIを使ってWebサイトと連携したときの話です。 Instagramとは iPhoneやAndroid端末で写真を撮影し、共有するスマートフォンアプリのことです。Webからも閲覧でき、固有アカウントを設けて投稿管理ができる写真特化型のSNSです（もちろん無料）。 Twitterのようにフォローした人の写真がタイムラインに流れてきて、アップロードした写真には「いいね！」やコメントを付けることができます。アプリ内のカメラで撮影した写真や、カメラロールの写真を選択して手軽にアップロードができます。 プライベートモードで非公開設定も可能。Twitterとの最も大きな違いは
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
ファビコン favicon.ico を作ろう! リアルタイム版
ファビコン favicon.ico 作成 リアルタイム版 ウェブコーダーやブロガーに必須アイテム。半透過マルチアイコンが作れます。 ウェブブラウザで、タブやURLのとなりに表示されているアイコンがfaviconです。 16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。 処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。 このページでは 16x16, 32x32, 48x48 の3つの画像を含むマルチアイコンを生成します。 16x16のみ、16x16と32x32の2個、などのアイコンも作成可能です。 入力された画像は指定サイズに拡大縮小されます。16x16の画像に100x100の画像を指定すると縮小されます。 長方形の画像を指定した場合は正方形に変形されます。 透過情報を含むPNG画像も指定
必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
綺麗にデザインされたピクトグラムアイコン100個セット:phpspot開発日誌
Dribbble - Free 16px Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot 綺麗にデザインされたピクトグラムアイコン100個セット。 次のようなシンプルだけど綺麗なPSD形式のアイコンセットがダウンロードできます。 PSDファイルですが、ベクター形式なので拡大しても劣化がありません。Retinaディスプレイ対応も可能。 種類も汎用に使えそうなものが多いです 関連エントリ フリーでシンプルなピクトグラムアイコン６０個セット「Jigsoar icons」 いい感じのOpenType形式ピクトグラムアイコン集100個「Entypo」 ピクトグラム等、ミニマムなアイコンが２４個まとまったアイコンまとめ ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」
大量アクセスによるサーバの負荷テストなどが簡単に実行できるフリーソフト「JBlitz Professional」
以前は有料ソフトであり、ロードテストを実行した結果を数値・グラフ化してまとめて保存でき、サイトへのアクセス順番を固定したりランダムにしたり、アクセスする時間間隔・接続時間・アクセスする人数の設定が可能で、さまざまなテストを自由に設定して実行できるフリーソフトが「JBlitz Professional」です。ダウンロードから機能と操作の説明までは以下から。 Website load test - JBlitz Professional http://www.cartesian.net.nz/jblitz/ ◆ダウンロード 「JBlitz Professional」を使うにはJavaをインストールしておく必要があります。 上記サイトの「Download」をクリック。 ダウンロードしたZIPファイルをExplzhなどで解凍して、Windowsを使って操作をするので「run-jblitz.bat」
アドビ、オープンソースのHTMLエディタ「Brackets」を公開。まだまだ開発中
アドビがオープンソースとして公開している「Brackets」は、HTML5とJavaScriptで作られたHTMLエディタです。アドビ自身はBracketsについてブログやプレスリリースでのアナウンスは何もしておらず、Github上にAdobeのコードとしてひっそりと公開されています。 アドビには統合的なWeb開発環境として確固たる地位を持つDreamweaverがありますが、Bracketsの画面を見るかぎり、目指すものはDreamweaverを置き換えるようなものではなく、もっと直感的で軽くシンプルなHTML/CSS/JavaScriptエディタを実現しようとしているように見えます。 Bracketsはまだ開発が始まったばかりで、それほど多くの機能が実装されているわけではありません（実際に起動してみましたが、短時間では使い方もよく分かりませんでしたし……）。今後もう少し機能が追加されて
月10万稼ぐにはiPhoneアプリ開発が一番速かった - ゆーすけべー日記
実は大学時代の同期であるgamellaが面白いエントリーを書いていました。 題名は「ニート革命再々考とWebだけで月10万円稼げる力」。 ニート革命、つまり職がないときにじゃーどうするの？という問題について、こんなことを書いていた。 ... 最近はもう考え方が結構変わっていて、 とりあえずWebで月10万円稼げる方法を何とか見つける！というのが直近の答えなのかなーと思う。 ... 僕なりの解釈だと、Webだけで10万円を稼げれば、 住む場所によってはレバレッジが効いて場所と時間に束縛されないんで自由な生活できるんじゃね？ってとこです。 すごい同意です。特に今だったら日本円を稼いで東南アジアに住むなんてプランはありありだと思います。 また10万円という単位も一つの目標としてよい設定値だと思います。 さて、僕は、諸々の事情があって日本に住んでいますが、 Webだけで10万以上稼ぐことはしていま
文字実体参照・数値文字参照
Updated 2007.01.21 / Published 2007.01.21 文字参照(character references)には、文字実体参照(character entity references)と数値文字参照(numerical character references)の2種類があり、これら文字参照はHTML等のマークアップと特殊記号とを区別するためや、キーボードでは直接入力できない記号を入力するのに用います。ここではHTML4とXHTML1.0に定義されている文字実体参照と数値文字参照を掲載しています。 なお、文字参照が表示される・されないはOSやUA、そして設定されてるフォントなどの環境に依存します。代表例としては、XHTML1.0より新たに加えられたアポストロフィ（文字実体参照「'」、数値文字参照「'」）については文字実体参照で表記してしまうと、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
守護天使占い-あなたの守護天使を占います。相性占い
SEOのプロ解説！ HTMLの効果的な書き方やタグの使い方とは | JADEのSEOプロフェッショナル相談室
【転職後1ヶ月目】ガチ未経験でwebエンジニアになって困ったこと | IT業界の歩き方
UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス
オシャレエロサイトをリリースして、10万PV/日を捌くためにやったこと - 彼女からは、おいちゃんと呼ばれています
