タグ

ブックマーク / kachibito.net (11)

  • GeoJSONをブラウザ上で作成できるOSS・「geojson.io」

    geojson.ioはGeoJSONをブラウザで編集、作成出来るWebツールです。オープンソースとしてもコードが公開されています。GeoJSONはGoogle Map APIでもサポートされている規格ですので馴染みの方も多そうですが、ツールはそのGeoJSONを手軽に編集出来るようにしたもの。地図に編集を加えれば右カラムにインタラクティブにJSONコードが発行されます。編集したコードは直接Gistに送ったりCSVでダウンロード等が可能です。 geojson.ioOn Github

    GeoJSONをブラウザ上で作成できるOSS・「geojson.io」
  • jsfiddleライクにWebGLの動作テストが可能なOSS・「WebGL playground」

    WebGL playgroundはjsfiddleライクにブラウザ上でWebGLの動作テストが可能なツールです。オープンソースとしてGithubでもソースが公開されています。コード編集すればインタラクティブに反映されます。任意のファイルも読み込めるみたい。サンプルもいくつか用意されていました。ライセンスは特定のライセンスを上げていませんのでGithubにおいてあるLICENSEファイルをご確認下さい。 WebGL playgroundOn Github

    jsfiddleライクにWebGLの動作テストが可能なOSS・「WebGL playground」
  • ソースコードも公開されているシンプルな.htaccess作成ツール・httool

    .htaccess生成ツールです。よくある Webサービスなどのように高機能な ものではなく、予め用意された雛形 に入力していくようなもの。コードも 公開されているので自分の用途に合 わせてカスタマイズしてもいいかも しれません。 シンプルな.htaccess作成ツールです。多用するものでも無いかもですけど、書き方のルールが全然覚えられないのであると便利かも知れない。 URLを入れて、必要な項目にチェックを入れると.htaccessのコードが発行されるのでコピペしてね、みたいなやつです。HTML+JSで出来てるみたいなのでローカル環境でも特別な設定も不要で動いてくれる、という手軽ががいいですね。 シンプルな作りなので自分用にカスタマイズしても良さそう。用意されている項目は非wwwへのリダイレクトやホットリンク防御など簡単なものが殆どです。 このブログではhtaccessは使ってませんけど、

    ソースコードも公開されているシンプルな.htaccess作成ツール・httool
  • Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net

    ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません(「やっちゃダメなこと」もしています)ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合

    Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net
  • iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton - かちびと.net

    なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhoneiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTMLCSSJavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad

    iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton - かちびと.net
  • jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net

    なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ

    jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net
  • 写真の撮影技法とか加工技法に関して少し調べたのでメモ

    最近よく見かける写真撮影技法に 関して調べ物をしたのでメモ的に。 専門家では無いので基的にネット 頼りの知識でしか無いです。僕も 勉強がてら調べた程度ですので、 特に目新しい情報ではないです。 僕が最近よく見かける写真撮影技法や加工技法を調べてたので備忘録。素人なので内容は特に新しいものではないです。尚、個人的な検索用ですので、存在する全ての撮影技法や加工技法を掲載している訳ではありません。 ※例に挙げてる画像は僕が撮った写真です(OLYMPUS E-520を使用) ハイダイナミックレンジ(HDR) 通常の写真技法に比べてより幅広いダイナミックレンジを表現するための写真技法の一種。常の写真では表現のできない広いダイナミックレンジをヴィジュアルイメージとして通常の狭いダイナミックレンジの中に定着することができ、通常の写真と比較すると肉眼に近い画像とすることができる。反面、通常の写真ではあり

    写真の撮影技法とか加工技法に関して少し調べたのでメモ
  • Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ

    レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール

    Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
  • 配色のアクセシビリティチェックを手軽に行えるシンプルなカラーツール・Contrast-A - かちびと.net

    Web制作を行う前の配色チェック に手軽で良さそうでしたので備忘録 がてら記事にします。コントラストが 十分かどうか、などその配色がアク セシビリティガイドラインに沿ってい るかを示してくれるツールです。 Webツールとソフトウェアがあります。 目的はシンプルなツールですが機能はなかなかです。 Webサービスをご紹介しますが、無料でダウンロードして使えるAir製のソフトウェアもあります。 手軽に使える 基的にマウスで操作できます。配色を左で決めて、明暗を右で調整、リアルタイムでプレビュー。 アクセシビリティチェックもリアルタイムで表示されます。 何かと使い勝手も良いのですが環境によっては横スクロール出るかもしれません。 パレット機能 パレット機能もあります。丸の数はチェックをクリアしているかを表しています。 ソフトウェアも Air製のフリーソフトもありました。まだ試していませんけど・・

  • jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net

    jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol

  • iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた - かちびと.net

    Moongiftさんの記事を見て興味が 沸いたので即DLしてみました。 iPhone等のモバイル向けのWeb アプリを構築するHTML5中心の フレームワーク・Sencha Touch。 個人的にはかなり良いオープン ソースでした。 という訳で、Sencha Touchを触ってみましたよ。これ使えば、低スキルの僕にでもアプリ作れそうです。 で、Sencha Touchってどういうもんなの?という方もいらっしゃるかと思いますので、ファイルに含まれているサンプルをご紹介します。 SENCHA かなり素敵なフレームワークでしたよ。HTML5っていうのがいいですね。含まれているサンプルを以下に簡単にご紹介します。サンプルの説明は動作の説明になります。 尚、含まれているファイルは画像ファイルとHTMLファイルとjsファイルのみですのでローカルサーバー等が無くてもサンプルを見る事が出来ますよ。 キャプ

  • 1