Content unavailable Click here to try again. If you've seen this page more than once, try switching accounts.
2010年07月03日05:30 カテゴリTipsLightweight Languages javascript + iOS - 現在位置をGoogle Mapに表示 WEB+DB PRESS vol. 57 WEB+DB Vol.57の[速習]位置情報サービスを見てたら、 404 Blog Not Found:javascript + perl - 住所でGoogle MapにアクセスするHack で現在位置を自動入力できることに気がついたので速習。 FirefoxとiPhoneおよびiPadで動作確認しています。Safari 5でも動くのですが、位置取得ができないというエラーになります。 これと同じことはiPhone/iPad標準装備のMapアプリでも当然できますし、Twitterクライアントの多くがこれと同様の機能を備えているわけですが、自作もこの程度には楽ということで。 Enjo
更新履歴 2008-06-20: 公開 js2-mode をおとなしくさせる js2-mode は Emacs で JavaScript を書くための major-mode です。 外部の JavaScript 処理系無しに (flymake のように) 文法上のエラーを表示するなど、 かなり意欲的な機能を備えています。 しかしその一方で、js2-mode のデフォルトの挙動はかなり独特です。 ここでは、それらの挙動を他の major-mode とそろえる方法を説明します。 インストール js2-mode はファイル単体で配布されていますので、それを load-path の通った場所に置きます。 % wget http://js2-mode.googlecode.com/files/js2-20080616a.el % mv js2-20080616a.el /PATH/TO/js2.el
In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, […] In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse throug
Introducing Slippy - HTML Presentations - Jordi Boggiano HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」。 次のような、左右キーでページ送りが出来るプレゼンテーションをHTMLベースで書いて簡単に構築できるプラグインです。 ブラウザさえあれば、ビューワなしでどこでも再生できるプレゼンテーションを構築したい際に使えます。 プレゼンテーション内に出てくるコードのシンタックスハイライト機能がついているので、よりプログラマに使いやすいものになっているのも特徴。 更に、ハイライトされたJavaScriptコードをその場で実行したりなんていうことも出来ちゃいます。 ブラウザのサイズに併せてプレゼンテーションが縮小されるあたりもパワポ風になってますね。 jQuery Presentation というプラグインも
テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」 2010年06月22日- jQuery.elastic テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」。 普通テキストエリアというと、サイズは固定で、長い文書を入れると最初の方にいれたテキストがわかりにくくなってしまいますが、改行を入れると自動でテキストエリアが広がるあの便利な機能をjQueryで実現出来ます。 テキストサイズに応じて伸縮します。 改行を入れると縦に広がります。最初に入れた文書も確認しつつ長文を入力できます。 実装の方法は無茶苦茶簡単。 $('textarea').elastic(); textareaはデフォルトでこの動きになって欲しいですが、このプラグインがあれば1行で全てのt
あなたのWebを入力しやすくするjQueryプラグイン10選:CSSの書き方も分かるjQueryプラグイン実践活用法(終)(1/5 ページ) jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス/ラジオボタン、ドロップダウンリスト、テキストボックス/テキストエリア、フォームのカテゴリ別に分類して紹介します。
iPhone特有の「タップ」や本体の「回転」は、JavaScriptでも取得することができます。 つまり、Webサイト・Webアプリでこれらのイベントを捕まえてプログラムを作ることができるという訳。 簡単なサンプルを作ってみましたので、お試しください。 iPhoneのタップ・回転イベントをJavaScriptで取得するサンプル(iPhoneで確認してください) まずは、こんなHTMLを準備して・・ <dl class="iPhoneDL"> <dt>イベント</dt> <dd id="dEvent">なし</dd> <dt>X位置</dt> <dd id="dX">-</dd> <dt>Y位置</dt> <dd id="dY">-</dd> <dt>向き</dt> <dd id="dTurn">-</dd> </dl> プログラムは次の通り。 <script type="text/java
これで自前でGoogleカレンダーを持てる!jQuery&PHPで実現されたプログラム 2010年06月07日- Plugins | jQuery Plugins これで自前でGoogleカレンダーを持てる!jQuery&PHPで実現されたプログラム。 なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。 Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。 タイムライン上をドラッグ&ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK 見ての通りUIもなかなかいい感じです。 スケジュール管理等に活用できますね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-w
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら?」と思い立ったのですが、iPhoneのネイティブアプリを作るには、"Objective-C"と、"cocoa Touch"というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり(iPhoneエミュレータ上で動かす分には問題ないのですが…)と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識+αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
ZURB JavaScript Annotation Plugin - ZURB Playground - ZURB.com 画像にクリック位置に注釈を入れられるjQueryプラグインが公開されています。 クリック位置に次のように注釈を入れることが出来ます。画像サイトなんかでここが凄いみたいな部分の投票とかに使えそうですね。 単に画像を注釈できるだけでなく、ajaxによってその注釈を保存することも出来るみたいです。 関連エントリ Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグイン CSSのみで画像に違和感なく注釈を入れるサンプル
1.caret.js 参考資料のサイトを参考にしてテキストエリアのキャレットの処理に必要な関数をまとめました。IE6、Opera9.25、FireFox2.0で動作確認を取りました。それ以外のブラウザではおそらく動きません。またキャレットの座標を取得する関数はずれることがあります。 function getCaretPos(textarea){ if(Prototype.Browser.IE) { var sel=document.selection.createRange(); var sel_length = sel.text.length; var r=textarea.createTextRange(); var all=r.text.length; r.moveToPoint(sel.offsetLeft,sel.offsetTop); r.moveEnd("textedit")
ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。 http://let.hatelabo.jp/ 未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。 ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい!と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ち
Griddy: Simple Grid Overlay Plugin for JQuery | DevGrow シンプルなグリッドをレイアウトにオーバーレイ表示できるjQueryプラグイン「Griddy」。 $(要素).griddy(); のように呼び出すだけで、次のようにブロック要素にグリッドをつけることが出来ます。 ページ全体にグリッドをつけるのではなく、ブロック要素につけてくれるところがいいですね。 分割する数なんかは、optionに渡せば自動で分割してくれて、ピクセルの表示もできます。 レイアウト調整の際なんかに使えそうですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 シンプルだけどとってもクールなスライドショー実装jQueryプラグイン「simpleSli.de」 カバーフローっぽいUIが実現できるjQueryプラグイン「jCoverflip
本記事は、Microsoftの本社副社長であり、ASP.NETやSilverlightなどの開発チームを率いるScott Guthrie氏のブログを翻訳したものです。氏の許可を得て転載しています。 jQueryライブラリは情熱的な開発者のコミュニティを持っています。そしてそれは今日、Web上で最も広く使用されているJavaScriptライブラリです。 2年前、MicrosoftがjQueryの製品サポートの提供を開始すること、および今後Visual Studioの新バージョンに含めていくことについて発表しました。デフォルトでは、新しいASP.NET WebフォームまたはASP.NET MVCのプロジェクトをVS 2010で作成すると、プロジェクトに自動的にjQueryが追加されていることが確認できます。 数週間前、MIX 2010カンファレンスでの2回目の基調講演中に、Microsoftが
セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」 2010年05月12日- JQuery Narrative Select Plugin セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」が公開されています。 例えば、文章の途中にselect ボックスで選択肢を入れるようなUIがあったとすると、次のようになります。 普通にやれば、上のようになりますが、今回紹介するプラグインを使えば、次のようにアンカーっぽくなります。 クリックすると、select のように選択肢が次のようにカッコよく表示され、変更すると、当然、内容も変更されます。 Correct → Incorrect になりました。 select ボックスによるデザインも分かりやすくていいという意見もあると思いま
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
Firefox の拡張機能プラットフォームはこの Jetpack や Add-on SDK から、IE や Chrome などとも共通のアーキテクチャと API で開発できる Web Extensios に移行しつつあり、このプロジェクトの記事は古くなっています。 Jetpack は開発と導入の敷居を下げる新しい拡張機能プラットフォームです。ここでは Jetpack に関する技術情報を共有します。また、このプラットフォームによって変化する拡張機能とブラウザの次なる可能性を探っていきます。 Jetpack とは その意義と出来ることおよび実際の導入から稼働までを解説します。 3分Jetpacking 3分で作る Jetpack Feature。Jetpack の魅力はその開発の手軽さにもあるのです。 APIリファレンス Jetpack で用意している API の紹介および使い方を説明します。
二枚の画像を上下左右のスライドのアニメーションで変更するチュートリアルを1stwebdesignerから紹介します。 How to Create Sleek Sliding Box Effect With jQuery デモページ 滑らかなスライドのアニメーションはjQueryで実装されており、シンプルなスクリプトを追加するだけです。 基本のスクリプトは下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $('#top-left').hover(function(){ $(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く