よくあるコード共有サイトです が、グラフを絵画できるD3.js に特化しているという特徴が あります。コードを書くとすぐ に反映されるので勉強用にいい のでは。 コード共有というか、Web上で開発できる的なやつです。書いたら即反映するので動作テストにはもってこいかも。
Googleにホスティングされて いるWebフォントにCSS3等で 3Dやレタープレスなどのエ フェクトをかけた状態をサク サク確認できる、というWeb サービスのご紹介です。 Google Web Fontの使用頻度が高いなら結構役立つかもしれません。装飾したCSSの発行もしてくれます。 右カラムでGoogle Web Fontを選択、左カラムの上部にエフェクトを選択するボタンがあります。選択すれば即座にプレビューに反映されます。上記はLeandeというエフェクト。 下部でCSSのソースやWebフォント用のコードをコピー出来ます。 フォントはGoogle Web Fontにあるもの全てが揃っているわけでは無さそうですが、増えていくんじゃないでしょうか。ご利用は以下よりどうぞ。 Best Google Web Fonts
レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」を紹介します。 先日、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を投稿したところ、Chromeでも同じような機能がほしい!みたいな書き込みがあったので、探してみたら似たような拡張機能がありました。 それがこの「Resizer」です。 1.「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」については、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を参照ください。 2.インストール 「Resizer」のページ右上にある「CHROMEに追加」をクリック。 表示されたダイアログの「追加」をクリック。 これでインストールされました。 3.「Resizer」の使い方 レスポンシブWebデザインのサンプルサイトとして
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 1.「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ(Responsive)は、「よく反応して」「敏感な」という意味があるようです。 レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。 2.「レスポンシブデザインビュー」の使い方 レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。 N
2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか?動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです!便利ですよね! ↑私が10年以上利用している会計ソフト! 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」
SEO Imagination!ブログは、札幌で活動するフリーのSEOディレクター伊藤公助のブログです。SEOやSEMなどの情報を配信していきます。 最近、連続してテストサイトがインデックスされっ放しのサイトを見かけました。 パスワードをかけるなどして、クローラーのブロックをするといった対応もありますが、インデックス制御を行うだけでも、テストサイトのインデックスは防げます。 基本的な内容ですが、簡単に利用可能なインデックス制御方法を記載しておきたいと思います。 テストサイトがインデックスされてしまっていたりしませんか? 割とよく見る、良くないインデックス状況の1つに、テストディレクトリが残っている、というものがあります。 これの何がいけないか?と言いますと、重複する内容のコンテンツになり、Googleからの評価が下がります。 また。テストページも検索結果に引っかかる可能性があり、訪れたユー
個人的に使っているサービスやオンラインツール 有名どころのサービス・ツールが多いのですが、よくお世話になっているので感謝などなどを込めてずらっと紹介します。かなりノンジャンルなチョイスですが、まんま自分のブックマークから選出しているのでご容赦ください。 HiFi Regex Tester - Live JavaScript Regular Expression Tester 正規表現の結果をリアルタイムにチェックしなが記述できるツール。簡単な正規表現は、これでチェックしながら記述することが多いです。 RegExr こちらはFLASHベース。マッチングだけでなく、リプレイスにも対応し、ユーザーが登録したregexpなどを確認できます。高機能気味。 JS Minify!! - ありんく tech-tools JSを最小限のファイルサイズに圧縮してくれます。難読化とも言われる処理ですね。 CSS
WordPressを提供するAutomattic社が 先日リリースした、テーマ開発者 向けのプラグインを一括管理できる プラグイン、Developerのご紹介。 とくに特別な機能は無いです。 WordPressのプラグインの中には様々なテーマ開発補助のプラグインが存在します。その中で、Automattic社が選定して一括管理出来る様にしたプラグインがDeveloperです。 デバッグとかテストツールとか、WordPressのテーマ開発によく使われる補助プラグインをインストールできる等、一式管理できる、というプラグイン。 管理できるプラグインは以下の通り。 Debug Bar Debug Bar Cron Rewrite Rules Inspector Log Deprecated Notices VIP Scanner Monster Widget Beta Tester スクリーンショッ
Githubでソースも公開されている JavaScript構文チェックツール・ jsLint.itのご紹介。結構軽量で 使い勝手が良さそうだったので自 分のサーバーに入れて使いたいと 思います。 JavaScript用のLintツールです。同じくOSSのjslint.comを元に作成したそうです。node.jsを使用したLintツール、jshint(先日、次期バージョンも公開されました)やjshintr同様、ソースが公開されています。 JavaScriptコードをコピペするか、ファイルをアップロードする事で構文チェックが出来ます。チェックは構文だけでなく、構造上の問題も指摘してくれるっぽい。 ↑ オプションもやたら豊富。 ↑ エラーもサクッと出ます。 まださほど使ってないので精度は把握していませんけど、軽量でいい感じです。結局ブラウザごとにチェックしないとならないでしょうけど、こういうの知
JavaScriptの開発をブラウザ上で 行えるjsfiddleの正規表現版です。 reFiddleはオンラインで正規表現 テストを行えるWebツール。勉強に もいいかもしれませんね。僕も 全然出来ないので学びたい。 愛用しているjsfiddleの正規表現版、みたいなツールです。jsfiddleのように、実行テストを他サイトに表示させたりは出来ませんが、UIも似ているので同じ感覚で利用できそうです。 左側でJavaScript、ruby、.NETから選択してテストしたいコードと、コードテスト用のテキスト等を書けばいいだけ。保存も可能です。 マッチした部分がハイライトされる、というシンプルな作りです。jsfiddle同様、ユーザー登録も可能で、フォークも出来ます。 何より使い慣れているツールとUIが似てるのが嬉しかった。正規表現全然出来ないのでこれで暫く勉強してみる事にします。 reFidd
デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 Cross browser testing -BrowseEmAll [ad#ad-2] BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に対応。 IE7-9 Firefox3.6-12 Chrome12, 16, 19 Safari4, 5, 5.1 Opera10, 11 スマートフォン・タブレット 横置き・縦置きに対応。 iPhone, iPhone4, iPad, iPad2, iPad3 シミュレーター Android2.2, 2.3,
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
以前は有料ソフトであり、ロードテストを実行した結果を数値・グラフ化してまとめて保存でき、サイトへのアクセス順番を固定したりランダムにしたり、アクセスする時間間隔・接続時間・アクセスする人数の設定が可能で、さまざまなテストを自由に設定して実行できるフリーソフトが「JBlitz Professional」です。ダウンロードから機能と操作の説明までは以下から。 Website load test - JBlitz Professional http://www.cartesian.net.nz/jblitz/ ◆ダウンロード 「JBlitz Professional」を使うにはJavaをインストールしておく必要があります。 上記サイトの「Download」をクリック。 ダウンロードしたZIPファイルをExplzhなどで解凍して、Windowsを使って操作をするので「run-jblitz.bat」
Facebookのアプリ開発でJavaScript SDKをテストできる「JavaScript Test Console」について紹介します。 JavaScript Test Console 1.「JavaScript Test Console」とは 文字通り、Facebook上でJavaScript SDKをテストするためのコンソールで、テキストエリアにFacebookアプリ用のJavaScriptコードを書いて実行させるというものです。 テキストエリアにはアプリ(HTML)の内容を丸ごと記述すればいいようです。その際、JavaScript SDKの読み込みは不要です。 2.「JavaScript Test Console」にログイン 最初は「Status」が「not_authorized」になっているので、「Login」をクリック。 Rellというアプリのログイン画面が表示されるので「
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
建筑工程学院举办革命烈士陵园宣誓活动 江市南山公园革命烈士陵园举行队员入队活动。此次活动由营长林麒、副营长刘建负责,教官队成员紧随前往。 在革命烈士纪念碑前,全体学员在领誓人营长林麒的带领下进行了庄严地...
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く