任天堂が2022年9月9日に発売した「スプラトゥーン3」は国内での販売数が500万本以上という超人気ゲームです。このスプラトゥーン3の通信をパケットキャプチャーで調べることで、オンラインゲームなどに必要な最新の通信技術を学びます。 スプラトゥーン3をパケットキャプチャーで解析、最新の通信技術を学ぼう この特集は、人気のスプラトゥーン3を通して、最新の通信技術の基本を学んでしまおうというものです。今回は、実際にスプラトゥーン3のパケットをキャプチャーして、それらの通信技術が実際にどのように使われるのかを見ていきます。 2022.11.22 スプラトゥーン3の通信に欠かせない、UDPとNAT越えを理解しよう この特集は、人気のスプラトゥーン3を通して、最新の通信技術の基本を学んでしまおうというものです。前半の今回はスプラトゥーン3を含むオンラインゲームの通信技術を解説します。 2022.11.

先日とあることから、過去Facebookメッセンジャーでやりとりした内容をダウンロードしなくてはいけないことがありました。 手順がちょっとわかりにくい上、FacebookのUIも日々変わっているようで最新のUIに即したダウンロード方法が見つからなかったのでメモしておきます。 まずは画面右上の▼をクリック PCでFacebookにアクセスすることを前提にご説明しますね。まずは画面右上のメニューボタンの右端にある下向きの三角矢印をクリックして、表示されるメニューの中から「設定」を選択してください。 設定画面での操作 設定画面に遷移した後、画面左に表示されているメニューの中から「あなたのFacebook情報」を選択してください。すると画面右側に詳細が表示されます。 詳細の中から「個人データをダウンロード」というリンクがあるのでそちらを選択してください。 ダウンロードするデータを選択 最後にダウン

ググり力、それはエンジニアにとっては 必須の能力 になりつつあると思います。 さて、皆さんは自分のググり力で欲しい情報にちゃんとたどり着けると言えますか？ @Yametaro さんからのお題です。 ある日、コードレビュー中ワイ ワイ「さぁ、今日も同僚のコードをレビューしていくでぇ」 ワイ「まずは新卒のT君のコードを読んでいこか」 ワイ「どれどれ…」 ワイ「ん？なんやこの??っていう書き方は…？」 ワイ「ググってみよか…」 ワイ「JavaScript ??と入力して、検索ボタンをポチッとな」 ワイ「…あれ？それらしい検索結果が出てこんな…」 ワイ「ぐぬぬ、記号関係はググりづらいこともあるんやな…」 ワイ「これじゃあ今日はもう、酒飲んで寝るしかないやないか…」 〜飲酒、そして就寝へ…〜 では JavaScript で ?? の検索方法はどうしたらいいのか？ ここに１つの解答を示しておきます！

LINEを使うスマートフォンを機種変更する度に、LINEのデータ引継ぎ作業が面倒に感じます。 昨今のLINE*1ではトーク履歴をGoogleドライブにバックアップする機能が(恐らく2017年辺りから)実装されたようで、これを使うとだいぶ楽にトーク履歴を引き継ぐことができます。 従来はグループやユーザごとにバックアップを取得してSDカードに保存して、新たな端末で個別にインポートするという手数の多い手作業が多かったり、グループトークではなく個別に複数人を招待したトークはバックアップを取得できなかったりといろいろ制限があったりして、機種変更の度にデータを多少失っていました(私のやり方が悪かっただけかもしれませんが)。 「Googleドライブにバックアップする」機能を用いると、全てのトーク履歴が(ほぼ)ワンタップでバックアップ取得可能で、ワンタップで新端末でインポートすることができました。 この機

<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す

《2017年7月2日 12:30 公開/更新》 高さの異なるボックスを横に並べるならfloatよりinline-blockが便利 [ボックス,配置] スタイルシートを使って「高さの異なる複数のボックス」を横に並べるなら、floatよりもinline-blockを使う方が便利です。各ボックスの上下方向の位置を簡単に揃えられますから。必要に応じて多段表示にしたい場合に綺麗に並びます。 高さの異なるボックスを横に並べるならfloatよりinline-blockが便利 高さの異なるボックスを、floatプロパティで横に並べた場合の表示例 高さの異なるボックスを、inline-blockで横に並べた場合の表示例 高さの異なるボックスの下端を揃える場合の表示例 高さの異なるボックスの中央を揃える場合の表示例 高さの異なるボックスを横に並べるならfloatよりinline-blockが便利 不定個数のボ

HTML でリストを表示するには ul や ol 要素を使いますが、これらのマージン、インデント設定は若干わかりにくいので、ここではいろいろなパターンの表示例を確認しながら理解を深めます。 ul 要素と li 要素の padding-left図: ul 要素と li 要素の padding プロパティの意味この図は、ul 要素（あるいは ol 要素）の padding-left の値と、li 要素の padding-left の値がどの領域のサイズとして反映されるかを示しています。 特に気をつけなければいけないのは、ul 要素の padding-left 値は、li 要素の描画領域の左端までのサイズになるというところです。 言い換えると、リストマーカー（・など）の右端までのサイズです。 つまり、ul 要素の padding-left の値は、リストマーカーまで含んだサイズ であることを意識

この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンティックなクラス名を使う マークアップ構造とCSSを密結合しすぎない ルールを1つずつ説明していきます。 グローバルセレクターを避ける グローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例

HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積むとよりこの記事の内容への理解が深まるはずです。 HTML と CSS を書くときに大切なポイント2点 HTML と CSS を書くときに大切だと思うことを書きます。 1. HTML と CSS を書かない あなたがいま書いている HTML と CSS は、

丸数字（丸付き数字）「①②③④⑤」を機種依存文字ではなく『数値文字参照』で入力する方法の紹介です。 丸数字（丸付き数字）の表記 丸数字（丸付き数字）の表記 ①②③④⑤⑥⑦⑧⑨⑩ ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ 丸数字（丸付き数字）の入力方法 丸数字（丸付き数字）をHTMLで記述する場合は、下記のように記述します。 「&#9312;」の箇所が、ブラウザに表示される際に「①」となります。 表示 数値 文字参照 表示 数値 文字参照

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis

HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に

このブログでも何度か紹介している、佐藤ねじさんからのご依頼で 世界で最も小さなサイト これ作ってました。見ての通りミニマムなので、作業量もミニマムだろと思ってたら少しハマったので記しておく。 タイトルの通り、google chromeとAndroid Browserには最小フォントサイズ制限という設定があります。 chromeは10px、Android Browserは8pxです。 chromeはchrome://settings/fontsここで確認できます。 こんな感じで。 Androidは手元にないので試してないです。 今回作ったサイト、cssのfont-sizeに4pxという値を当てているんですが、この制限のせいでchromeは10px、Android Browserは8pxに表示が強制されてしまいます。 仕様の意図としてはきっとそんなに難しくなくて、web制作者の意図しないミスへ

HTML 4.01で定義されている要素の一覧。各要素の属性一覧や基本データを掲載しています。