タグ

JavaScriptとjavascriptに関するmaganebaのブックマーク (154)

  • 一つのHTMLファイルを使ったiPhone最適化サイトライブラリ·Magic Framework MOONGIFT

    Magic FrameworkはiPhone向けのオープンソース・ソフトウェア。日においてもiPhoneが約200万台発売されたという噂だ。ある程度の市場性が出てきたと言えそうだ。そうなるとネイティブアプリや最適化サイトへの需要も高まってくるだろう。 メインメニュー 幾つかのiPhone向けWebサイトテンプレートがあるが、Magic Frameworkもその一つだ。だが特徴的なのは全体で一つのHTMLのみ提供するという点だ。そしてHTMLファイルをJavaScriptで分断し、スライダを使って表示を切り替えられるようになっている。 何ページもあるようなサイトコンテンツを一つのHTMLで表現できる。例えば小説サイトで最初のページを目次に、各見出しごとにページを分割して表示するような方法が考えられる。1ページなので汎用的なテンプレートではないが、マッチする場面もありそうだ。 ページ切り替え

    一つのHTMLファイルを使ったiPhone最適化サイトライブラリ·Magic Framework MOONGIFT
  • livedoor Techブログ : アドオンした事がない人が15分間でFirefoxアドオン開発

    こんにちは。ライブドアの駒井です。 つい先日、友人に誘われて半ば強制的に「Firefox Developers Conference 2009」に参加してきました。誘ってきた友人が、当日の急用で北海道に帰る事になり、何故か私1人で不慣れな場に参加してきました。当日優しくしてくれた皆さんありがとうございました。いただいたFirefoxのTシャツも大事にします。 自分の予想に反してとっても有意義な時間となりました。筆者は普段、JavaScriptを全く書きません。C++JAVAがメインです。そんな私でも気軽に楽しめてしまうのがFirefoxアドオンでした。ということで、Firefoxアドオンを作成するための最低構成で、簡易的なアドオンを15分程度で実験的に作ってみたいと思います。 題材を模索中に自社営業部の人から次のようなアドオンがあったらありがたいと聞きました。営業訪問に際して必ず行う下記

  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
  • クライアント/サーバ実装をJavaScriptで行うフレームワーク·WSJS MOONGIFT

    WSJSはJava/JavaScript製のフリーウェア(ソースコードは公開されている。ライセンスは独自)。今時のWebアプリケーションではJavaScriptが多用されるようになっている。JavaScriptを一切触れずにWebサービス、Webアプリケーションを構築するのは難しいとすら感じられるはずだ。そうなるとサーバサイドおよびクライアントサイドで言語を二つ習得する必要が出てくる。 デモアプリケーション それを一つに統合できる可能性があるとすればGWTのようにJavaScriptを生成するフレームワークを使うか、逆にサーバサイドでJavaScriptを使うかだ。WSJSはサーバサイドJavaScriptを使うためのフレームワークを開発している。 MVCを厳密に定義し、HTMLの描画はクライアントサイドで行える。またモデルはクライアントからサーバ側のJavaScriptを呼び出せるように

    クライアント/サーバ実装をJavaScriptで行うフレームワーク·WSJS MOONGIFT
  • Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」:phpspot開発日誌

    Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」 2009年11月18日- Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実装JSライブラリ「TinyTable V3」。 次のような、UIも美しい高機能なテーブルの実装が出来ます。 普通のテーブルをリッチに スタイルを切ると、次のような単なる<table>タグで定義されたデータなのですが、JavaScriptCSSの力によって大きく形を変えています。 機能紹介 検索機能。大量にデータがあった場合にこの機能はかなり重宝します。 ソート機能。データが一杯でも分かりやすい。全カラムにおいてソート機能が付いてます ページング機能によって縦幅が大きく取られることを防ぎます。view all ボタンで全部を表示することも可能。 縦方向の合計をExcelのsumっ

  • javascriptで質問です。以下のようなことが出来るのであれば手順を教えてください。…

    javascriptで質問です。以下のようなことが出来るのであれば手順を教えてください。できればサンプルをお願いします。関連したURLでもOKです。 1. Windowsのコマンドラインからファイルに記録されたjavascriptを実行する。 2. そのscriptでパラメータで渡されたURLにアクセスし、HTMLを取得する。 3. 取得したHTML内の要素に対してjquery(#IDなどをつかって)を使ってアクセスし文字列処理を行う。 4. 結果をサーバ側にデータをPOST (無理だと思うのですがローカルのファイルに直接出力できるとなおよろし) 端的にいうとjavascriptとjqueryライブラリ(または似たようなもの)をつかって HTMLの要素にアクセスし、整形するようなスクレーピング?プログラムを 作成したいということです。 (DOMアクセスできるものがあるのですがjqueryの

  • これは面白い!JavaScriptだけで作られたOpenSocialポータル·OpenSocial Dashboard MOONGIFT

    OpenSocial DashboardはJavaScript製のオープンソース・ソフトウェア。OpenSocialというと、MySpaceやmixiといったSNS向けのツールであって、あまり一般サイトには無縁なように感じていた。だがガジェットとして捉えるとiGoogleのように個々人で使える可能性もある。 JavaScriptだけで作られているのが驚き! OpenSocial DashboardはそんなOpenSocialの可能性を存分に感じさせるソフトウェアだ。まるでMac OSXのDashboardのようなインタフェースで、OpenSocialガジェットを自由に配置できるようになっている。しかもこれがJavaScriptのみで作られているというのだから驚きだ。 仕組みとしてGoogleの提供するFriend Connectが用いられている。mixiアプリも一部については動作もできるだ

    これは面白い!JavaScriptだけで作られたOpenSocialポータル·OpenSocial Dashboard MOONGIFT
  • HTMLテーブルの縦横を固定にしてデータを見やすく·Super Tables MOONGIFT

    Super TablesはJavaScript製のオープンソース・ソフトウェア。業務システムをはじめ、レポート出力等で多用されるのがテーブル組みだ。縦横に長いデータを表示する場合、表計算ソフトウェアであればヘッダ部を固定表示にする。そうすればスクロールしても何の項目かすぐに分かる。 中央に表示されているテーブル だが素のままのHTMLではそのような柔軟な表示は行えない。そのためシステムによっては10行ごとにヘッダを繰り返し挿入したりする。だがそれも再利用性が悪くなるだろう。そこで使ってみたいのがSuper Tablesになる。 Super Tablesを使うとテーブルの縦方向ヘッダを固定にしてスクロールしても常に表示される。さらに横方向のヘッダも固定になり、一番左側のカラムが常に表示されるようになる。テーブルのユニークになるIDを常に表示したりすると便利だ。 実際のデータ。普通のテーブル組

    HTMLテーブルの縦横を固定にしてデータを見やすく·Super Tables MOONGIFT
  • ユーザビリティ向上に。デフォルト値を薄い文字で表示する·jQuery Watermark MOONGIFT

    jQuery WatermarkはjQuery用のオープンソース・ソフトウェア。最近のWebサイトでは登録フォームにどういった文字を入力すべきかを提示するケースが多くなっている。例えばユーザIDと書かれていれば何を入力すれば良いか分かりやすい。他にも検索ボックスにSearch...と書かれているのもよく見かける。 予め文字を入力してユーザビリティを向上する そんなテキスト入力を補助する効果を実現するのがjQuery Watermarkだ。名前の通りjQueryプラグインなので、jQueryを使った開発の際にはぜひ使ってみたいライブラリだ。テキストボックスの他、テキストエリアに対しても適用できる。 テキストボックスに対して利用する他、パスワードボックスでも通常のテキストを表示しつつマウスがフォーカスしたら内容を消すこともできる。さらにSafari用の検索ボックスへのデフォルト表示にも対応して

    ユーザビリティ向上に。デフォルト値を薄い文字で表示する·jQuery Watermark MOONGIFT
  • PythonのコードをJavaScriptに変換する·Pystachio MOONGIFT

    PystachioはJavaScript製のオープンソース・ソフトウェア。Webシステムにおいてクライアントサイドで選べる言語はあまり多くない。JavaScript/ActiveX/Flash/Javaくらいだろうか。動作の軽快さやユーザビリティを考えるとJavaScriptが良い選択肢になるだろう。 PythonのコードをJavaScriptに変換して実行する とはいえサーバサイドと合わせて二つの言語を使いこなすのは面倒だ。そこでPystachioの出番となる。PystachioはJavaScriptで作られたソフトウェアだが、Pythonのコードを解釈してJavaScriptとして実行してしまおうという試みがなされている。 キーワードはscriptタグの「text/python」になるだろう。これが埋め込まれている内部のコードを解釈してJavaScriptに変換するのがPystachi

    PythonのコードをJavaScriptに変換する·Pystachio MOONGIFT
  • v8エンジンによるJavaScriptのWebサーバ·node.js MOONGIFT

    node.jsはJavaScript製のフリーウェア(一部オープンソースのライブラリが入っている)。クライアントサイドとサーバサイド、両方が同じ言語で書ければどれだけ開発工数が低減されるだろうか。Web系の技術者は常にそこにジレンマを感じることだろう。 デモのチャットアプリ 方法は二つ、JavaScriptでサーバサイドを実装するか、GWTのようにJavaScriptを覆うかだ。node.jsはJavaScriptでサーバサイドを実装する。特徴的なのはそのエンジンとしてGoogle製のv8エンジンを採用していることだろう。さらにnode.js自体がポートをリッスンし、Webサーバとして動作するのが特徴だ。 独自でWebサーバを用意しているからだろうか、動作は軽快だ。チャットアプリケーションがデモとして用意されているが、レスポンスはとても良い。サーバサイドの実装と合わせて同一言語で開発できる

    v8エンジンによるJavaScriptのWebサーバ·node.js MOONGIFT
  • iモード専用サイトのhtmlソースの閲覧方法 « mpw.jp管理人のBlog

    iモードブラウザ2.0のJavaScriptを調査・研究する過程で、iモード専用サイトのhtmlソースを閲覧する方法を発見しました。 今回発見した方法を用いれば、「ドコモ・ゲートウェイ以外からのアクセスを禁止している」、「サーチエンジンのクロールを禁止している」、「XSS脆弱性が存在しない」の三つの条件を満たしているiモード専用サイトでも、htmlソースを閲覧することができます。 しかし、htmlソースを閲覧するためには、そのiモード専用サイトが別の二つの条件を満たしている必要があります。 htmlソースが閲覧可能なiモード専用サイトの条件 デフォルトホストで運用されている。(ヴァーチャルホストではない) iモードブラウザ2.0のJavaScriptからのアクセスを禁止していない。 iモード専用サイトのhtmlソースの閲覧方法 iモードブラウザ2.0のJavaScriptで、htmlソース

  • ついにここまで。WebベースのEmacs·Ymacs MOONGIFT

    YmacsはJavaScript製のオープンソース・ソフトウェア。個人的にテキストエディタはEmacsを使っている。そのためWebブラウザのテキストエリアへの入力はキーバインドが相当異なるために非常に面倒に感じてしまう。とはいえあの独特なキーバインドをWebブラウザ上で実現するのは困難だろう。 まるでEmacs! と思っていたが、意外と実現可能性が見えてきているようだ。まだ一部の機能はないものの、Ymacsは相当良い線を言っている。動作はFirefoxに限定されるようだが、YmacsはWebブラウザ上でEmacsライクな入力を可能にしているソースコードエディタだ。 ソースコードのハイライト表示はもとより、色のテーマやフォントファミリー、フォントサイズ、インデントレベルの変更にも対応している。任意のファイルは開けないものの、予め用意されているファイルであれば表示を切り替えて編集できる。 バッ

    ついにここまで。WebベースのEmacs·Ymacs MOONGIFT
  • サイト内リンクでページ遷移するAjaxサイトの作り方 – creamu

    yensdesignというサイトで、サイト内リンクでページ遷移するAjaxサイトの作り方が公開されています。 ↑がナビゲーションになっていて、クリックすると、「#home」や「#tutorials」という形でパラメータがついて、ページ遷移します。 リロードが必要ないので、ページ移動がスムーズで気持ちいいですね。 デモは以下から。 Try the tutorial! XHTMLCSSJavaScriptソースが載っているので、一度見てみてください。 Creating AJAX websites based on anchor navigation Amebaとロクナナのイベントが発表されました。友人がイベントに興味を持っていたので、以前打ち合わせにきてもらったのです。その後実現に至ったようでうれしいですね。 名村くんと浦野くんも出ますね。興味のある方はぜひ!12/8正午から申し込み開始と

  • SVGを使ったものすごいグラフライブラリ·dygraphs JavaScript Visualization Library MOONGIFT

    dygraphs JavaScript Visualization LibraryはJavaScript製のオープンソース・ソフトウェア。グラフライブラリは多数あれど、大抵は円グラフや棒グラフなどのシンプルなグラフを描く機能しかない。高度なグラフを描こうとすると利用できるライブラリは途端に少なくなる。 高機能なグラフライブラリ また高度なグラフはクライアントサイドだけでなく、サーバサイドの仕組みが必要になることも多い。そんな中dygraphs JavaScript Visualization Libraryはとても簡単に使えるグラフライブラリになっている。JavaScriptSVGを描いてグラフ化するのだ。 主なグラフはX-Y軸を持った折れ線グラフになるようだ。とはいえ測定範囲を含んだグラフを描いたり、グラフの一部をマウスを使って拡大する、マウスオーバーすると値が表示されるなど高度な機能

    SVGを使ったものすごいグラフライブラリ·dygraphs JavaScript Visualization Library MOONGIFT
  • jQuery、プラグイン、jQuery UI、Web経由のCDNとは

    jQuery、プラグイン、jQuery UI、Web経由のCDNとは:CSSの書き方も分かるjQueryプラグイン実践活用法(1)(1/3 ページ) CSSの書き方も分かる、jQueryプラグイン紹介連載 連載は、jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載です。jQuery/JavaScriptコードやHTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 第1回目は、基/おさらいとしてjQueryとプラグイン、jQuery UIについて簡単に触れ、Web経由でjQueryを使うCDN(Content Delivery Network)について解説します。 これぐらい知ってますよね? 「jQuery」基礎講座 jQueryは、米国のJohn R

    jQuery、プラグイン、jQuery UI、Web経由のCDNとは
  • ウェブアプリのスピードをチェックできるChrome用拡張機能『Speed Tracer』 | ライフハッカー・ジャパン

    Win/Linux向けChromeのみ: 先日、米LifehackerオススメのGoogleChrome拡張機能を一挙にご紹介ましたが、ウェブ開発者の方には見逃せない拡張機能がもうひとつあります。 GoogleChrome拡張機能としてリリースした『Speed Tracer』は、ウェブページの読み込み・レスポンスを測定するツール。ウェブアプリのテストにおいて、アプリのどこで時間を取っているかがわかり、パフォーマンス上の問題を特定してくれます。仕組みはシンプルで、Y軸がゼロに近づけばそのアプリは速いと考えられ、100%に近づけば動きが鈍いと判断できます。 従来、ウェブ開発者向けの同様のツールとしては、Firefox用拡張機能『YSlow』やChrome用の『Page Speed』がありましたが、『Speed Tracer』がこれらとちょっと違うのは、JavaScriptの実行に着目してい

    ウェブアプリのスピードをチェックできるChrome用拡張機能『Speed Tracer』 | ライフハッカー・ジャパン
  • JavaScriptのソースコードをもっと格好よく、見やすく·Code Illuminated MOONGIFT

    Code IlluminatedはWebベース、JavaScript製のオープンソース・ソフトウェア。開発者にとってシステムのソースコードを直接見られるというのは貴重だ。ライブラリの操作が分からないとき、どのように処理をしているのか気になった時にソースコードが見られれば簡単に解決する。 ハイライト表示されると見やすい しかし単なるソースコードのファイルだけが置いてあるのでは利便性が高いとは言いがたい。見やすくなっていてこそ、使いたいと思えるものだろう。JavaであればJavaDoc、PHP用のPHPDocumentorも知られているが、これらは書き方を習得するのが面倒に感じてしまう。JavaScriptに限定されるがCode Illuminatedはなかなかユニークなソースコードビューワーだ。 Code Illuminatedは左にクラスの説明やメソッドに関する説明がされ、右側にソースコー

    JavaScriptのソースコードをもっと格好よく、見やすく·Code Illuminated MOONGIFT
  • HTML5を使ったpbtweet·Pbtweet Application MOONGIFT

    Pbtweet ApplicationはHTML/JavaScript製のオープンソース・ソフトウェア。pbtweetと言えばFirefoxやSafariで使えるJavaScript製のソフトウェアで、TwitterをWebブラウザからでも高機能にしてくれるGreasemonkeyだ。 HTML5を使ったTwitterクライアント そのpbtweetと同名ではあるがPbtweet ApplicationはJavaScriptのみならずHTMLファイルも合わせて提供される。ローカルや任意のサーバにアップロードして使うのだが実際のデータは各クライアントで管理する。それがHTML5のストレージAPIを使った方法だ。 HTML5対応が必須なのでIE系では動作しないだろう。また他のブラウザであっても仕様が固まっていないために動作しない機能があるかもしれない。Mac OSXのSafari4では特に問題

    HTML5を使ったpbtweet·Pbtweet Application MOONGIFT
  • またまた登場!凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」:phpspot開発日誌

    またまた登場!凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」 2009年12月16日- またまた登場!凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」。 Ext.js ばりにきれいなUIと多機能さで今後が期待されるJSフレームワークです。 次のような綺麗でリッチなインターネットアプリケーションが作れます。 デモページには多数のコンポーネントが掲載されていて色々できることがわかります。 GoogleMapや、各種UIパーツの他、3Dグラフなんかも面白いです。 JavaScript でクネクネ動く3Dグラフです。 以下のページを参照してください。 Ajax.org - The real-time collaborative application platform