サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
2024年ランキング
www.hamashun.com
canvasでグラフを描いてみる タイマー ランチに迷ったら ドラッグドロップ で jQuery UI を試してみる 概要 溜まってる分をある程度一気にやりました。 感想など canvasでグラフ 例によって手書きでグラフを書いてみたんですが、canvasの座標は左上からだけどグラフの座標は左下なのが面倒でした。 今度はカンマ区切りとかの値を渡して表示させたい。 組み込みオブジェクト ここ最近は、DateオブジェクトとかMathオブジェクトとかいう、いわゆる組み込みオブジェクトを使う機会がありました。 本で読んだ事はあったんですが、実際に使った事はあまりなかったので新鮮でした。 便利だなーと言うか。 タイマーとかランチとかは完全に自分用です。 jQuery UI 簡単便利。 サンプルが超分かりやすいですね。 英語は読めないけどコードだけ読んだらどうにかなる感じ。 idやclassを自由に変
2010-02-01：サンプルページのリンクが切れていたので直しました。 サンプルページ 概要 1月1週目のJavaScriptです。 type="image"なフォームボタンをマウスオンでロールオーバーします。 jQuery使用。 ソースコード $(function () { var preload_btn_num = $('div.submit input[type="image"]'); for(var i=0; i<preload_btn_num.length; i++) { var preload_btn_src = $(preload_btn_num[i]).attr('src').replace('.png', ''); var preload_btn = preload_btn_src + '_on.png'; $('<img>').attr('src', preload_
サンプルページ 概要 12月2週目のJSです。 ごくごく簡単なTwitter APIを練習してみました。 やりたかった事は以下です。 APIなる物をさわってAjaxなる物をやってみたい Twitterネタで何かやりたい ソースコード jQueryを使用しています。 $(function () { function twitterSearch(searchWord) { $.ajax({ url: 'http://search.twitter.com/search.json', data: { 'q': searchWord, 'rpp': 10, 'lang': 'ja' }, type: 'get', dataType: 'jsonp', success: function(data){ $.each(data.results, function(i, itm) { $('#twitte
サンプルページ 概要 12月1週目のJavaScriptです。仕事で似たような物を使う機会があったので、それをまとめてみました。 やりたかった事は以下です。 チェックボックスのチェックを、まとめてオンオフしたい オンオフはそれぞれに専用のボタンがあるんじゃなくて、一つにしたい ソースコード jQueryを使用しています。 $(function () { var checkBoxs = $('input.checkbox'); $('#allCheck').click(function(){ if(this.checked) { checkBoxs.attr('checked', 'checked'); } else { checkBoxs.removeAttr('checked'); } }); }); 学んだ事や雑感 仕様決めの時点的な事 最初は、ボタンでトグルするようにオンオフをしよう
サンプルページ 概要 ちょっと遅れましたが、11月4週目のJavaScriptです。やりたかった事は以下。 いわゆるLightbox的なアレを作ってみたい サムネイルをクリックするとリンク先の画像を読み込んでサイズを取得、それに合わせてポラロイド風の枠線を付ける できるだけ使いまわしやすく・かつカオスにならないようにする ソースコード jQueryを使用しています。 IEは naturalWidth が効かないので、まだ対応できてません。 $(function () { var thumbnail = $('#thumbnail li a'); // このセレクタを変えれば使いまわし可能 thumbnail.click(function(event){ event.preventDefault(); // リンクの遷移を止める var clickHref = $(this).attr('h
概要 11月3週目のJavaScriptです。やりたかった事は以下。 IEが、labelに含むimg要素のラベル付けに対応していない件を何とかする できればjQuery無しで作りたい。（が、しかし…） ソースコード 結局jQueryを使用しました。 $(function () { var ua = $.browser; if(ua.msie) { function inputFocus(inputId){ $('#' + inputId).focus().click(); } $('label').click(function(){ var labelFor = $(this).attr('for'); inputFocus(labelFor); }); } }); 学んだ事や雑感 ブラウザ間の差 input要素のtype属性がtextのみなら .focus(); で問題無かったのですが、
JavaScriptの習得のために、とりあえず今期中は、週に一つはJavaScriptで何かを作る事にしました。 これは会社で設定した個人目標でもあります。 できた物はJavaScript1000本ノックで作った物を置いていく場所に追加していきます。 自分で定めたルールは以下です。 ネタはかぶってもよい。 書き方を変えたりライブラリの有無などで変化を付ける 慣れると言うか、JSに実によくなじむ事が目的 本業が忙しかったりしてどうしてもできなかったら翌週に二つ作る デザインもできるだけがんばる
JavaScript1000本ノックで作った物を載せていく場所 11月1週目 フォームにフォーカスしたらデフォルトテキストが消える 11月2週目 タブでコンテンツを切り替える 11月3週目 IEでもimg要素のlabelを効かせる 11月4週目 lightbox風の物を作ってみる 12月1週目 チェックボックスを一括してチェック 12月2週目 Twitter Search的な何か 12月3週目 clearfix Generator 12月4週目 JavaScript製簡易的Twitterクライアント（作り途中） 12月5週目 IEでもimg要素のlabelを効かせる（ライブラリ無し版） 1月1週目 imageのフォームボタンをロールオーバー 1月2週目 ページ内のリストの中から目的の物を探し出す 1月3週目 canvasでモンドリアン風の絵を描いてみる 1月4週目 canvasでグラフを描
サンプルページ 概要 11月1週目のJavaScriptです。やりたかった事は以下。 input要素にデフォルトテキストが表示されていて、文字色は薄い フォーカスすると、デフォルトテキストが消えて文字色を濃く変える 何も入力せずにフォーカスを外すとデフォルトテキストが再び現れる 何か入力してあれば、再びフォーカスしても何も起こらない ソースコード jQueryを使用しています。 $(function () { var searchInpt = $("#searchText"); var defaultVal = searchInpt.attr("value"); searchInpt.css("color","#999"); searchInpt.focus(function() { if (searchInpt.attr("value") == defaultVal) { $(this)
最初に結論 この手の話は長くなりがちなので、チャッチャと進めようと思います。 なので最初に結論。 あ、「マークアップエンジニアって何？」と言う人はググってくださいすみません。 HTMLとCSSしかできない人は、そろそろ他の事も始めた方が良い。 コーダー今昔物語 その理由です。 昔：テーブルコーディングで十分だよね ちょっと昔：CSSコーディングできるんだー凄いね！ 最近：CSSコーディングくらいできて当たり前だよね？ 将来：えーHTMLとCSSしかできないのー？（未来予想） こんな感じかなーみたいな。 僕は比較的最近になってこの業界に入ってきた人なので、昔の部分は聞いた話とかからの想像です。 言いたいのは、HTMLとCSSしかできない人の価値はこの先低くなっていくよねって事です（人材的な意味で）。 HTMLコーダー・マークアップエンジニアが進むべき道は？ ではどうしたらいいのか？ 答えにな
前回の記事で5台目のXPマシンを買った事を書きましたが、そうなってくるとそろそろインターフェイスにも飽きてきます。 サブマシンのThinkPadはVistaなんですが、会社と自宅のメインマシンは共にXPなので、いい加減あの青いバーとかうんざりしていたのです。 なので、デスクトップをカスタマイズしてみました。 基本的にはツールを導入するだけで簡単に行える、あっさりめなカスタマイズです。 壁紙をかっこよくする まずは何はなくとも壁紙です。 デスクトップイジリは壁紙に始まり壁紙に終わると昔の人も言ったとか言わないとか。 かっこいい壁紙はもういろんなサイトで山ほど紹介されています。 僕はFeedチェックのついでに2chまとめブログで見つける事が多いです。 週末恒例壁紙スッドレ('A`) - スチーム速報 ＶＩＰ ガ チ で カ ッ コ い い 壁 紙 く だ さ い ！ あんか～びっぷ 本日のネタ
そろそろXPマシンが手に入らなくなりそうなのと、それまで使ってたのが大分古くなっていたのと、自分の用途では7は向かないのとで、5台目のXPマシンを買いました。 以下買ってからやった事のメモです。 スペック OS Windows XP CPU Core2 Quad Q9650 メモリ 4GB HDD 1TB+320GB ビデオカード GeForce GTS250 1GB 電源 650W ファン追加 たくさん 入れたツール ノートン先生 とりあえず基本みたいな Universal Extractor どっかでオススメされてたのでいれてみた FFFTP 設定済みの物を導入。 ezhtml 設定済みの物を導入。 個人的にはVer,6.8代が結構好き。 自作Auto Hot Keyスクリプト もうこれ無しじゃWindows使えない。 Twit 超使いやすいWindows用Twitterクライアント。
古いやつ 新しいやつ 服とかはレイヤになってるから、色を変えたりできるよ！ トリミングが必要なサービスではこんな感じ。 これまでは普通に自分の顔写真を使っていたんですが、実はこれ、もう2年以上前に撮影した物で、髪型は違うし使ってる眼鏡は刺身さんからの借り物だしで、大分微妙だったのです。 で、2008年末くらいだったかな？ に941さんのアイコンがVesperさんが描いた似顔絵になって、うわー似顔絵良いなーと思っていたわけです。 なので、絵師さんに似顔絵を発注してみました。 お願いしたのはpixivフェスタなどでもお馴染みの、輝竜司さんです。 サイトには美麗イラストが盛りだくさんなのでFeed購読とかすると良いと思います！ 自分の写真とか撮って送るのは最高に恥ずかし体験でしたが、超いい感じのイラストに仕上げていただいて感謝感謝です。
今回の記事は、覚えずらい単語を覚えやすくする話です。 なお、理解しやすくするためにイメージ図を載せました。 （実はペンタブを買ったので嬉しいだけです） 偶数奇数とodd/even odd 奇数 even 偶数 覚え方は発音の文字数（という言い方で良いものか？）です。 「odd」（3文字）と「きすう」（3文字）。 「even」（4文字）と「ぐうすう」（4文字）。 行 横方向 列 縦方向 これは確か、誰かから教えて貰った覚え方です。 "行"も"列"も、二本線がある漢字なので、その二本線の方向で覚えるという物。 <と> < < > > <のl（小文字のエル）に注目します。 これに結びつくのはタグを書く時の左側（left）、という訳で<です。 ※ なお、本当は<のエルはleftではなくlessなので、そこは間違えないようにしましょう（あくまで覚えるためのゴロ合わ
HTML5を採用しているサイトを紹介するhtml5 Galleryという海外のサイトに、EDGEが紹介されました！ 評価も星4つとなかなかなようです。 ジャンルがBlogになってるのが気になりますがｗ
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ 実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions Eastに行ってきました。 会場は恵比寿のとある会議室で、少人数（参加者10人弱くらい）で行われました。 講師はJohn Allsoppさんで、通訳にヤスヒサさん。 色んなお手伝い（という紹介でいいんでしょうか）にOli Studholmeさんというチームでした。 ヤスヒサさんは久しぶりにお会いしましたが、髪が伸びていました（お前が言うな）。 参加者の中で知ってる人はネコゼさんだけでした。 あの人とかあの人とか来ると思ったのになあ。。 休憩時間に技術評論社でHTML5の記事を書いた村田さんと名刺交換をさせてもらったりもしまし
たまに上がるワーキングチェアの話題を見るたびに、イスマニアのhamashunはふはふは言いながら見させてもらっています。 せっかくなので僕の選び方を書いてみる事にしました。 ちなみに僕が会社で使っているのはVitraというメーカーのHeadLineという椅子です。 参考：HeadLine 3Dアームチェア ベーシックダーク仕様（ヘッドライン 3Dアームチェア ベーシックダーク仕様）：hhstyle.com 素材選び ワーキングチェアの素材は大きく分けてメッシュ系と布系に分けられます。 有名なアーロンチェアはメッシュですね。 メッシュは蒸れないと聞きますが、まあここは好みだと思います。 僕はメッシュは服が削れそうな気がしたので布の物を選びました。 日本製と海外製ではどっちがいい？ 平均的体格の日本人なら、基本的には日本製の方が合いやすいと思います。 オカムラのバロンとか有名ですね。僕はミーハ
vantguarde - web:g とても勉強になるブログです！ vantさんにはTwitterやら焼肉やら（なぞ）でお世話になっているのですが、今回のHTML5化後のアレコレでまた更にいっそうお世話になってしまい、そしてちょうどいいタイミングでR25を迎えられたという事で、今度お礼を兼ねて焼肉パーリーなどしたいなと思うわけでありまして。
EDGEのトップページをHTML5化しました。 開発日誌やTwitterで告知したところ、ITmedia Newsで取り上げてもらったり、vantさんが言及してくれたり、他にもご感想やご意見をいただいたり見かけたりしました。 ありがたいことです。 ここでちょっとお知らせなのですが、HTML5は策定中の仕様で使用例も情報も少ないので、実験場であるEDGEのコードは荒削りだったり誤りを含んでいる可能性があります。 もちろん今後修正していきますが、もし参考にする場合はその辺りを頭の片隅に入れていただければと。 HTML5を試してみる場合には、vantさんの二つめの言及記事で指摘されている通り、確かに文書文書したページの方がやりやすそうです。
自分のプロパティの書き順とか｜CSS HappyLifeとかRedLine Magazine : 自分もプロパティの書き順とかとかを読んだので僕も書いてみます。 プロパティの降順 clear float position display width height min-height margin padding border あとは概ねアルファベット順 わりとアバウトだった件。 テンションによって微妙に入れ替わってたりしそう。 CSSのコードの書き方 <div> <ul> <li><a href="/">hoge</a></li> <li><a href="/">huga</a></li> <li><a href="/">foo</a></li> <li><a href="/">bar</a></li> </ul> </div> 例えばこんなHTMLだったら、 div { width:
シリーズ目次 マルチモニタ編 キーボード・マウス編 ツール編 エディタ編 AutoHotkey編 ちょっとした工夫で作業スピードを上げるシリーズの最後は、AutoHotkeyです。 マークアッパーでAutoHotkeyを使っている人はこれまでに見た事が無いのですが、コーディングがかなり快適になるので試してみると良いと思います。 AutoHotkeyとは、ホットキーへの機能の割り当てなど常駐ソフトの作成に特化したスクリプトエンジン（autohotkeyとは - はてなキーワードより引用）です。 エディタからブラウザを遠隔更新するAHK 元ネタはmalaさんの最速インターフェース研究会 :: AutoHotkeyを使ってFirefoxをリロードするだけのexeファイルを作ってみたです。 使っているスクリプトもほぼ同じものですが、IE7用も使っています。 これをエディタの外部アプリケーション呼び
シリーズ目次 マルチモニタ編 キーボード・マウス編 ツール編 エディタ編 AutoHotkey編（初級）（近日公開） エディタをそのまま使っていませんか？ コーダー・マークアッパーの人たちは基本的にコードを書く事が仕事なので、IDEや各種エディタを使っていると思います。 それらの多くは設定可能な項目を持っていて、自分好みにカスタマイズする事ができます。 今回は参考までに、僕が設定している項目をご紹介します。 ショートカットキーを設定する HTMLを書くのって、実は結構面倒です。 閉じタグとか超面倒ですし、そもそも"<"とか">"のたびに毎回Shiftキーを押すのが面倒です。 あーめんどくさいめんどくさい。 ショートカットキーを設定できるエディタなら、この問題を解決できます。 例えば僕は、Ctrl+Alt+PでP要素の開始タグ～閉じタグを出して、更にカーソルを開始タグと閉じタグの間に移動する
あちらこちらで報告エントリが上がってますが、マークアッパー的な人達などが集まった忘年会（忘年会だったのか！）に行ってきました。 メンバー（リンク先は報告エントリorトップページ） コリス - の中の人 ヨモツネット - 小山田さん CSS HappyLife - 平澤さん Takazudo Clipping* - Takazudoさん Archiva - Sigさん TRANS [hatena] - arataさん vantguarde - Vantさん hamashun 雑感 「arataさんが出張で東京に来るので飲みませんか」というお誘いをTakazudoさんから頂いたのがきっかけだったんですが、気づいたらすげー豪華なメンバーに。 一番の衝撃は、「コリスに中の人は存在したんだ…！」というところなのは異論の無い所なのではござりませぬか。 話題をざっくりと この店眺めいいね このお通しおい
Windows XPを使っていると様々な不便を感じます。 その一つ一つは小さな物ですが、一日中PCを使う僕たちからするとかなりのストレスとなってしまいます。 そんな時はツールを使って解決すると良いです。 注意：紹介しているツールは全てWindows用です。 CLCL かなり有名なクリップボード拡張ツールです。 「もう使ってるよ！」という人が多いと思います。 通常、Ctrl+Cなどでコピーしておける内容は一つのみです。 もう一度Ctrl+Cをすると、内容が上書きされてしまいますよね。 CLCLを使えば、その履歴を辿って呼び出す事ができます。 Alt-Tab Extender"Joe" このツールは超オススメです。 レジストリは使っていないので、一度試してみてください。 僕は、このツールが無いとWin XPを使う気にならない程に依存しています。 マークアッパーはウィンドウが増えがちです。 エデ
シリーズ目次 マルチモニタ編 キーボード・マウス編 ツール編 エディタカスタム編（近日公開） AutoHotkey編（初級）（近日公開） 今よりコーディングのスピードを上げるには｜CSS HappyLifeで17個の作業高速化Tipsが公開されていますが、ちょこちょこ言及頂いているので僕も持ちネタを出してみます。 一つ一つが長くなりそうなので、全部で5回に分けて公開しようと思います。 マルチモニタまじおすすめ 4）デュアルじゃなくてトリプルモニタにする。 自宅会社ともにデュアルモニタだけど、1枚増やしてみる。 これで、Photoshop、エディタ、ブラウザで分けれるっていう素晴らしさ。やりたいけど、金が・・・ hamaさんとかモニタ5枚だったっけ？（笑） 今よりコーディングのスピードを上げるには｜CSS HappyLife より引用 モニタ2枚でデュアルにしている人は結構いますが、3枚でマ
前回の記事、li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.comを書くために空白類文字について調べたら、記事に必要な内容以上の知識を得ました。 また、ブクマコメントで言及を頂いたので、続編記事を書きます。 連続した空白類文字 ユースケさんのブクマコメントの内容です。 ちなみにどんなに改行や空白が連続してあっても、1つの空白として認識する（はず。あんまし覚えてないけど確かそうだったはず） はてなブックマーク - yu-suke＠double-team.orgのブックマーク / 2008年11月04日より引用 これはHTML4.01仕様書の9.1 空白類の節に載っていて、まさにそのとおりでした。 ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異
追記：トラバが送れないとの報告を受けて、文末に手動トラバを追加しました。 ナビゲーションなどをリスト要素でマークアップして、display: inline; で横並びにすると、li要素とli要素の間に謎の余白が現れます。 そして、この現象を解決する手段はいくつかあります（参考：リストをinlineで並べた時の余白｜CSS HappyLife）。 でも、この余白はそもそも何者で、なぜ現れるのでしょうか。 余白の正体 結論から言うと、この余白の正体は空白類文字です。 marginやpaddingの暴発ではありません。 では、なぜ何もない場所に急に空白類文字が現れるのでしょうか。 この謎を解くには、まずは空白類文字について調べる必要があります。 空白類文字 1 文書文字集合には、多様な空白類文字が含まれている。その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用い
hamashunのセッション 先日のCSS Niteで、「Webの世界に情報発信しよう！」というタイトルで喋ってきました。 内容は簡潔に言うと、「ブログ書こうぜ」です。 当日のアンケートを見させてもらったんですが、おおむねいい感じの評判を頂けてたようでほっと胸を撫で下ろしました。 なんて言うか、正統派のプレゼンではなかったので、もっと好みが分かれるかなーとか思ってました。 特に寸劇とか寸劇とか寸劇とか。 スライドはUPしていますが、高橋メソッド風味なので（あくまで風味）、スライドだけ見てもあまり意味は無いっぽいです。 音声とか公開・・・されるのかな？ セミナーのような場所で喋るのは今回が初めてだったので、いろいろと勉強になり、また課題も見つけられました。 喋っている時の姿勢をもうちょっとシャンとした方がいいかなとか、間の取り方をもう少し緩急付けたいなーとか。 小山田さんのセッション 今回の
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
次のページ
このページを最初にブックマークしてみませんか？
『hamashun.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
