React TypeScript Playground | 便利ツール集 by mosya
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
WordPressは世界で1番使用されているCMSかつオープンソースであるが故に、悪意のある第三者やプログラムから世界で1番攻撃されやすいCMSと言われています。 私自身も何度か攻撃を受けていて、実害に及ばなかったものから及んだものまで様々でした。クライアントの稼働しているWEBサイトに実害があった場合は、原因究明や報告、一次対応から恒久的対策までを行い、安全性を確保した上で再度稼働させる必要があり、その作業は簡単なものではありません。 被害があるのはクライアントだけではなく、そのサイトにアクセスしたユーザーに及びます。たとえ納品後の保守契約を結んでいなかったとしても、実装者の責任としてクライアント、ユーザーに安心して利用できるWEBサイトを目指さなければいけません。 私はセキュリティの専門家ではないもののWordPressを10年以上触っている中で様々な問題に当たり、対応してきました。そ
デザインとHTMLのズレを検出! Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS
2021年10月5日(火)にリリースが予定されている「Windows 11」をインストールするには、1GHz以上で動作する複数コアを搭載した64ビットCPUや4GB以上のRAM(メモリ)、64GB以上のストレージなどのさまざまなシステム要件を満たす必要があります。Microsoftが公式配布している「PC正常性チェック」は、自分のPCがシステム要件を満たしているかをサクッと調べられる便利なツールですが、一時削除からの復活を機に「使っているPCがWindows 11を導入できない理由」を教えてくれるようになったとのことなので、実際に使ってみました。 新しい Windows 11 OS へのアップグレード | Microsoft https://www.microsoft.com/ja-jp/windows/windows-11 2021年6月25日、Windows 11の発表と同日に配布され
WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い方 shaperの特徴 shaperはWebページの各UI要素に適用したスタイルの調整を表示を見ながらできるオンラインツールです。 例えば、スペースの量を変えるだけでデザインの印象はかなり変わりますね。 スペースの量を変えてみた フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸などの値を調整できます。 ライトモードとダークモードにも対応しており、上部のパネルで変更
こんにちは! Webディレクターのなべちゃんです。 Webサイト制作はヒアリングから始まり、見積もり・提案、デザイン、コーディングなどの工程があるのですが、その中で今回は「テスト」について紹介します。 ディレクターが行うテストについて ここで紹介するテストは、エンジニアリングなテストではなく、ディレクターが行っているテストです。実装担当者が一通りコーディングを終えテストをしたあとで、ディレクターが最終チェックをしていきます。 ディレクターが行っているテスト デザイン再現性テスト(デザイン通りにコーディングがされているか)はデザイナーが、その他単体テスト、結合テストなどはエンジニアが行っていて、十分なテストを行い、ついにリリースを迎えます! テストに対する心構え 先ほど「十分なテスト」という表現をしましたが、「完璧なテスト、完璧なサイト」をつくるのは、実は不可能とされています。 「バグを全部
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLやJavaScriptのプレイグラウンドサービスは便利です。特に外部公開する際に便利なのですが、逆にオフラインで自分だけをちょっと試したい時には面倒だったりします。社内データにアクセスした結果を試したい時にも不便でしょう。 今回紹介するCodeSwingはVisual Studio Code上で使えるプレイグラウンドです。 CodeSwingの使い方 作成はコマンドで行います。 HTMLだけやテンプレートエンジンやCSSエンジンを選択できます。 作成しました。コード補完が付いているのが便利です。 TypeScriptで書いてちゃんと動きます。 画面構成の変更も可能です。 CodeSwingを使えばVisual Studioがそのままプレイグラウンドになります。SCSSを試し
Filter fonts0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
サーバーエンジニアを行っているinamuuと言います。夏頃にお声がけをいただいてから、ご報告までしばし時間を要してしまいました。 この記事では、最近放置気味となっていた、専用サーバーからメンテナンス性、コスパの良いVPSサーバーへ移行、アップデート過程の作業ログとしてまとめています。 今回実施したことは、大きく分けて以下の3つです。 サーバーの引っ越しとアーキテクチャの簡略化 サイトのSSL暗号化 テスト環境の構築 サーバーの引っ越し もともと専用サーバーを使っており、メモリも大量に積んでいましたが、あまり使用されていなかったことから、VPSサーバーへの移行を実施しました。 スペックについては割愛しますが、専用サーバーへsysstatを導入し、しばらく様子を見て見積もりを実施しました。 次に、アーキテクチャーについては、下記ではnginx+Apache(mod_php)を採用されていました
画像や文章のパターンを複数用意し、それをウェブサイト上で入れ替えて表示させてユーザーの反応を見る「A/Bテスト」は、ユーザビリティやコンバージョンを向上させる方法として利用されます。GIGAZINEでは常時複数のA/Bテストを行っており、「どのような見せ方、やり方の効果が高いのか?」という調査を行っているので、その中でわかったことをまとめました。 ・GIGAZINEの露出枠 GIGAZINEには記事広告・バナー広告・自社広告などを表示させる「露出枠」がトップページや各記事ページに配置されていますが、この露出枠は記事をスクロールすることによってユーザーに対して表示されるので、「記事をしっかり読んでもらうこと」が露出アップにつながります。そのためにはもちろん、記事自体のクオリティが非常に重要であり、通常記事でも記事広告でも、「質の高さ」を重視しています。 そしてもう1つ、「記事をしっかり読んで
function do_action($tag, $arg = '') { var_dump($tag); global $wp_filter, $wp_actions, $wp_current_filter; ... 見やすさを考えればファイル出力とかのほうがいいかも。 これで任意のページを表示すればアクション実行毎に画面出力されて動作が確認できます。 出力結果 画面ロード前 プラグインを色々いれているのでそのアクションフックも確認できます。 post_typeは1種類しか追加していないのに何回も呼ばれている不思議。 string(16) "muplugins_loaded" string(19) "registered_taxonomy" string(19) "registered_taxonomy" string(19) "registered_taxonomy" string(1
文字を入れ替える置換処理を何度も繰り返し行うことがあります。正規表現を使えば複数のパターンをまとめることもできますが、それでもなお、何度も何度も行わないといけないこともあるでしょう。 そこで使ってみたいのがMultiReplaceです。TSV形式で置換条件をまとめて設定できます。 MultiReplaceの使い方 利用例です。上に置換条件、中央に対象文字列、下に結果が出ます。 MultiReplaceは修正した内容がリアルタイムに反映されます。置換条件を追加すれば、それもまた反映されます。必要な結果が得られるように条件を変更しながら試してみてください。 MultiReplaceはVue製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。 MultiReplace ueruku/MultiReplace: TSV形式(=Excelコピペ)で複数の文字列を一
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。 今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もできます。 Responsively Appの使い方 立ち上げました。iOS系とノートPCでの表示をテストしています。 Webサイトを変えると、全体に反映されます。 表示を横に並べる形にしました。 表示するデバイスを選択します。カスタムサイズも可能です。 表示するデバイスを絞り込めます。 横向きに変更しました。 デバイスを指定して開発者ツールを開けます。 Responsively Appはクリックイベントをすべての表示に対して適用したり、ホットリロードにも対応しています。サイト
インターネットの速度を計測できるスピードテストには、Googleの「インターネット速度テスト」やNetflixの「fast.com」がありますが、どちらも簡単な測定結果しか表示することができません。Cloudflareが公開した「speed.cloudflare.com」を使うと、アクセスするだけで回線速度やリクエストの遅延を計測できるほか、測定結果の元データの数値まで確認することができます。 Speed https://speed.cloudflare.com/ About Speed https://speed.cloudflare.com/about/ 「speed.cloudflare.com」にアクセスすると、すぐに自分が利用しているインターネットの回線速度の計測が始まります。 しばらくするとグラフや地図も表示されます。記事作成時点では測定対象は下りの速度のみで、ダウンロードする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く