Webサイトやブログを作った後の最終確認に便利！WW checkerでmetaタグやリンク切れ、SNSタグを自動でチェックする！ | 経験知
Webサイトやブログを作った後の最終確認に便利！WW checkerでmetaタグやリンク切れ、SNSタグを自動でチェックする！ ※本ページはプロモーションが含まれています 作成:2018/01/11 Webサイトやブログを作った後にやってしまいがちなのが、metaタグやGoogle Analytics、SNSのシェアタグの設定ミス。 一見ちゃんとページが表示されているように見えても、実はちゃんと動いていなかったということは多々あります。 しっかりチェックしたつもりでもmetaタグは何かを見落としがちですし、本当にこれで良いのか不安になったりもします。 その辺の最終チェックを自動で確認してくれるツールがほしいなと思っていたら、それを実現する「WW checker」がリリースされました！ 2018年1月11日現在、β版ですが、β版期間中は無料のようです！ 実際にこのブログをチェックしてみまし
「越境」しようとして失敗し、自分の長所を見つけた話｜tommmmy
こんにちは。ツクロアの秋葉ちひろです。 この記事はDevLOVE Advent Calendar 2014 「越境」の12月14日担当となります。 はじめてDevLOVEのAdvent Calendarに参加しましたが、DevLOVE関連では、DevLOVE甲子園2013、DevLOVE現場甲子園2014 東日本大会、そしてプレイバックDevLOVE現場甲子園で発表させていただきました。 ちなみに、わたし自身はいろいろなことに興味を持ってしまうデザイナーでして、わりとエンジニアもりもりのところにも乗り込んでいくタイプです。 今回のテーマ、「越境」で超個人的に思うところを書いていきたいとおもいまーす。 自分はあるていどすでに越境しようとしていると思う「越境」は漢字のとおり境目を越えることですよね。 単純な話だと、たとえば、 ・デザイナーだけどコードもかきます ・デザイナーだけどディレクション
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
Webサイトのレスポンス速度から見るインターネットユーザーの閲覧行動と企業の課題 | Web担当者必見！ リサーチ データ&市場調査レポート
現在の日本のWebサイトにおいて、自社が運営するWebサイトのユーザーにとってのレスポンス速度を正確に把握し、適切な対策を行っているところはまだ少ない。完璧に対応するとなれば、スマートフォンだけでもOS、機種、キャリアごとの回線速度など何通りもの動作を確認する必要があり、手が回らないのが実情であろう。 このような状況を踏まえ神戸デジタル・ラボ（以下、KDL）では、現代の企業が意識すべき課題を明確にするための支援として、企業が運営するWebサイトのレスポンス速度を測定し、事業ごとの傾向を調査した。 ページの表示速度は事業に大きな影響を及ぼしている2010年の春、米Googleが検索順位の決定要素のひとつとしてWebサイトの表示速度を考慮することを発表したが、影響範囲は極めて少なく企業がこぞって対策に乗り出す要因にはなっていない。「検索」というサービスが提供する価値は検索したユーザーの意図に応
2013年Web制作に使い始めてよかったツール・サービスまとめ 〜そして時は2014年へ〜
2013年Web制作に使い始めてよかったツール・サービスまとめ 〜そして時は2014年へ〜 2013.12.19 | この方法お勧めです！ | 初心者向け | 制作あるある 皆様しわっす。WP-Dではジミーな技術系記事を書いてますエメラルドこと井村です。 パープルリーダーから「ゆく年くる年」というお題をいただきまして、たまにはまとめ記事的なものを書いてみたいと思います。 日々新技術に猛進する猛牛のような制作者の皆様には役に立たない記事だと思うので、日本酒でもたしなみながらくるくるスクロールしていただければこれ幸いであります。 個人的な話になりますが2013年3月に独立しまして、制作環境なども自分の好きな物を使うことができるようになりました。またフリーランスにとっては作業効率が自分の手取りに直結するので、作業の自動化・効率化は死活問題でもありますよね。 紹介しているツールやサービスは2013
css 設計 ストラクチャ - Google 検索
2017/06/12 · CSSを 「ストラクチャー（構造）」 と 「スキン（外観）」 に分けて、それを組み合わせて1つのオブジェクトを作る。 ... 「スキン」でボタンの色などを定義 ...
MacでWebサイトデザイン・コーディングするための、黒い画面と仲良くなりながらの環境構築手順メモ | Gatespace's Blog
タイトル長いですが。 これまでGUIアプリで操作してきたことをコマンドラインで操作出来るようにするMacでのセットアップメモ。 いつも忘れるので、現時点での覚え書きです。 自分の手順だけをざっくり書くので、わからなかったりエラーが出たらその内容で検索して調べてください。 2018.11.7 update やることリスト Xcode（iPhoneやiPadのエミュレーターなど） Homebrew（パッケージ管理ツール） Node.js、Grunt、gulp.js Sass + Compass（cssプリプロセッサ） Jekyll + bundler（スタティックウェブサイト） Git（バージョン管理） wp-cli （WordPressをコマンドラインから操作） Virtualbox、Vagrant（仮想マシン・サーバー） bash-completion（ssh実行時のホスト名の補完など）
Webコンテンツ完成! でも公開前にこんな自動チェックをかけませんか？ | 初代編集長ブログ―安田英久
今日は、Webコンテンツの公開前に行っておくとWeb担当者が楽になる自動チェック機能として、Web担のCMSで実装している6つの機能を紹介します。 ※2013-09-25 「いいと思うけど、これどうやったらウチのサイトでも使えるの？」という疑問に対する回答を追記しました。 Webコンテンツ完成! もう今すぐにでも公開したいですよね。 でもちょっと待ってください。自社サイトに掲載する前に、そのコンテンツが問題ないかチェックするべきですよね。HTML文法やリンク切れなどなど。 デザイン業界で「FlightCheck」や「プリフライト」と呼ばれる類のチェックですね。そういう「毎回やるチェック」は、システムで自動的にできるといいと思いませんか？ そういった例の1つとして、Web担のサイトで動かしている自動チェック機能を紹介します。Web担では、次のような自動チェック機能を入れています。 HTML文
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
実機と同じ画面幅で表示確認できるUA偽装ツール、できました。 | x-fit - クロスフィット -
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
ウェブ業界で求められるスキルセット | six1ブログ
先日、独立した元部下と飲んだのですが、その時の話。 その部下が「企画、コンセプト立案から、デザイン、集客」まで行なって立ち上げた事業が軌道に乗りつつあるという話を聞いたのだけど、フト 「いろいろできるんですけど、自分のスキルって専門性が低いんです。システムエンジニアとして専門って言えば、そうじゃないし。。。」 という弱音をはいてました。 その時に「そんなこと無いんじゃない？」とは思ったんだけど、その理由をチョイチョイと。 —- 例えば、少し昔の記事で、Zyngaの求める人物に関する記事があったのだけど、その中でZyngaはデザイナーとプログラマーの両方が、FlashとPHPのスキルを保有しているという話。 一般的にPC向けのソーシャルゲームでは、クライアントはFlash、サーバは、Zyngaの場合はPHPと、異なるスキルが必要になります。もしデベロッパーがいずれか一方の知識しかない場合は、
各プロトタイピングの長所・短所
ウェブサイト制作でもプロトタイプを作成する機会が増えてきたと思います。しかし、プロトタイプ一言でいっても様々な方法で作ることが出来ます。今まで様々な種類のプロトタイピングを紹介したことがありますが、どの方法を使った方が良いか迷うところです。短時間で作れるかどうかだけでなく、誰と共有するのか、変更がしやすいか、完成品とどれくらい近づけるのかなど考慮したい項目は幾つかあります。Adobe Dev Center の「Industry trends in prototyping」という記事では、プロトタイプのメリットだけでなく、よく使われているプロトタイピングも紹介しています。この記事も参考にして、幾つかあるプロトタイピングの長所・短所を考えてみました。 紙のプロトタイプ すぐに作れるメリットはあるが、完成品と使い勝手が異なるだけでなく、再利用も難しい クリック可能なスクリーンショット PDFなど
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
Safari3.1の開発ツールがなかなかすごい - Webtech Walker
Macをほとんど使わないので、Safariは動作確認程度でしか使ったことなかったんですが、Windows版の正式バージョンがリリースされたんでいろいろと使ってみました。デフォルトで入っている開発用ツールがなかなかいい感じでした。 メニューバーに開発メニューを表示する デフォルトでは開発メニューが表示されていないので、「編集」→「設定」→「詳細タブ」の「メニューバーに[開発]メニュー]を表示」にチェックをつけます。 そうするとメニューバーに開発メニューが追加されます。これで準備ＯＫ。 使ってみる いろいろと機能はあるみたいですけど、とりあえず便利そうなのをいくつか使ってみました。 ユーザーエージェント ユーザーエージェントを変更できます。「その他」から任意のユーザーエージェントも設定できます。FirefoxのUser Agent Switcherのようなものですね。 Webインスペクタ HT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
店舗サイトをWordpressで制作するときに役立つプラグイン５選 | Wordpress boy（ワードプレスボーイ）
Pull Request 4 Designers - GitHubを使ったプログラマとデザイナーのイテレーティブな開発フロー // Speaker Deck
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
Internet Explorer デベロッパー センター