VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。 Vanilla JS ＆ SPAとは？ Vanilla（バニラ） JSというのは何もフレームワークを使っていない素のJavaScriptのことです。 ただのJavaScriptなんですが、ジョークでフレームワーク風の公式サイト？っぽいものがあったりします。 SPAというのはシングルページアプリケーションの略です。 ページごとにHTMLを用意するのではなく、1つのHTMLの中でJavaScriptに
メルカリShops のフロントエンド | メルカリエンジニアリング
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
Webのダークモードを実現するには - freee Developers Hub
こんにちは、freeeのUXチームでデザインシステム “Vibes” を作っている id:ymrl です。 ダークモード流行ってますよね。私は最初はしっくりこないなと思っていたんですが、食わず嫌いは良くないと思って試しているうちに、いつの間にかダークモードのほうが落ち着くようになってしまいました。 そしてそうなってくると、だんだん「自分たちの作っているWebサービスもダークモードに対応するべきなのか？」という気持ちになってきてしまい、最近はずっとダークモードのことを考えています。ということで今回はダークモードをやるべきなのか、実現する方法はどうなっているのか、UIデザインで気をつけるべき点何かというのを考える記事を書いてみます。 ※「ダークモード」はApple製品で使われている呼び方で、Androidでは「ダークテーマ」と呼ばれていて、Windowsでは「ダーク○○」のような呼び方をしてい
シンプルなHTMLでダークモード対応、Webページを簡単に実装するためのclassレス超軽量フレームワーク -SPCSS
HTMLは非常にシンプルな実装で、テキストベースのWebページをさくっと実装するための超軽量でシンプルなclassレスの超軽量CSSフレームワークを紹介します。 HTMLにclassは一切不要です、外部CSSを記述するだけで簡単に利用できます。ダークモードにも対応しており、カスタマイズも簡単。テキストベースのドキュメントとか、シンプルなブログや自己紹介ページなど、備えておくと便利です。 SPCSS -GitHub SPCSSの特徴 SPCSSのデモ SPCSSの使い方 SPCSSの特徴 SPCSSはclassレスで使用できる、テキストベースのサイトを実装するための超軽量CSSです。 ダークテーマをサポート（prefers-color-scheme: dark;）。ライトモードのテキストカラーはブラック（#000）ではなく、ダークグレー（#333）に。 一行が長くなりすぎないように<body
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
Webエンジニアだったら当然知っておきたい「 クリックジャッキング対策 」とは？ | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Typetalkチームの永江です。今回は4月にリリースした、BacklogとTypetalkの連携機能である「Backlogカード」の実装の際に行った クリックジャッキング対策 について説明します。 Backlogカードとは Backlogカードは、Typetalkのトピック内にBacklogの課題やコメントをカード形式にして表示する機能です。Backlogの課題キーや課題のURLを貼り付けるだけで、以下の画像のように表示できます（※詳しいご利用方法についてはこちらの「Typetalkのトピック上で課題の詳細を見られる Backlogカード をリリースしました！」をご参照ください）。 Backlogカードの実装は、TypetalkからBacklogに用意した埋め込み用の課題ページを<iframe>で表示するというものです。このような実装にしたのは、もともとBacklogに<if
CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会
レスポンシブデザインは あくまで見た目の調整、表示・非表示のコントロールなので 下手に使うと、デバイス毎にインタラクションが違うUIのstateが無茶苦茶複雑になっていく コンポーネントという概念が無かった時代の設計を、SPAに持ってくるのはおかしい 画面サイズ毎にCSSで手軽にを切り替える、というのなら良い しかし、画面サイズ毎にインタラクションが違う部品が出てくると設計が破綻する 画面サイズ毎のがごちゃ混ぜになる コードが追えなくなり、バグの温床になる では、どうするか？ 素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい 使いまわせる部品は、コンポーネントとして切り出して再利用する 歴史を紐解く 2011年頃、レスポンシブデザインが生まれた 当時のwebにはコンポーネントが存在しなかった 単体で複雑な状態遷移をするインタラクティブなパーツ
Webサイト制作におけるテスト工程の難しさを考えます | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webサイトって、もはやアートじゃない？ こんにちは。バックエンドエンジニアのまさくにです。 子供の娯楽だった漫画、アニメの一部がアートと呼ばれるようになり、同じく大規模なゲームの全体や要素がアートとして遜色ないのと同様、ドキュメントを共有する技術であったWebも、もうアートの域に入っていると思いませんか？ 僕は入っていると思うんです。良くも悪くも。弊社はそのアートを請け負って開発しています。特にデザイナーとフロントエンドエンジニアがデザイン部分を請け負うのですが、作業中の彼らの鋭い目は完全に絵筆を持った画家のそれ。 ささいな色差を何パターンも試行し、1pxを合わせ、0.1秒のアニメーションの違いをすべての要素に対して考える。デザインとアートの違いは議論を呼びそうですが、そのこだわりと熱度は僕から見て「アーティスト」なんです。 そこでバックエンドエンジニアたる僕は、彼らの作り出した創作物を
ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です！ 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフーの組織体制 Webフロントエンドエンジニアの取り組みを紹介する前に、ヤフーがどのような組織体制なのか紹介します。 冒頭画像のようにヤフーではカンパニー制度を取り入れており、それぞれのカンパニーにサービスを開発する事業本部があり、この事業本部単位でデザイナーやエンジニア、そのほかにもさまざまな職種の方が所属し、サービスごとで日々開発に取り組んでいます。
「GDPRとかいろいろあるけど、それでも個人でWebサービス開発やっていこうよ」という話 - えいのうにっき
前回のエントリ↓のつづき。 blog.a-know.me Pixelaを作り、運用するにあたって、「今までやったことなかったけど、今回は絶対にやってみよう」と思っていたことがあって、それが「利用規約の整備」と「GDPRにちゃんと向き合うこと」だった。 なお、以下の文章は「ごく最近に "利用規約" というものに向き合い始めたばかりのド素人」が書いているものであり、その正確さ等については一切保証できません。が、「今回僕はこうやった」ということについて書いてあるため、もし誤解や不足、問題点などがあればぜひご指摘いただきたいです。プログラミングといっしょで、問題点をひとつずつ直していくことを通じて "安心して使ってもらえる・運用していけるWebサービス作り" を上達していきたい、という気持ちがあります。 なぜ取り組もうと思ったか？ 僕はとにかく意識が低くて、GDPRが施行されるという今年の5月下旬
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
Netflixにおける日本語字幕の導入
(Please note that this article is a localized (to Japanese) version of a corresponding tech blog article in the English language) Netflixでは、2015年9月の日本における配信サービス開始時から日本語字幕を提供しています。 今回のブログでは、日本語字幕提供に至るまでの技術的な取り組みについて説明します。 字幕ソースファイルの仕様、字幕ソースファイルからNetflix配信用字幕への変換モデル、Netflixにおける日本語字幕の納品モデルなどを取り上げます。さらに、W3C字幕規格Timed Text Markup Language 2 (TTML2)導入に向けた対応についても触れます。 2014年の終盤にかけて、Netflixでは2015年9月に予定していた日
ユーザーインターフェイス解剖学・改訂版（公開版）
社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。
カラーユニバーサルデザイン（CUD）を意識してUIを改善した話 - Chatwork Creator's Note
こんにちは！ChatWork Advent Calendar 2017の20日目担当、デザイン部の@cw-marikoです。 好きなものは猫とバイクです。 私は昨年の入社以来、Webサイトのデザインを主におこなっていましたが、2ヶ月ほど前よりUIデザインを担当するようになりました。 今回は私がおこなったチャットワークのUI（ユーザーインターフェース）改善と、そこで意識したカラーユニバーサルデザイン（CUD）についてのお話をしたいと思います。 チャットワークとアクセシビリティ ChatWorkでは、アクセシビリティ方針を公表しており、サービスサイトおよびコーポレートサイトの対応に取り組んでいます。 （アクセシビリティ対応についてのブログ記事も分かりやすいので、あわせてご覧ください。） 上記のアクセシビリティ方針ではチャットワークのサービスやアプリケーション自体は対応範囲には含まれておりません
エンジニアの転職メモ - Qiita
Webアカウントの作成・提示 相手先に自身のWebアカウントを提示する（提示は職務経歴書内で行う形） 具体的には下記のアカウント。 GitHub Qiita SlideShare 他にも技術系のWebサービスを積極的に利用していれば、そちらのアカウントを提示する（自分の場合はteratail） StackOverflowを積極利用していれば、そちらのアカウント名になるはず。 技術ブログがあれば、そのURLも共有する（自分の場合はQiitaがそれ）。 その他差し支えなければ、Twitter, Facebookアカウントも提示する。 履歴書 URL共有 WantedlyのプロフィールページのURL共有。 この形式で問題ない企業に対しては、これが一番早い。 そしてこの業界だと問題ないケースが多い。 人事に共有する場合は、通常の共有URLではなく「限定公開URL」を共有すること。 通常の共有URL
同人誌の無断転載サイトとその対応・削除依頼について | 56station
まとめ 削除依頼はそのサイトではなく面倒くさくても大元のサーバー会社へ 注意喚起のつもりでも宣伝になるだけなのでサイトの名前やURLをツイートしてはいけない サーバー会社だけでなく広告会社にも通報して収入源を断とう 検索除外（Google八分）は個人情報が全開になるので注意 サーバーの調べ方も、英文のテンプレートも、サイトに削除依頼してすぐ消してもらえたことに安心している人への注意も書いてありますので、スマホなどの小さな画面で読んでいるならなおさら落ち着いて最後まで読んでください。 ▼転載されているのを見つけたら？ ▼通報先（サーバーなど）の調べ方 ▼公表してはいけない理由 ▼無断転載絶対殺すマンのすすめ ▼よくある質問（教えてもらったサイトが閲覧できない・サイトに削除申請したらすぐに消してもらえたetc） 転載されているのを見つけたら？ 自分の本を見つけ、削除したい場合は削除依頼はサイト
源ノ明朝
源ノ明朝は、アドビフォントとしては２番目の Pan-CJK 書体ファミリーであり、Serif 書体として源ノ角ゴシックと対をなすものです。どちらのファミリーも、東アジアに住む 15 億の人々のための、統一された書体デザインへのニーズに応えるためにリリースいたしました。 源ノ明朝は、東アジアで用いられている４つの言語（簡体中国語、繁体中国語、日本語、および韓国語）で必要な文字をサポートします。それぞれ、７つのウェイトを持ち、各ウェイトに含まれる 65,535 の字形は、各言語の多様性を尊重するとともに、共通化できる部分については積極的にデザインの一貫性を高めるようデザインされています。さらに、欧文の豊富な文字セットを有し、ラテン、ギリシアおよびキリル文字に対応しますが、そのデザインは Source Serif に基づいています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1000万以上のWebページを AMPにした話 / making_over_10million_amp_pages - Speaker Deck
最近の Web パフォーマンス改善について知っておきたいコト
