タグ

ブックマーク / ascii.jp (118)

  • jQuery UIでiGoogleふうメニューを作ろう! (1/3)

    Ajaxを使った今どきのWebアプリケーションでは、グーグルの「iGoogle」のように、ドラッグ&ドロップによる直観的な操作でページ内の要素を自由に並べ替えられるユーザーインターフェースをよく見かけます。最近ではWebアプリケーションだけでなく、ポータルサイトやメディアサイトのナビゲーションメニューにも採用されるケースが目立ってきました。 今回は、jQueryの「Sortable」を使って、ドラッグ&ドロップで要素を並べ替えられるようにする方法を紹介しましょう。Sortableを使えば、ごく簡単な方法で既存のWebページにドラッグ&ドロップUIを実装できます。 Sortableをダウンロードしよう 「Sortable」は、リスト(ul/li)などの個々の要素をドラッグ&ドロップ操作でユーザーが並べ替えられるようにするライブラリです。以前紹介した(関連記事)jQueryのUIライブラリ集「

    jQuery UIでiGoogleふうメニューを作ろう! (1/3)
    starneon3517
    starneon3517 2010/12/02
    どらっく&どろっぷで要素並べ替え
  • iOS 4.2の新機能で作るHTML5+JSアプリ (1/4)

    iPhone/iPad用OSの新バージョン「iOS 4.2.1」が11月22日にリリースされました。すでにインストールした方も多いでしょう。目玉はiPadのマルチタスク対応などの新機能ですが、今回のバージョンアップはiPhone/iPad向けのWebアプリケーション開発者にもうれしい新機能が追加されています。ブラウザー周りで追加または強化された機能を以下にリストアップします。 加速度センサー/傾きセンサーのサポート Web Sockets (ソケット通信)のサポート HTML5 Formsのサポート XMLHttp Request Levle 2 (一部) のサポート 印刷のサポート Int32やFloat32Arrayなどの配列のサポート イベントの追加 Canvas/SVGの機能追加 その他 新機能に関するリファレンスは米アップルのサイトに用意されています(11/15日付の情報)。 今

    iOS 4.2の新機能で作るHTML5+JSアプリ (1/4)
  • たった5年で激変したITエンジニアの基礎スキル

    iPhoneもGmailもなかった2000年頃、たとえばメールであれば、一般ユーザーはOutlook Express、ハイエンドユーザーはBecky!を使う、といった習慣があった。Outlook Expressはデフォルトのメッセージ形式がHTMLメールだったので「Outlook Expressにはセキュリティ上の問題があるため、必ずテキスト形式に設定を変更してから使いましょう」というのが雑誌の定番解説だった。MB単位のファイルを添付して送ったら瞬時に送り先から電話がかかってきて、激怒されたこともある。瞬時に届いているのに。 当時HTMLメールを毛嫌いしていた人はいつごろWebメールを受け入れたのだろうか。いまではGmailのようなWebメールは、テキスト形式で送られてきたメールでもHTMLで表示するし、iPhoneの3G回線でMB単位の添付PDFファイルを普通に客先で表示している。どうや

    たった5年で激変したITエンジニアの基礎スキル
  • HTML5とjQueryでブラウザーがペイントツールに! (1/3)

    HTML5 Canvasで作った「シンプルペイント」。色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能) HTML5 CanvasとJavaScriptを使って、Webブラウザー上で動くお絵かきツール「シンプルペイント」を制作する企画。前回の記事では、コアとなる描画機能を作成し、PNGファイルへ保存する方法を解説しました。今回は、このシンプルペイントをベースに、ブラシの色やサイズ(太さ)を変更できるように拡張しましょう。 ブラシの色選択機能を付けるには 前回作成したシンプルペイントは単色(赤色)の描画しかできませんでした。このままだとお絵かきツールとしては不十分なので、ブラシの描画色を選択できるようにしましょう。今回は8色(黒、青、赤、紫、緑、水色、黄、白)のカラーパレットを用意し、マウスで選択した色

    HTML5とjQueryでブラウザーがペイントツールに! (1/3)
  • ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール|古籏一浩のJavaScriptラボ

    HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能) HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer(IE)をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです(ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません)。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア

    ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール|古籏一浩のJavaScriptラボ
  • ASCII.jp:Twitter APIとGAEでおもしろWebサービスを作ろう! |Twitter&Google App Engineで始めるWebプログラミング入門

    みなさんこんにちは。ふむふむソフトの飯島です。 さっそくですが、みなさんはTwitter APIを使ってプログラミングしていますか? すでに星の数ほどTwitterアプリやWebサービスはありますし、バリバリ使っている方も多いと思いますが、「知っているけれど、なかなか触るチャンスがなくて……」という方もたくさんいるのではないでしょうか? そこで今回から5回にわたって、Twitter APIを使ったWebサービスのプログラミングについて解説したいと思います。ただAPIの使い方を解説するだけでは面白くないですから、Webサービスを公開するサーバーとしてグーグルのクラウドサービス「Google App Engine(以下GAE)」を使い、自分でサーバーを用意することなく全部無料で遊んでみましょう。 連載では、サンプルコードのダウンロードはもちろん、Twitter APIの準備からGAEの準備、

    ASCII.jp:Twitter APIとGAEでおもしろWebサービスを作ろう! |Twitter&Google App Engineで始めるWebプログラミング入門
  • Macをもっとパワーアップする周辺機器&ソフト16選 (1/5)

    Macは、Windowsに比べるとソフトや対応ハードの数が少ないため、ちょっと凝ったことをやろうとすると困ったことになる……。Macを使ったことのない人の中には、そんなイメージを持っている人もいるだろう。 実際、数で言えばMac用のソフトや周辺機器はWindowsよりも少ないが、実は各ジャンルで定番とも言える製品があって、Windowsと比べてできることが極端に少ないわけではない。 確かに、以前はMac専用の周辺機器は少ないか、あってもかなり高価なものが多かった。加えて、市場シェアが少ないぶん売り場面積も狭く、周辺機器やソフトが目に付かないため、ますます手に入れにくいというイメージが増す「負のスパイラル」に陥っていたとも言える。 しかし、昨今はApple StoreやAmazon.co.jpなどのネット通販が普及したことで、場所に関係なくずいぶんとMacの製品を入手しやすくなった。あとは何

    Macをもっとパワーアップする周辺機器&ソフト16選 (1/5)
  • ASCII.jp - iPhone/Mac

    最新記事 Apple アップル「iPhoneのタッチ決済」日でも開始 iPhoneがレジ代わりに アップルは5月16日、iPhoneを店舗用タッチ決済端末として利用できる機能「iPhoneのタッチ決済」について、日でもサービスを開始したことを発表した。 iPhone アップル「iPhone 16 Pro」ディスプレー20%明るく? アップルが今年発売する「iPhone 16 Pro」のディスプレーは、一般的なSDRコンテンツで最大20%明るくなるという。著名リーカー情報。 iPhone アップル「iPhone 17 Slim」2024年発売か アップルが2025年に発売するとうわさのiPhone 17 Plusは、「iPhone 17 Slim」という名称でリリースされるという。ディスプレーアナリスト予測。 Apple 【レビュー】最先端を凝縮! 9万円台から買えるM2「iPad Ai

  • ASCII.jp:Web制作会社が作った!超使えるJavaScriptライブラリ

    「Webサイトを作るときに当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL(MITSUE-LINKS JavaScript Library)」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規

    ASCII.jp:Web制作会社が作った!超使えるJavaScriptライブラリ
  • 最終決定版! ネットで役立つ定番フリーソフト|超定番から上級者向けまで! ネットツール徹底活用

    動画や掲示板、オンラインストレージなど、普段から利用しているネットサービスは数多くある。これらのサービスのほとんどはブラウザーから利用でき、専用ソフトがいらないという手軽さが魅力だ。しかしその半面、動画のダウンロードができなかったり、サーバーが混むと接続できなくなったりと、不便に思うことも多々ある。 そこで今回紹介するのが、こういったネットサービスを便利にしてくれるフリーソフト。初心者でも安心して使いこなせるものから、機能を特化した便利ツールにいたるまで、動画、画像、音楽、コミュニケーション、ファイル管理の5つのテーマにわけて紹介していこう。 動画を楽しむ まずは見たい動画の検索やダウンロード、再生ができるソフトが基。これにプラスして、携帯プレーヤーの形式へと変換してくれるツールを使えば、ダウンロードした画像を活用しやすくなる。また、自分で動画を作るときに便利なデスクトップ録画ソフトも紹

    最終決定版! ネットで役立つ定番フリーソフト|超定番から上級者向けまで! ネットツール徹底活用
  • ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門

    Webデザイナー、(X)HTMLCSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。<cj:inc template="792" element_id="499288" />

    ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門
  • これで完璧! Chromeエクステンション決定版 (1/5)

    特集第1回では、人気ブラウザー「Firefox」ユーザー向けの拡張機能「アドオン」の中から上級者向けのアドオンを紹介した。第2回として紹介するのは、まさにその対抗勢力となる「Google Chrome」の拡張機能「エクステンション」だ。 こちらも以前、エクステンション機能のベータ版が登場して間もないころ、初めに入れておくべき入門的なエクステンションを紹介している。紹介した当時はエクステンションもまだ500ほどだったが、正式版として提供を開始した現在、アドオンの種類は2000を超えている。 そこで今回は前回紹介したものに加える形で新たに入れておきたい「上級エクステンション」を取り上げる。自社開発ならではの強み「Google活用」をはじめ、サイト閲覧に便利なもの、ネットサービスの使いこなしに使えるものなどを決定版として集めてみた。 もっとChromeを便利にしたい はじめに紹介するのは、ブ

    これで完璧! Chromeエクステンション決定版 (1/5)
  • 40分で覚える!jQuery速習講座 (1/6)

    いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは? そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目:導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

    40分で覚える!jQuery速習講座 (1/6)
  • 上級者向け! 一歩進んだFirefoxアドオン徹底ガイド (1/7)

    使い始めると手放せなくなる、気の使いこなし系アドオン Firefoxの魅力は軽快な動作速度と豊富なアドオンにある。特にアドオンはFirefoxでしか使えない便利機能も多く、ユーザーが他のブラウザに乗り換えるのをためらう大きな理由になっている。ASCII.jpでは前回の最強アドオン50選で、初心者にも安心してお勧めできる定番アドオンを紹介した。今回は、少々取っつきにくいが、使い始めれば手放せなくなる、やや「上級者向け」の便利なアドオンを集めてきた。 作業環境を快適にしたい まずはじめに紹介するのは、便利な小技系のアドオン。解説が英語だけだったり、使うのに必要なボタンをツールバーのカスタマイズ機能を使って取り出す必要があったり……といった少々の面倒さはあるものの、分かってしまえば手離せなくなるアドオンを紹介していこう。まずはブラウザー自体の高速化や印刷補助など、ユーティリティー系のアドオンか

    上級者向け! 一歩進んだFirefoxアドオン徹底ガイド (1/7)
  • IMEとして「変態」 開発陣が語るGoogle日本語入力 (1/5)

    グーグルには、勤務時間の20%を自由な企画・開発に当てていい「20%プロジェクト」という制度がある。Google検索での誤入力に対して、正しい検索キーワードを勧める「もしかして」というスペリングコレクション機能を担当している、ソフトウェアエンジニアの工藤拓氏が、同じくエンジニアの小松弘幸氏と、この「20%」で進めていたのが「Google日本語入力」だった。 工藤氏が「変換」のコアな部分、小松氏がWindowsMacintoshといったマルチプラットフォームへのつなぎ込み部分を主に担当してプロジェクトを進めた。そして仮バージョンができた時点で、相談を寄せたのがシニアプロダクトマネージャ(当時)の及川卓也氏だ。 2010年に登場するChrome OSへの搭載も予定され、Googleの日展開の重要なツールとなるGoogle日本語入力の生みの親に、その狙いや開発の思想を聞いた。 Google

    IMEとして「変態」 開発陣が語るGoogle日本語入力 (1/5)
  • Chromeで使えるエクステンション厳選25本! (1/6)

    ページ分けの多い記事も自動でめくれる、クリック一発で翻訳出来る――。 便利な拡張機能の豊富さで知られる人気ブラウザーといえばFirefoxだ。だが、そこに現在Google Chromeが「エクステンション」と呼ばれる拡張機能で猛追を始めている。グーグルが9日に公開したサイト「Chrome Extensions」にはすでに、500を超えるエクステンションが登録されている。 エクステンションに対応するChromeは現在、Windows版およびLinux版のみ。いずれも正式版ではなく4.0ベータ版で、体験したい人はそれぞれをインストールすることになる(エクステンションを入れようとするとダウンロードを促されるので、それに従えばオーケー)。Mac版も近いうちに対応予定とのことなので、しばしお待ちを。正式版の4.0リリースは2010年の見通しだ。 リリース間もない現在の問題は、Firefoxのときと

    Chromeで使えるエクステンション厳選25本! (1/6)
  • ASCII.jp:Googleも採用!CSS3実践テクニック

    CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer(IE)を除く主要なWebブラウザー(Safari/Firefox/ Opera/Google Chrome)は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google?」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。

    ASCII.jp:Googleも採用!CSS3実践テクニック
  • Flash for iPhoneの衝撃 これから何が起こる? (1/2)

    Adobe MAX 2009の様子はアドビのビデオ配信サービス「ADOBE TV」にて確認できる(関連リンク)。英語のみだが、Flash関連を知りたい人は基調講演の「MAX 2009 KEYNOTE - DAY 1」をチェックしてみよう。 マルチタッチに対応したFlash Player MAXにて発表されたFlash Player 10.1 は、モバイル環境で動作する、初の格的なFlash Playerである(関連リンク)。 従来、モバイル用のFlash Playerには、サブセットである「Flash Lite」が使用されていた。一方、今回のFlash Player 10.1では、PC、携帯電話、ネットブックなどで同じ機能性を実現している。これにより(スペックさえ足りていれば)PCで表示されるものと同一のコンテンツを、携帯電話でも表示できるようになる。 ちなみにFlash Player

    Flash for iPhoneの衝撃 これから何が起こる? (1/2)