専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！ これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝
ブラウザー上でサクッとコードの動作テストができるWebサイトいろいろ
2017年2月17日 便利ツール 作業中に、ふと動作確認がしたい…でも新規ファイルを作るのすらめんどくさい…なんてこと、ありませんか？（え？ない？w）そんな時はファイル不要！環境設定不要なオンラインテストサイトを使っちゃいましょう！動作確認用オンラインツールはいくつかありますが、実際に使っているもの、ブックマーク登録しているものをいくつか紹介します！ユーザー登録してコードを保存できるサイトもあるので、備忘録として使ってみてもよさそうです！ ↑私が10年以上利用している会計ソフト！ CodePen Webクリエイターボックスでも何度となく紹介してきたCodePen。フロントエンドの動作確認に最適です。Emmetの利用もOK！ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。作成したコードをブログへ埋め込んだり、シェアするのも簡単！ HTML
文字の上にカーソルを置くだけでフォント名やサイズを特定、試し打ち＆ダウンロードも可能な「Fontface Ninja」
ウェブサイト上で「このフォントいいなあ」と思った時にカーソルをかざすだけでフォントの種類やサイズを知ることができ、さらにその場でフォントの文字を試し打ち＆サイズの変更などが可能で、わざわざフォントのダウンロードページを開かなくても閲覧していたウェブサイト上からフォントのファイルをダウンロードまでできてしまうというGoogle Chrome拡張機能＆Safariプラグインが「Fontface Ninja」です。 Fontface Ninja http://fontface.ninja/ Fontface NinjaはGoogle Chrome拡張機能とSafariプラグインがあり、ブックマークレットは現在開発中のようです。今回はGoogle Chrome拡張機能を使用してみます。 Google ChromeでChrome ウェブストアのFontface Ninjaのページを開きます。 右上に
JSON Online Validator and Formatter - JSON Lint
To format and validate your JSON, just copy + paste it below: About the JSONLint EditorJSONLint is a validator and reformatter for JSON, a lightweight data-interchange format. Copy and paste, directly type, or input a URL in the editor above and let JSONLint tidy and validate your messy JSON code. What Is JSON?JSON (pronounced as Jason), stands for "JavaScript Object Notation," is a human-readable
Google ウェブマスターツールの「robots.txt テスター」の使い方
Google ウェブマスターツールの「robots.txt テスター」の使い方を紹介します。 １．はじめに Google ウェブマスターツールの「クロール」メニューにある「ブロックされたURL」というサブメニューが「robots.txtテスター」に変わったようです。 旧メニュー 新メニュー メニューを開いた画面での機能は大きく変わっていないかもしれませんが、本エントリーで紹介したいと思います。 ２．robots.txt テスター robots.txtテスターの画面は次のようになっています。 編集画面ではrobots.txtを編集することができます。 その下のテキストフィールドには、robots.txtでブロックの状態をテストしたいURLを設定します。 テストでのデフォルトは「Googlebot」になっています。 botは次の7種類から選択することができます。 ３．URLのテスト 実際にUR
Emmet Re:view
A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices. Breakpoints View Displays resizeable view for each CSS media query breakpoint of your page. Contents of large viewports are dowscaled to fit your screen size. All views are fully synchronized: scrolls, form field fills and clicks, even mouse interaction
【WordPress】テーマユニットテストデータでサイトの表示をチェック | バシャログ。
来週、健康診断で内心ビビッてます。Latinです。 今回はWordPressのユニットテスト方法のご紹介です。 毎回毎回、色んなパターンの記事を手動登録したりとか、かなり面倒な訳ですが、公式で配布されているテーマユニットテスト用の「xmlデータ」をインポートする事で簡単にテストを行う事ができます。 表示確認だけ取ってみても、かなりのパターンが用意されてますので捗りそうですね。 ちなみにインポート前 ↑データインポート前の表示はこんな感じです。 テストデータのダウンロード 以下URLの「Setup」→「Test Environment Setup」のリンクにあるxmlファイルをダウンロードしてください。 Theme Unit Test WordPress Codex テストデータのインポート ↑WordPress管理画面、「ツール」→「インポート」へ進み、「WordPress」を選択します。
Theme-Check - WordPressプラグイン - テーマをチェック - WordPressの使い方と設定 - Webkaru
WordPressでテーマが適切に作成されているかをチェックするプラグイン「Theme-Check」を紹介します。 準備：デバックモードを有効に 「Thema-Check」を利用するにはデバックモードを有効にする必要があります。有効にする方法はこちらを参考にしてください。 WordPressのデバックモードを有効にする方法 WPプラグイン「Theme-Check」 Theme-Check とは プラグイン「Theme-Check」は、テーマをテストし、最新のテーマレビュー基準の仕様に従っていることを簡単に確認することができるプラグインです。このプラグインにより、WordPress.org がテーマの受付時に使用する自動化されたテストツールとまったく同じテストを自分のテーマに対して行うことができます。 まずは、WordPressのメニューから 「プラグイン」→ 「新規追加」→ 「Theme-
WordPress で Web サイトを作成する際に便利な Debug Bar
Web サイトを構築する際はエラーメッセージを表示したりどのような値を送受信してるのかを確認したり、いろいろと見ないといけない事が多いです。情報が多ければ多いほど問題の解決がしやすくなりますね。 WordPress でそういった情報を表示するには Debug Bar とそれに関連するプラグインを利用するのが便利です。 インストール ダッシュボードからプラグイン -> 新規追加 より Debug Bar で検索したらでてくるのでインストール -> 今すぐ有効化 と進めていきましょう。 また、これを利用するには WP_DEBUG を有効にしておきましょう。wp-config.php に define('WP_DEBUG', true); を追加するだけです。 有効化ができたら画面上部にある Admin バーに Debug という項目が追加されていると思います。これをクリックすると各種ソフトウェ
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
のらもじ発見プロジェクト
古い町並みには、洗練されていないけれど個性的で味のある文字がたくさんあります。このプロジェクトは、そんなステキな文字たちを「のらもじ」と名付け、それを 発見 → 分析 → フォント化 を進めていく活動です。フォントはインストールしてお使い頂けます。 We can find a lot of font in old towns. Those may not be so sophisticated but has unique charm. In this project, we named such characters “NORAMOJI”. We aim to “Find > Analyze > Reproduce” them. Users can intall and use the font.
WordPressのテーマ制作者は必携！記事のさまざまなパターンが簡単にテストできる - WP Test
WordPressのテーマで記事がどのように表示されるか、テキスト記事、画像コンテンツ、動画コンテンツなどが正常に表示されるかテストできるWP Testを紹介します。 普通に想定されるパターンだけでなく、タイトルが異常に長い、コメントがたくさんついた、カテゴリが無い、カテゴリが異常にたくさんなど、イジワルなパターンも用意されています。 WP Test ダウンロードできるテストデータはXMLフォーマットで、WordPressに直接インポートできます。画像などはuploadsフォルダでサーバーにアップします。 どんなパターンが用意されているかは、WP Testのデータを読み込ませたデモで見ることができます。たくさんあるデモページから一部をご紹介。
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
正規表現チェッカー PHP: preg_match() / JavaScript: match()
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.1 PHP及びJavaScriptコーディング中に正規表現を記述する際の動作チェック等にご利用ください。 正規表現と対象文字列を入力し、[チェック！]ボタンをクリックすると、PHP: preg_match()と JavaScript: match()の実行結果がフィードバックされます。 正規表現
45万回のアイコンABテストにみる、ダウンロードされやすいアイコンの特徴とは？ – 佐藤航陽のブログ
決済サービス「spike（スパイク）」のリリースのほうに時間を割いていて、ブログの更新が滞っていました。。。何かの片手間でブログを続けるってなかなか難しい。気分転換にブログを新しくしました。調べるおタカノリさんやサイプロさんスゲーなと思うこの頃です。 先日Google Playがリニューアルされた記事をアップして、アイコンの大きさが２倍になり、今後Google Playでますます重要になるなと感じたわけですが、７月の末に今度はPC版のGoogle Playもリニューアルされてダウンロードページのクリエイティブがアイコンとスプラッシュだけになってしまいました。以前は大きい長方形のバナーが表示されていましが、こちらは使われるのはGoogleのおすすめに入ったときだけで、ほとんどのディベロッパーには無縁のものになってしまっています。 今後アイコンが重要になってくる流れは間違いないので、これを無料
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Regulex：JavaScript Regular Expression Visualizer
Device art generator | Google Play | Android Developers
利用されているWebフォント名と、そのフォントの表示テストを行えるブックマークレット・「Type Sample」
CSS3 Keyframes Animation Generator
NameBright - Coming Soon