Next.js+microCMS+Vercel面白い - ゆーすけべー日記
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
Android の Chrome で開発者ツールを使う方法 - Qiita
スマホのサイト作っててPCブラウザのUA偽装じゃなくて実機で見たいってことはよくある。 実機で見ながらHTMLとかCSSをいじって確認したいと思ってスマホで開発者ツール的なのが無いかと探したらあった。 あったけど試したらうまくいかなくて紆余曲折して最終的にめっちゃ簡単だったのでメモ。 やりたいこと PCブラウザのChrome開発者ツールみたいなものをスマホのブラウザでもやる 環境 PC: Windows 7 64bit PC 版 Chrome: ver. 41 Android 端末: SO-03F / Android 4.4.2 Android 版 Chrome: ver. 40 準備 Android の USB デバッグを許可する 設定 ＞ 開発者向けオプション ＞ USBデバッグ にチェック 開発者向けオプションが表示されていなければ、 設定 ＞ 端末情報 ＞ ビルド番号 を連打して表
一部のサイトでスクロールするとがくがくする - wired raven
症状 スクロールすると画面が上下にがくがくする がくがくする様子 調べてみる ホイールスクロールを乗っ取っているらしい。ホイールを動かすと1セクション単位でスクロールする Windows版Chromeだけおかしい。Edge、Safari、mac OS版Chromeでは無事 Windows版Chromeではトラックボール、タッチパッドを使っても同じ問題が発生する マウスホイールでスクロールする量を1画面ずつに変更したら解消した 複数行で行数が1や3はだめらしい。試してないけど、複数行ではダメなのだろう jQuery Scrollifyなるライブラリを使っているサイトで発生する模様 jQuery Scrollify - Power steering for your scroll wheelのページですでにガクガクしている 対応 スムーススクロールのWebサイト独自実装をやめろ - eps_r
これから始めるGCP（GCE） 安全に無料枠を使い倒せ
※距離はGoogle検索より ゾーン ゾーンはリージョン内の領域になります。選定する際のポイントは、ゾーン毎にプラットフォームの違いがあります。詳細は公式ドキュメントのリージョンとゾーンを参照。本記事では、us-west1-aを選択しています。 マシンタイプ マシンタイプは仮想 CPU（vCPU）数、メモリ、ディスク容量等、仮想マシンインスタンスで利用可能なハードウェアリソースの組み合わせです。詳細は公式ドキュメントのマシンタイプを参照。 無料枠内で利用するためには、f1-micro1台までとなります。 無料枠内で利用できるマシンタイプが変更になりました。無料枠内で利用するためには、E2-microを指定します。詳細は本記事の末尾に追記しています。 ブートディスク ストレージもいくつかオプションがあり、SSDなどを選択することができますが、無料枠内で使用する場合は標準永続ディスクを選択しま
Amazon、強気のアカウント大量閉鎖で中国越境ECに激震 リストラ・休業も | 36Kr Japan | 最大級の中国テック・スタートアップ専門メディア
世界最大のECプラットフォームAmazonが、中国業者の大規模な締め出しを行っている。アカウントを閉鎖された事業者は5万店舗に上り、損失額は1000億元（約1兆7000億円）を超えるとも言われる。 これに対し、Amazon側は「業者による不正レビューのため」としている。EC業界において架空注文や不正レビューは後を絶たない。やらせの高評価レビューを多数投稿して顧客の獲得を狙うこの方法は、ずっとグレーゾーン扱いだった。 今回のAmazonの取り組みは広範囲かつ容赦ないものだ。いったんアカウントが閉鎖されると、売上金は凍結され、倉庫内の商品も出荷できなくなる。苦労して築き上げてきたものが突如として崩れ去り、リストラや休業を余儀なくされた事業者もいるという。 ここ数年で急成長を遂げた越境ECだが、売り上げのためには手段を選ばないという時代がついに終わりを告げたことになる。 電子機器の人気ブランドも
httpbin - HTTP通信のテストに便利なWebサービス＆ソフト | ソフトアンテナ
Webプログラムの開発では、クライアンがどのようなパラメータを送信し、サーバーがどのようなレスポンスを返しているのか正確に理解している必要があります。 今回詳細する「httpbin」はこのようなHTTPリクエストとレスポンスの確認に便利なWebサービス&ソフトウェアです。Python製のオープンソースソフトウェアで、ローカルにインストールして使用することもできますが、基本的には以下の公式サイトを利用するのが簡単です。 http://httpbin.org https://httpbin.org http://eu.httpbin.org https://eu.httpbin.org https://hub.docker.com/r/kennethreitz/httpbin/ 上記URLに対してさまざまなパラメータを追加したHTTPリクエストを送信すると、クライアントのIPアドレスやユーザー
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ 横並びを縦並びにするテーブルレスポンシブ 疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブ スクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので
Docker で Web サーバを立てて検証環境を作る - Qiita
概要 静的なサイトやちょっとした js を使ったサイトを作る時に、Web サーバ上でサイトを検証したい時なる事はよくあると思います。 そんな時に一瞬で手元に Web サーバを作成し、てサクッとブラウザで確認する方法を記録しておきます。（ついでにDocker コンテナ入門もできます 対象 Web 開発始めたての人 Docker にあまり馴染みのない人 手順 作業時間: 5分位 必要なものは Docker だけです。 自分の OS に合ったものをインストールしてください。 作業 # Docker コンテナの起動 $ docker container run --name web -d -p 8888:80 -v $(pwd):/usr/share/nginx/html nginx:alpine
バイト換算
使用目的スマホの容量足りるか調べご意見・ご感想原神の容量足りるかどうか調べるのにすごく役に立ちました これ作った人に感謝感激 てか原神28GBは馬鹿げてる
nginxのファイルのアップロードサイズを変更する 413 Request Entity Too Large -- blog.10rane.com
サイズの大きなファイルをアップロードしようとするとタイトルのエラーが出るので、その対処方法。 nginx.conf まずはnginx.confファイルに「client_max_body_size 20M;」を追加。 私はリバースプロキシを利用しているので、2箇所に記述。 server { listen 80; server_name blog.10rane.com; client_max_body_size 20M; # 413 Request Entity Too Large ..... server { listen 8080; server_name blog.10rane.com; client_max_body_size 20M; # 413 Request Entity Too Large ..... php.ini php.iniは3箇所の変更。 # emacs /etc/p
指定文字数改行
※サンプル用に、一部改造しています。 吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で、「ニャーニャー！」泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 この書生というのは時々我々を捕つかまえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられて、「スー」と持ち上げられた時何だかフワフワした感じがあったばかりである。 掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。 この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真
MacでWeb開発するときにオススメなツールはこの7つ!
福田です。僕はMacでWordPressやそのほかPHPなどを用いてWebアプリケーションやWebサイトなどを開発しているのですが、その際に用いている圧倒的に便利なツールをご紹介したいと思います。 特に案件として期限を定めて作っていく場合や、修正が難しくなるレベルの大規模なアプリケーションを作る際は必須なアイテムもあります。 必須ツール IntelliJ IDEA Google Chrome SSH tailコマンド IntelliJ IDEA まず、IntelliJ IDEAは最高に便利なツールです。 何が便利かというと、コピペをしてもサジェスチョンが出なかったりしてスムーズに使えるのと、サジェストの機能が非常な優秀なことでしょうか。自作関数でも、引数の名前やタイプを自動認識してくれるので、ほとんどの場合、いちいちマニュアルなどを見ずとも開発することができます。 他に、エラー判定が有能な
iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法
最近Web制作をしていると、iPhone5で表示した時にWebページに謎の縦線が入っていました。「何がおかしいんだろう？」と思ってChromeの開発者ツールでiPhone5の表示に切り替えたのですが、そのおかしな表示が再現されない… 僕はWeb制作を行う際にいつもChromeの開発者ツールを使っていたのですが、どうやらChromeの開発者ツールは完璧にスマホデバイスを再現してくれるわけではないので、ある程度の表示はしてくれるものの本当に細かい微細な部分までは再現してくれないみたいです。 だからこそ実機テストが重要とされてるわけです。 実機で見て何が原因かすぐ判断できるようなものなら良いのですが、流石にパッと見何が原因かも分からないコードを少しづついじって、その都度実機確認というのはかなり面倒です。 そこでふとXcodeのiOSシミュレーター（エミュレーター）を思い出し、それならちゃんと表示
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
HTML Living Standard
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
ずっと無料で使えるクラウドの「Free Tier」主要サービスまとめ。2021年版
いくつかのクラウドサービスでは、1年程度の無料トライアルや一定額のクーポンなどに加えて、期間の制限なくずっと無料で使える、いわゆる「Free Tier」や「Always Free」と呼ばれる無料枠のサービスが提供されています。 こうした無料枠は試行用の環境や一時的なテスト環境などとして、期間を気にせずサービスを試すうえで非常に有効です。 もちろん、無料提供サービスは提供側の都合によってある日突然終了することもあり得ますが、いまのところ1年前の記事「ずっと無料で使えるクラウドの「Free Tier」主要サービスまとめ。2020年版」で紹介したサービスで終了したものはないようです。 本記事では期限の制限なくFree TierやAlways Freeとして提供されている主なサービスを、2021年版としてまとめました。 Amazon Web Services（AWS） 「AWS 無料利用枠」のWe
Netlifyで静的サイトのホスティングをする - Qiita
あら便利カレンダー2018というのをやってます。 去年のもあるようです。（あら便利カレンダー2017） が、僕は最近joinしたので今年からの参加になります。 あら＾〜便利カレ(ry ...あら便利カレンダー2日目の記事です。 概要 「あら便利カレンダー2018どうやって公開する？」 「GitHubPages?（思考停止）」 「Netlifyちょっと使ってみたいな」 「じゃあそれで決定」 みたいな流れで、あら便利カレンダー2018はNetlify上に載せることになりました。 基本的にAPI等の開発をするのがメインなのですが、そんな僕でも簡単にサイト公開までできました。 Netlifyでサイト公開するまでの流れを書き残しておこうと思います。 Netlifyとは 静的コンテンツのホスティングサービス。 使い勝手の良いUIと、簡単な手順で公開までできるのがめっちゃよい。 GitHub / Git
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
httpbin.org
androidブラウザで文字サイズが変わってしまう場合の対処法CSS｜ツーブロッカ
HTML Standard 日本語訳
