orientation - マニフェスト | MDN
/* キーワード値 */ "orientation": "any" "orientation": "natural" "orientation": "portrait" "orientation": "portrait-primary" "orientation": "portrait-secondary" "orientation": "landscape" "orientation": "landscape-primary" "orientation": "landscape-secondary" 値 orientation ウェブアプリの既定の方向を指定する文字列です。 orientation メンバーを指定しない場合、または不正な値が提供された場合、ウェブアプリは通常、端末の自然な方向と、ユーザーまたはシステムレベルの方向設定を使用します。 orientation の値は、次のキー
【Eruda】スマホのChromeやFirefoxで疑似開発者ツールを開けるブックマークレット | ナポリタン寿司のPC日記
この記事では、Androidスマホアプリ版「Google Chrome」や「Firefox」で疑似的な開発者ツールを開けるオープンソースプロジェクト「Eruda」について書きます。 難しい知識は不要で、用意されたブックマークレットを保存して実行するだけです。 通常、スマホアプリの「Google Chrome」や「Firefox」では開発者ツールが開けません。 2025年1月に開発終了した「Kiwi Browser」ではメニューからすぐに開けていましたが、ChromeやFirefoxにはそういったメニューがないです。 調べてみると、PCと接続してADBコマンド？USBデバッグ？やらで開発者ツールを開くことは可能らしいですが、僕みたいな初心者がスマホのブラウザ上でPCなど頼らずに単体で開くことはできなさそうです。 その代わり、有志の方が開発されている「Eruda」というツールを使えば、本物の開
iphoneで画面を下に引っ張れなくする方法 – WEBの本質
iphoneでぐいっと下に引っ張ってリロードする機能を無効化するCSSは以下 html { overscroll-behavior: none; } ブラウザによってはbodyに指定しないと動かないものもあるようなので両方に入れておきましょう。 これでカチッとしていい感じになるね！ しかし弊害もあります。 遭遇した弊害 iphoneで画面を素早くスクロールした際、勢い余って見えてる画面と実際に存在しているボタンやリンクなんかがずれてしまうことがあります。 見えてるボタンの少し上（や下）に実際のボタンがある状態で、ボタンに見えるそれをクリックしてもずれていて押せません。 特にヘッダー等を固定（fixedやsticky）にした状態で素早くスワイプするとよくずれます。 これ、overscroll-behaviorをあきらめると治ります。残念.. 関連ワード Pull-to-Refresh, sc
【GA4】ページごとのデバイス別アクセス数、割合を知りたい | ヒノキブンコ
グーグルアナティスクス GA4で、ページごとのデバイス別アクセス数は以下の方法で知ることができます。 探索＞自由形式。開いた画面の左の変数欄にて、ディメンションに「ページパスとスクリーンクラス」「デバイスカテゴリ」、指標に「表示回数」を追加 設定列の行のスペースに、1で追加した2つをドラッグして設定する。 同じく、値に表示回数をドラッグして追加 フィルタの＋をクリックして「ページパスとスクリーンクラス」を選んで、「条件」で「完全一致」を選び、「式を入力」で調べたいページのURL（ドメイン名を除くURLの「/」以下の文字列）を入力 これで、特定のページのデバイスごとのアクセスを希望の期間に区切って調べることができます。
DevTools の使い方を可能な限りスクショ付きで解説してみる
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
ひろゆき氏が「なぜ日本からGoogleやAppleなどが生まれないのか？」の答えに挙げたネット史上最大の事件。『邦キチ！映子さん』最新話は「Winny事件」がテーマ
リンク Wikipedia Winny事件 Winny事件（ウィニーじけん）とは、ファイル共有ソフト「Winny」に絡む著作権法違反（公衆送信権の侵害）を問われたものの、無罪となった刑事事件である。利用者だけではなく、アプリケーションソフトウェア開発者も、逮捕・起訴されたことで、情報産業従事者以外からも注目された裁判となった。 Winnyは、元東京大学大学院情報理工学系研究科助手の金子勇によって、2002年に開発が始まった。Winny登場以前に、P2P型ファイル共有ソフト「WinMX」が流行しており、音楽やビジネスソフト、マンガの単行本、最新映画の 7 users 41 リンク Wikipedia 金子勇 (プログラマー) 金子 勇（かねこ いさむ、1970年〈昭和45年〉7月1日 - 2013年〈平成25年〉7月6日）は、ソフトウェア開発者、情報工学者。専門はオペレーティングシステム、シ
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
lil-gui 0.20.0
Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui in most projects. See Migrating for a list of breaking changes. Basic Demo • Examples • Guide • API • GitHub import GUI from 'lil-gui'; const gui = new GUI(); const myObject = { myBoolean: true, myFunction: function() { ... }, myString: 'lil-gui', myNumber: 1 }; gui.add( myObject, 'myBoolean' ); // Checkb
10年ぶりに一人でWebサービスを作って思ったこと(エンジニア老人会)｜shi3z
StableDiffusionに対応したGakyoを雑な設計のためわずか数日で10万円くらいのクラウド利用料がかかってしまった。
Webデザインの有料学習サイトが無料化 IllustratorやPhotoshop入門などが見放題
chot.design上のコンテンツは、実際にWeb／IT企業で働いている現役のクリエイターが制作したものという。ちょっと社代表の小島芳樹さんは自身のTwitterアカウントで「変なオンラインサロン入る前にここで勉強してみてください！」とアピールしている。 無料公開を決めたのは同サービスの運営から手を引くため。現在は全レッスンの無料公開と共に、有料サービスの利用者に対して返金対応を行っている。 ちょっと社が取り組んでいたデザインやフロントエンド開発の受託事業が急激に成長した影響で、chot.designに手が回らない状況が続いた。今後はサブスク型プログラミングスクールを提供するDonbler（東京都渋谷区）が事業を継承するとしている。 関連記事 穴埋め問題を簡単に作れるWebサイト、「試験勉強に役立つ」と話題に 教育系IT企業のCTOが作成 マウスやタッチ操作で直観的に穴埋め問題を作成でき
Unreal Engine を用いたウェブコンテンツ制作 - Qiita
最近は、メタバースのブームもあり、Unreal Engineを使ったメタバース関連のコンテンツや、ウェブコンフィギュレーターなどのウェブコンテンツの相談が増えています。 ※ここでいう「ウェブコンテンツ」は、専用のアプリのインストールなしに、ウェブブラウザで体験できるコンテンツを指します。 以前は、Unreal EngineからのHTML出力を実験的な機能としてサポートしていたのですが、現在は公式にはサポートしていません(サードパーティーのプラグインなどがある場合はあります)。 しかし、ウェブコンテンツを制作する方法は、大きく分けて3つの方法が考えられます。 Pixel Streaming WebGL Render on Demand この記事では、それぞれの概要やメリット、デメリットを紹介します。 ウェブコンテンツを作る際のヒントになれば幸いです。 ● Pixel Streaming Pi
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
IIS CORS Module を試してみた - しばやん雑記
割と旬を逃した感じはしますが、IIS 側で CORS の設定を行える拡張モジュールがリリースされています。 もっと早くリリースされていれば、苦労しなかったシーンが個人的にちらほら。これまでは URL Rewrite で頑張ってた人も多いのではないでしょうか。 インストールすると CORS が扱えるようになりますが、IIS Manager から簡単に設定できるヘルパー的なものは用意されていないので、Configuration Editor から設定するか、Web.config を編集する必要があります。 個人的にはまず Configuration Editor で適当に触ってみるのが簡単でお勧めです。設定に関するドキュメントも既にちゃんと用意されているので、CORS の知識が少しあれば簡単に有効に出来ます。 しかしながら、既に ASP.NET MVC / Web API / Core を使っ
WSLでホットリロード効かない or コンパイル遅すぎ問題 - Qiita
TL; DR ホットリロード (Hot Module Replacement) を伴う開発をWSL(WSL2)上でするときは /mnt/c/Users/username と /home/username にまたがってやりとりしてはいけない．WSL側で実行しているパッケージマネージャー (npm, yarn, webpack など)がマウント先のWindowsシステム側を見に行くとそれがボトルネックになってつらい． 何が起きた Windows 10 Home で WSL2が使えるし色々機運もあってvueを始めるかということになった．Ubuntu 20.04も入れてWindows Terminal を開き，n => node => yarn => @vue/cli とインスコした．$ vue create hello-world からの $ cd hello-world && yarn ser
初心者による超初心者のためのPixiJS入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はGitHubに掲載した記事 https://github.com/wowowo142/c96 の転載となります。 記事更新情報(全部読んでからまた来た人向け) (2022/04/20) Spriteの元となる画像ファイルなど、リソースの読み込みに関してすごく分かりやすく詳細に解説されている記事がありました。 ローダー(PIXI.Loader)の使い方は筆者の能力と気力不足により本記事では解説できなかったので、 Pixiをちゃんと使いたい方はぜひ読みましょう。超オススメ。 PixiJS の Sprite 調べてみた (2020/
はじめてのPixiJS 😇 - みかづきブログ その3
いままで2DのものをつくるときはCanvasのAPIを直接叩いていたんですが、 ふと、ライブラリをつかってみようとおもいPixi.jsを試してみることにしました。 ドキュメント に目を通しながら探り探り書いたコードをメモしておきます。 JavaScript // tickerをつくる const ticker = new PIXI.ticker.Ticker(); // rendererをつくる（WebGLがつかえたらWebGLをつかう） const renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); // stageをつくる const stage = new PIXI.Container(); // 真っ赤なtextureをつくる const texture = new PIXI.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android ChromeでPull-to-RefreshをCSSで無効化する。 - Qiita
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
Basic認証のあるページにユーザ名とパスワードを書いたURLでブラウザからアクセスしました。 - Qiita
PixiJS API Documentation