サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
衆院選
gecko.hp2.jp
こんなXMLがあって。 <?xml version="1.0" encoding="utf-8"?> <root> <btns> <btn id="offcial"> <flag>true</flag> <url>http://www.hoge.com/</url> <target>_blank</target> </btn> <btn id="regist"> <flag>true</flag> <url>http://www.hoge.com/</url> <target>_blank</target> </btn> </btns> <pages> <page id="page1"> <file>page1.swf</file> <url>http://www.hoge.com/</url> <target>_blank</target> </page> <page id="page2
jsdo.it大好きです。 なので覚えておきたい10のことをまとめました。1 Chromeじゃなくてもすぐにコードを書きたい わからないことを質問する コメント・お気に入りにする プロフィールを変更する コメントを削除する Forkした・されたコードとのDiffを見る エディタでキーボードショートカットを使う エディタで同じ単語をハイライトする jsdo.it APIを使う Daily code rankingに載る jsdo.itを使ってる人向けです。 Chromeじゃなくてもすぐにコードを書きたい Chromeには JustEditがあるのですぐにコードを書き始める事ができます。 実はhttp://jsdo.it/code/newを叩くと書けます。ブックマークしてもいいね! わからないことを質問する 気づきづらいですが右上にDiscussionsがあります。2 プロフィールを変更する
Twitterのフォローボタンが新しくなりました。 Follow @GeckoTang エントリー フォローボタン作成ツール フォローボタンのドキュメント 何ができる? ボタンをクリックすればそのページでフォローできる。 ユーザー名をクリックすればその人の情報がポップアップで見れる サンプル jsdo.itで作りました。 新しいフォローボタンを使ってみた – jsdo.it – share JavaScript, HTML5 and CSS 設置方法 ほとんどドキュメントのままですが・・・ JavaScriptを使用する場合1 [html] Follow @GeckoTang [/html] iframeを使用した場合 [html] [/html] 対応状況 Firefox 3, 4 Chrome Safari 4, 5 Opera 10 Internet Explorer 6, 7, 8
#!は検索しても出ないから・・・ “#!” に一致する情報は見つかりませんでした。 #! に一致する情報は見つかりませんでした。 というツイートを見かけたので調べてみた Ajax を利用したウェブサイトを適切にクロールするためのグーグルの提案に関するウェブサイト開発者向けの説明 Making AJAX Applications Crawlable AJAXサイトをクローラブルにする – 検索エンジンフレンドリーなAJAX実装方法 Pretty URL または Pretty AJAX URL っていうみたい。 ex. www.example.com/hoge.html#!hash
IEでの表示確認作業をしていていたら・・・ 開発者ツールでブラウザモードを切り替えた際に謎の境界線が現れたのでツイートした。 IE9でエミュレートタグもしくは開発者ツールでドキュメントモードをIE7、IE8にすると2pxの境界線のようなものがつくんだね。気づかなかった。IE8でもなるんだろうなぁ。 http://twitpic.com/4yswnv
こっちのほうが考察がありますが。彼と一緒に考えた際に考えたこととかを以下に。 <a id="testID" onclick="hoge()" href="javascript:void(0);">test</a> で自分自身のidを取得したいときにぱっと思いつくのは以下 function hoge(){ alert(this.id); } とするとundefined(thisはwindow)なので <a id="testID" onclick="hoge(this)" href="javascript:void(0);">test</a> function hoge(this){ alert(this.id); } とする。でも引数書くのはなんかなーっとなったので。 function hoge(){ var e = (window.event)? window.event : argume
jQuery.camelCase()とは jQuery1.5から追加されたメソッドで、ハイフンで区切られた文字列をキャメルケースに置き換えてくれます。 jQuery.data()やjQuery.css()の中で使われているかんじ。 1.5以前からも置き換えはやってたようですが、1.5からjQuery.camelCase()ができたみたい。 使い方 引数にハイフン区切りの文字列を入れるとキャメルケースにした文字列を返します。 [javascript] var str = “-hoge-fuga”; alert($.camelCase(str)); // HogeFuga str = “hoge-fuga”; alert($.camelCase(str)); // hogeFuga [/javascript] サンプル jsdo.itで作りました。内部的に使ってるし使う機会はなさそうですが。
前回に引き続き、IE9ちゃんとWIn7ちゃんのあわせ技を攻略していきます。 JavaScriptを使って出来る事 スタートメニューに登録する タスクバーのアイコンに小さいアイコンをオーバーレイ オーバーレイしたアイコンを消す オーバーレイしたアイコンを点滅させる。 タスクバーのアイコンを光らせる メソッドはあるけど、動きません サムネイルボタンの画像を変更する タスクバーのアイコンでマウスオーバーすると出てくるボタンがサムネイルボタン サムネイルボタンをクリックしたらページに何かしらを反映させる ジャンプリストを作成する ジャンプリストを削除する jsonを取ってきてジャンプリストに表示する。 デモとかコードを見たほうが早い・・・ アプリかどうかを判断する @returns {Boolean} trueならアプリになってる [javascript] window.external.msIs
IE9の固定サイトを使ってみたので、まずはmetaタグの指定方法をまとめておく。 固定するとどうなるの? こんな風になります。 画像はjsdo.itで作ったサンプルです。 ホームボタンのアイコン画像 戻るボタンの色 進むボタンの色 ウィンドウサイズ などをカスタマズ可能です。 サイトの固定方法 Windows7でIE9をいれていること。 固定したいサイトを開いてタブをタスクバーにドラックアンドドロップする JavaScriptを使ってどうにかする。 実装方法 基本的な設定はmetaタグだけでできます。 ホームアイコンの指定 立ち上げたアプリケーションの戻る進むの横のホームアイコン icoファイルに32×32が含まれていればそれが採用される。 [html] [/html] アプリケーションの名前 タスクバーのアイコンを右クリックしたときに出るInPrivateブラウズを開始するの下にある文字
前回の no.deのクーポンをもらった。から解決していなかった問題を解決しようと思ってサポートにメールを出して解決するまでをメモ。 そもそもどうしたの 名前解決が出来てない?IPアドレスではアクセスできるけど、http://geckotang.no.de/ではアクセス出来なかった。 とりあえずコミュニティを見る The Joyent Communityを覗いて、Node SmartMachineがあったので見ていたら、smartmachine domain nameを発見 Hi! I provisioned my smartmachine a day or so ago but it seems that the domain name doesn’t work yet. I can access the box via the IP Address but not using the d
iframeで読み込むhtml内でDD_belatedPNG.jsを使うと iframeの中身がどっかに宇宙にいってしまうバグがある。 報告数も少なくgoogle先生もあんまり知らなそうだった。(ツイートで愚痴があったくらい) 解決方法としては iframeをposition:relative;にする。 PNGをSVGにして再配置する際に、基準となる要素を明示してあげる必要がある。(らしい) IE6乙!
hnode.js の ホスティングサービス no.de にアカウント申請したんだけどよくわからない node.js の ホスティングサービス no.de のアカウント申請が降りたのでとりあえず動かすまで(追記あり) のエントリーを参考にしています。 https://no.de/signupで メールアドレスとユーザーネームとパスワードを入れてサインアップ。 SSH keyを要求されるもわからないので一旦閉じて、参考にしてるページを読む。 ターミナルで以下を入れて $ ssh-keygen -t dsa -C "no.de" パスワードを2回入力する。 するとユーザーカレント/.ssh/にid_dsa.pubが作成されていたので内容をコピー。 https://no.de/sshkeysへ行って SSH keyを貼りつけてADD THIS KEYする。 https://no.de/
角丸に△をくっつけただけじゃなくて 「かわいい」吹出しが作りたいなーと思ってjsdo.itで書いてみました。 かわいいふきだし – jsdo.it – share JavaScript, HTML5 and CSS つくって思ったことをメモしておきます。 個人的にかわいいと思った3番目の雲のような吹出し。 htmlはなるべく少ないマークアップで組むことにしました。 <div class="SpeechBalloon type3"> <p>かわいいはつくれりゅ!</p> </div> 弄れる要素が少ない。 (pであまり奇抜なことしたくないのでdiv,div:after,div:beforeの3つ) divを小さくしてborder-radiusで円形にして。box-shadowで形をコピーすることにしました。 .SpeechBalloon.type3 { top:25px; mar
jQuery1.5がリリースされたのでさっそく新機能を使ってみました。 jQuery.sub jQueryのクローンを作って、jQueryを汚さずにメソッド拡張したり既存のメソッドを上書きしたり出来る。 という事なので、prependToを上書きしてprependToが実行されたら何かする事が出来るんじゃないか?と思いました。 deferred.then() $.getや$.getJSONした時にthenをメソッドチェーンすることで第一引数に成功時のコールバック関数、第二引数に失敗時のコールバック関数を指定できます。 とりあえず習うより慣れろということでドキュメント見ながら作ってみました。 ・RSSを読み込んで(xmlしかなかったのでyahooPipesでjson化しました) ・DOMに挿入 ・挿入された時点で「追加されました」と表示する jQuery1.5 sub()
Name Mail address (非公開) URI Remember personal info Yes No Commentスタイル指定用の一部の HTMLタグが使用できます。 Add Your Comment Trackbacks:0 Trackback URL for this entry http://gecko.hp2.jp/2010/06/30/background%e3%81%a7%e5%a4%a7%e3%81%8d%e3%81%99%e3%81%8e%e3%82%8b%e7%94%bb%e5%83%8f%e3%81%af%e8%a1%a8%e7%a4%ba%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84/trackback/ Listed below are links to weblogs that reference 【iPhone/iPad
勉強がてらsafari5用エクステンション「Honyac」を作りました。 以下からダウンロードする事が出来ます。 Honyacはテキストを選択すると、その場でテキストを翻訳することが可能です。 日⇔英に対応しています。 インストール後、ブラウザの再起動もしくは新しいウィンドウやタブを開くことで、そのウィンドウやタブから使えるようになります。(リロードでも可) 設定画面から翻訳タイプを切り替える インストールして設定->機能拡張を選択。 Honyacを有効にすることで使用可能になります。 翻訳タイプを3種類から選択出来ます。(インストール時は”使用しない”) ツールバーから翻訳タイプを切り替える ツールバーのカスタマイズで「選択して翻訳」をツールバーにドラッグすることで 設定を開くことなく翻訳タイプを切り替えることが出来ます。 1. 使用しない 2. 日本語を英語にする
以下のようなtableを書いたときに子要素であるtrを取得したいわけで。 <table id="table"> <tr> <td>hoge1</td> <td>hoge2</td> </tr> <tr> <td>hoge3</td> <td>hoge4</td> </tr> <tr> <td>hoge5</td> <td>hoge6</td> </tr> </table> <form action="javascript:void(0);"><input id="input" type="button" name="" value="run" /></form> 単純にjQueryを使うと $("#input").click(function(){ console.log($("table").children()); //jQuery(tbody) }); としちゃうんですが。 どうや
windows safari5で拡張機能が作れるらしいのでやってみる。 1. 設定>詳細>メニューバーに“開発メニュー”を表示にチェックを入れる 2. Safari Developer Programに参加してデベロッパ証明書を取得する 3. C:\WINDOWS\system32\certreq.exeがあるか確認する 3-1. なければWindows Server 2003 Service Pack 1 Administration Tools Packをダウンロードしてインストール LaunchAssistantをクリックして fileをクリック c:\certreq.txtに保存する コマンドプロンプトを立ち上げる certreq -new c:\certreq.txt c:\csr.pem を実行 ファイルを選択>c:\csr.pem したらcontinueを
jsでUserAgentを判別して、CSSを読み込ませる。 ↓iPadからみたらiPadですね。って出てます。
if(window.webkitNotifications){ $("#webkit").html("webkitNotificationsをサポートしている"); }else{ $("#webkit").html("webkitNotificationsをサポートしていない"); } 通知許可 デスクトップ通知を許可する $("#request-permission").click(function(e) { e.preventDefault(); window.webkitNotifications.requestPermission(function(){ if(cb){ cb(window.webkitNotifications.checkPermission() == 0); } }); }); 外部、内部のhtmlを表示する 通知(300x120のtest.htmlを表示する)
■参考にしたところ http://kyle-in-jp.blogspot.com/2008/04/windowsimagemagickphp.html ■環境 windows xampp/apache PHP Version 5.3.1 1.ImageMagickの入手 ftp://ftp.imagemagick.org/pub/ImageMagick/binaries/ から ImageMagick-6.6.1-4-Q16-windows-dll.exe を手に入れてインストール。 C:\ImageMagick とかが望ましいと思うわけです(空白が入らないようなパスで。Program Filesとかダメ)。 勝手にpathも通してもらうと楽。 2.MSVC++2008 SP1再頒布可能パッケージ(参考にした記事の時点では2005のパッケージですが)を入手 http
Twitterのテキストを美咲フォントにするHatena::Letを作ってみました。 実験には8*8ドット日本語フォント「美咲フォント」を使わせていただきました。 いろいろ試した結果必要になったファイル a. ttfファイル b. @font-faceが書いてあるcss(これはcを読み込む) c. aからfontを直接読むと認識されなかったのでヘッダつけてaをreadfileするphp bのソース @font-face { font-family: 'Misaki'; font-style: normal; font-weight: normal; src:local('Misaki'), url('フォントになりすますphp') format('truetype'); } /* http://www.geocities.jp/littlimi/misaki.htm 美咲フォント ア
結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。 linkやcss内の@mediaでどうにかなるもんだと思ってましたが。 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。 var iPad = /iPad/.test(navigator.userAgent); if(iPad){ //iPadだけに適用させたい記述 } 長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。 目次 最初に調べたエントリー linkタグのmedia属性で判別する方法 landscapeモード
西新宿のWEB屋さんのなにか。【javascript】 webkitのデスクトップ通知APIのデモで気づいたことを追記。 デスクトップ通知をするものですがスクリーンセーバー(windows)の状態でもオーバーレイして表示されるようです。 chromeすごいな・・・ chrome.loadTimes().navigationTypeすると そのページがどのように開かれたかが帰ってくる。 アンカーから開かれるとLinkClicked ローカルのhtmlを表示するとOther location.hrefからだとOther ブックマークからだとOther リロードするとReload ほかにはなにがあるのかなー。 window.chrome csi: function () { native function GetCSI(); return GetCSI();} loadTimes:
さっそく試行錯誤したデモを作ってみました。 http://gecko.hp2.jp/chrome_notify/ サポートの有無 if(window.webkitNotifications){ $("#webkit").html("webkitNotificationsをサポートしている"); }else{ $("#webkit").html("webkitNotificationsをサポートしていない"); } 通知の許可をさせるにはクリックなどユーザーの動作が必要っぽい。 $("#request-permission").click(function(e) { e.preventDefault(); window.webkitNotifications.requestPermission(function(){ if(cb){ cb(window.webkitNotificatio
ImagickDrawオブジェクトでsetStrokeColorとsetStrokeWidthを指定すればテキストに境界線をつけることが出来る。 のですが・・・ どうやらPhotoShopでいう境界線中央(内側?)に近い状態になるようで・・・ そのサンプル #文字 $str = "Hello World !"; #フォントサイズ $font_size = 30; #境界線の太さ $border_w = 5; #境界線の色 $border_c = "#000000"; #フォント指定 $font_family = "Arial"; #テキストの縦表示位置 $text_x = 30; #テキストの横表示位置 $text_y = 55; #テキストの色 $text_c = "#ffffff"; # #背景画像作成 # $im = new Imagick(); $im->newImage(7
前回のエントリーで【PHP】 ImageMagickをPHPから使うときのメモを書いたけど以下のソースが動かなかった。 $file_name ='a.jpg'; $ext = "jpg"; $image = new Imagick($file_name); header('Content-type: image/'.$ext); echo $image; 矩形を描画したりとかは出来たけどファイルを読みこんでどうこうができない。 なのでさらに調べることに。 (もともとMikko’s blogはVC6じゃなくてVC9にしろよってかいてあったきがする。) ちなみに動かなかったときのphpinfoは Compiler MSVC9 (Visual C++ 2008) って書いてあった。 結果的には XAMPPのバージョンによってはphpinfoで見たときにCompilerの項目がMSVC6
次のページ
このページを最初にブックマークしてみませんか?
『</gecko>:げことじ。:日常からWEBまで:』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く