Tumblrってここまでカスタマイズできるの！？Tumblrで作った驚きのWebサイト
海外では「WordPressの次はTumblrだ... / 海外のTumblrサイト / Capitol Couture他...全14件 海外では「WordPressの次はTumblrだ！」と言われるほど、CMSとして使い勝手が向上しているTumblr。確かに最近では、Tumblrで作ったとは思えないようなサイトを国内外で頻繁に目にするようになりました。 ここまでカスタマイズできるのなら、Tumblrは本当に次のWordPressとなりうるかもしれません。そんな常識を覆すような驚きのWebサイトをご紹介します。 参考：Will tumblr become the next wordpress? | Deepu Balan http://deepubalan.com/blog/2013/07/03/is-tumblr-an-upcoming-powerful-cms/
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
エレベーターメニュー用JavaScript
使用にあたっての注意 再配布はご遠慮くださいませ 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。 このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。 使用に関しては自己責任でお願いいたします。 ご要望、バグなどございましたらお問合せフォームまで 設置方法1 head要素内にfollowscrolling.jsを読み込みます。 <script type="text/javascript" src="followscrolling.js"></script> 設定可能オプション element : ‘#menu’ スクロールさせたいID名を指定します。 parent : ‘contents’ 親要素のID名を指定します。 指定した場合は指定したエレメント範囲内でスクロールします。 指定しない場合は上記で指定したelementの親要素
FLVをWEB上で再生する（その2）
大きなバージョンアップがあったため、現行バージョンではこの解説の通りに動かない場合があります。この解説に対応したバージョンの入手と関連ドキュメントについてはエントリ最下部に掲載しています。 現行バージョンのJW FLV Media Player 4.xに対応した改訂版を掲載しました。 FLVやMP3をWEB上で再生する（その3） – JW FLV Media Player 4.x 以前、FLVファイルをWEB上で再生するためのツールを紹介しました。 FlashVideoをWEB上で再生する。 – NOBODY:PLACE – MUTTER flowplayerというプログラムを使ったものだったのですが… どこかでプログラムがコンフリクト（衝突）しているらしく、 このブログ上では上手く動かないようです。 FireFoxでは問題ないんですが、IEだと次のJavaScriptで止まってしまう。
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
最近のJSの開発環境について知っておくべきライブラリ10個 - mizchi log
ほんとに10個だと思った？（無意味に煽っていくスタイル） 最近JSだけのリポジトリで無益なゲームを大量に作っては破棄しているのだけど、割とストレスなく出来上がってきたので書く。 長々と書くが、要は次のリポジトリに概要が詰まってる。 mizchi/mizchi_client_boilerplate · GitHub https://github.com/mizchi/mizchi_client_boilerplate 前提として、最近はCSJSでもnodeのインストールを前提とする環境が多い。必須といってもいい。 grunt gruntjs/grunt · GitHub https://github.com/gruntjs/grunt ビルドタスクを簡単に作れる。make、rake、などに相当するが、node製らしくファイルシステムの監視でアクションを作れるのが特長。$ grunt serv
target="_blank"を使わずに別ウィンドウで開く
通常外部リンクなどを別窓で開く際に、target="_blank"を使うと思うのですが、コレは非推奨となっているので、もうちょっと美しく別窓で開くにはどうしたらいいか？ と何度か考えた事がありますが、適当にぐぐると、JavaScriptを使うものが何点かあるけど、ソレもイマイチスマートじゃない。 例えば下記で紹介されているような。 http://allabout.co.jp/internet/hpcreate/closeup/CU20040118A/ コレはコレで今までの問題を解決するにはいいのかなーと思うのですが、ボクが個人的に求めているのはもうちょっとスマートなやり方。 今まで、この問題に関して深く調べた事が無かったのですが、雲のむこうの人からこういう方法もあるよ。 って教わったので、今回はそのやり方を紹介いたします。 取り合えず、何だかんだ言って結局JavaScriptを使うわけです
主要ブラウザでvideoタグを有効にしてくれるJavaScript「html5media」 | Web活メモ帳
html5の<video>タグを使用すると簡単に動画を埋め込めるようになりますが、対応していないブラウザが多いのも事実です。 今回ご紹介する「html5media」はvideoタグを有効にする事ができるJavaScriptです。 videoタグを使用する事でFlashなどのプラグインが必要なくなり、設置も簡単にできるようになります。 詳しくは以下 次のコードを貼付けるだけでvideoタグが有効になります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script> 後はhtmlに簡単なタ
jQueryオブジェクトとは?
jQueryオブジェクトとは? このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。 よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。） そもそもオブジェクトとは? さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。 まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。 プロパティとは? ではプロパティとはなんでしょうか?プロパテ
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
[ajax] JKL.ParseXML／ajax通信処理ライブラリ
Kawa.netxp [ajax] JKL.ParseXML／ajax通信処理ライブラリ JKL.ParseXML クラスは、サーバ上の XML 形式ファイルをダウンロード～解析して、 JavaScript オブジェクト（配列やマップ）に変換するライブラリです。 複雑な DOM 操作なく簡単なスクリプトで XML 形式ファイルを扱えるため、 Amazon など XML を出力する既存の Web サービスや、 CGI と連携することで ajax ページを手軽に構築できます。 IE・Firefox・Opera・Safari のクロスブラウザに対応しています。 XML を JSONのように手軽に扱える他、 JSON／CSV／LoadVars 形式ファイルなどのテキストファイルも利用可能です。 安定版アーカイブ： jkl-parsexml-0.22.tar.gz TAR.GZ jkl-parsex
DOMオブジェクト・jQueryオブジェクト をダンプ（テキスト表示）する。｜プログラムメモ
デバッグ時には必ず出くわすのですが、jQueryオブジェクトやDOMオブジェクトの中身を見たい！という時があります。 ・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。（出力は「エラーコンソール」） console.log( object ) Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかも合わせて確認したいときは jq_obj = $("#test01"); console.group('jq_objの中身は↓'); console.log(Object.getPrototypeOf( jq_obj )); console.log(jq_obj); console.groupEnd(); とするとメッセージがグループ化されていい感じに見えます。
[HTML5] 位置情報を継続的に取得する - YoheiM .NET
今日はHTML5のGeoLocationAPIを利用した位置情報取得、第2弾。 継続的に位置情報を取得する方法を試してみたので、それをブログに残しておきたいと思います。 HTML5の位置情報を取得する機能とは GeoLocation APIという機能を使う事で、Web画面でJavaScriptを利用する事で、位置情報（経度や緯度など）を取得出来るようになります。 ”HTML5で位置情報を取得する＠YoheiM.NET”をご参照ください。 継続的に位置情報を取得するには HTML5で位置情報を継続的に取得するには、navigator.geolocation.watchPositionメソッドを利用して位置情報を取得します。 // watch Position. var watchId = null; var watchButton = document.querySelector("#wat
![[HTML5] 位置情報を継続的に取得する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/1632d00b34fa7c78cf8450b7ea81f349cecd4a9b/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F031.gif)
FLVやMP3をWEB上で再生する（その3） – JW FLV Media Player 4.x
JW FLV Media Player 4.xを利用して、 音楽や動画を再生するための手順をまとめてみます[1]。 サンプルはこんな感じ。 1. インストール ダウンロードはこちらから[2]。 JW FLV Media Player | LongTail Video | Home of the JW Player 解凍するとファイルが6つ出てきますが、必要なのは次の2つのみ。 player.swf swfobject.js 本体は3.xの時に比べると若干大きくなっていますが、 それでも42KBしかありません。すごい。 「swfobject.js」の方は既に使用されていれば改めてインストールする必要はありません。 配置は後で変更出来るので適当な場所でOKです。 今回はとりあえず次のように配置しました。 2. コードを入力する ある程度後方互換があるので、3.xと同じ配置の仕方でも十分動きます
HTML5 Video Player -シークバー実装編 vol.1- « SMART LAB
スマートフォン,smart phone,Windows7,iPhone,Android,iPad前回は再生・一時停止など、ごくごく基本的な機能のみの実装だったので徐々に機能を追加していきたいと思います。 今回はシークバーをつけてみます。 手始めに、再生位置にあわせて伸びていくだけのバーを作ります。 サンプル ※PCから閲覧の場合、safari, chromeのみ動作します まず、メディアの長さを表すベース部分とプログレスバーの部分を div 要素で作ります。 <div id="seek-bar"><div id="progress-bar"></div></div> プログレスバーはベースの中に入れ子になってます。 次にCSSで見た目をそれっぽくします。 #seek-bar {width: 100%; margin: 5px 0; background: #ccc; -web
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
http://code.google.com/speed/articles/html5-performance.html JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。 HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^; とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。 DTD HTML4までは以下のように書かなきゃいけな
IE 6, IE 7, IE 8 が退場した未来 - latest log
Internet Explorer の自動アップグレードについて | TechNet 長かった… 本当に長かった… やっと、IE 6, IE 7 が居なくなるのですね… uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。 IE8 でやっと使えるようになる機能 一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。 display: inline-block display: table, table-cell など position: fixed; E:active {...} E:focus {...} E::first-child {...} E:lang(C) {...} E::after
Learn to Code - for Free | Codecademy
Grow in your career and unlock new opportunities by learning in-demand skills in AI, data, coding, cybersecurity, and more. Transform your team with Codecademy Teams trainingHelp everyone on your team build job-ready skills with a plan that offers flexible content assignment, progress tracking, and more.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
seo-matome.jp