タグ

2011年11月12日のブックマーク (38件)

  • スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net

    題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか?え、無いの・・じゃあいらないかn Sample まぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかs、あ、どうでもいいですよね。 IE6/7 IEで

    スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと.net
  • 円形で回転するタイマーを実装できるjQueryサンプル:phpspot開発日誌

    Animated Circle Timer | jQuery Plugins 円形で回転するタイマーを実装できるjQueryサンプル。 1〜10秒の間で指定して指定秒数をかけてタイマーを回すようなものが作れます。 CSS3を使っているので非対応ブラウザでは動きませんが、なかなか面白いサンプルだったのでご紹介です デモページはこちら プラグイン形式ではないのでブラッシュアップの余地はありますが、実験や勉強用にソースを見てみてもよいかも。 タイマー秒数はソースに直接書く感じのようです 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」 ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」

  • GoogleMapをインクリメンタルサーチし、位置情報を取得するjQueryプラグイン・Address Picker

    住所を入力するとオートサジェスト でGoogleMapから候補を出し、選択 するだけで位置を取得できるjQuery プラグイン・Address Pickerをご紹介 します。動作も速くて少し驚きです。 GoogleMap APIを使用しています。 ちょっとこのタイトルだと誤解与えそうですね・・・オートサジェストとして出た候補を選択するだけで地図を変更、経度や緯度などの位置情報も取得するjQueryプラグインです。GoogleMapAPIを使っています。 入力するだけで候補が出るオートサジェスト機能と、候補にマウスを乗せるだけでするだけで地図が切り替わるインクリメンタルサーチ機能の付いた位置情報ピッカー。 と、聞こえはなかなかいいですけどオートサジェストが日本語入力だと若干挙動が微妙なんですよね。Chromeはそこそこ良い反応ですが、Firefoxは特に微妙ですな・・・IEは大丈夫ぽかったで

    GoogleMapをインクリメンタルサーチし、位置情報を取得するjQueryプラグイン・Address Picker
  • これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集:phpspot開発日誌

    Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更

    n_isam
    n_isam 2011/11/12
  • 神秘的な世界を作り上げられるPhotoshopチュートリアル集「30 Creative Photoshop Tutorials To Create Fantastic Art」

    神秘的な世界を作り上げられるPhotoshopチュートリアル集「30 Creative Photoshop Tutorials To Create Fantastic Art」 写真加工から合成までさまざまな世界を表現できるPhotoshopは、クリエイティブ業界には必須のソフトですが、利用方法や技術はさまざまで、常に勉強が必要なソフトでもあります。そこで今回は、技術を学べるさまざまなPhotoshopチュートリアルの中から、ファンタジックな世界を作り上げられるチュートリアルを集めた「30 Creative Photoshop Tutorials To Create Fantastic Art」を紹介したいと思います。 (Create a Pop Art Style Poster with Urban City Background in Photoshop – PSD Vault) 絵画

    神秘的な世界を作り上げられるPhotoshopチュートリアル集「30 Creative Photoshop Tutorials To Create Fantastic Art」
  • 手書きフォントを利用したwebデザイン集「Tips in Using Handwriting Fonts for Stunning Web Designs」 | DesignDevelop

    TOP  >  WebDesign  >  手書きフォントを利用したwebデザイン集「Tips in Using Handwriting Fonts for Stunning Web Designs」 手書き感のあるデザインは人間的な温かみが感じられ、ユーザーに安心感を与えたいデザインなどに良く利用されています。そんな中今回紹介するのは、手書きフォントを利用したwebデザインばかりを集めた「Tips in Using Handwriting Fonts for Stunning Web Designs」です。 (christiansparrow) 可愛らしい・シンプル、さまざまなテイストの手書きフォントが印象的なwebサイトばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■mariagrossmann 好きなことを書き

    手書きフォントを利用したwebデザイン集「Tips in Using Handwriting Fonts for Stunning Web Designs」 | DesignDevelop
  • デザインに手軽に質感をプラスできるグランジブラシまとめ「Ultimate Collection Of Grunge Photoshop Brushes」

    TOP  >  Design , Photoshop  >  デザインに手軽に質感をプラスできるグランジブラシまとめ「Ultimate Collection Of Grunge Photoshop Brushes」 グラフィック制作をする際に非常に役立つブラシ素材。アレンジによく使用されるという方も多いのではないでしょうか。今回紹介する「Ultimate Collection Of Grunge Photoshop Brushes」でも、ぜひコレクションに取り入れたい、クオリティの高いブラシ素材がたくさん紹介されています。 (Urban Squares Photoshop Brushes) シンプルで定番として活用できるタイプから、グラフィックにインパクトや個性を持たせたい時に役立つタイプなど、たくさんのブラシがまとめられています。中でも気になったものをピックアップしましたので、下記より御

    デザインに手軽に質感をプラスできるグランジブラシまとめ「Ultimate Collection Of Grunge Photoshop Brushes」
  • デザイン制作のアイデアソースとなるwebデザイン集「20 Creative Web Designs」

    web制作をする際に、既存サイトのレイアウトやデザイン感などを参考にすることは、とても多いかと思います。そんなシーンにアイデアソースとして役立てたい、クリエイティブ性の高いwebサイトを集めた「20 Creative Web Designs」を今回は紹介します。 (SWE Reklambyrå – Start) デザインはもちろん、ユニークな演出でユーザーを楽しませてくれるwebサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Days with my Father 父親と過ごした日々を綴ったフォトダイアリーブックのwebサイト。実際のダイアリーを写真付きで読むことができます。スクロールすると、フレーム内に次々と過去のダイアリーが表示されるwebサイトの構成にも注目したいところ。ブログ等の演出に効果的に利用できそう

    デザイン制作のアイデアソースとなるwebデザイン集「20 Creative Web Designs」
  • 写真画像を1クリックでInstagram風にかっこよくする -Instagram Action

    Instagram Actionのインストール(日語環境で使う方法) アクションファイルをPhotoshopにインストールのは簡単です。 「アクションパネル」の右上の三角をクリックし、「アクションを読み込み」を選択し、アクションファイル「instagram-actions-by-dbox.atn」を選択します。 インストールが完了すると、下記のようになります。 Photoshopのアクションパネルのキャプチャ [ad#ad-2] 海外のアクションファイルを日語環境で使用する際の注意点 海外のアクションファイルの多くは、そのままでは日語環境のPhotoshopで使用できません。アクションが途中で止まってしまうと思います。 多くの場合は、背景やレイヤー名が英語環境と日語環境で異なるのが原因です。 日語環境で使う方法 日語環境用の背景(レイヤー名)に変更する方法です。 「背景(レイヤ

  • [JS]スクリプトを指定したタイミングで読み込ませるスクリプト -Lazy Loading Script

    外部スクリプトファイルを指定したタイミングで読み込ませるjQueryのプラグインを紹介します。 ちょっと前に流行った画像を遅れて読み込ませる「Lazy Load」のスクリプト版という感じです。 jQuery Lazy Loading Script – On Demand Javascript plugin Webrevised [ad#ad-2] Lazy Loading Scriptの特徴 Lazy Loading Scriptの実装 Lazy Loading Scriptの特徴 外部スクリプトファイルを指定したタイミングで即時にロードします。 ファイルが既にロード済みであれば、再びロードはしません。 必要のない時にはスクリプトを読み込まないため、ロード時間を減らします。 AJAXベースのウェブアプリケーションをよりシンプルにできます。 Lazy Loading Scriptの実装 外部

  • [CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ

    ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <

    n_isam
    n_isam 2011/11/12
  • 拡大縮小自由、80種類のシンプルなデザインのアイコン素材 -MimiGlyphs

    サイズを自由に拡大縮小して使用できる、一つひとつ手作りされたシンプルなデザインのアイコン素材を紹介します。 MimiGlyphs [ad#ad-2] ダウンロードできるアイコンのフォーマットは、3種類。 PNG PSD CSH すぐに使いたい人はPNG、素材として利用したい人はPhotoshop用のPSD、サイズを自由に変更して利用したい人はPhotoshop用のカスタムシェイプ(CSH)、が用意されています。 用意されているPNGのサイズは、16x16です。

  • [CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework

    Demo: Fluid: 768pxで表示 [ad#ad-2] MQFrameworkの特徴 スクリーンサイズ 5つの異なるスクリーンサイズに対応。 320px, 480px, 768px, 960px, 1140px グリッド グリッドは12カラムをベースにし、さまざまなレイアウトに対応。 タイポグラフィ @font-faceを使ったタイポグラフィ。 使い方が簡単 スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを簡単に構築。 カスタマイズ カスタマイズも容易。 カスタマイズ用のスタイルシートファイルもあります。 MQFrameworkの使い方 必要なファイルを一式ダウンロードし、使用するページに外部ファイルとしてスタイルシートを指定します。 <link rel="stylesheet" href="css/master.css" type="

  • [JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll

    live demo: IFrame iframeを使ったデモです。 div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。 NiceScrollの特徴 既存のコードの修正無しで、簡単に設置ができます。 ページのスペースを必要としないスクロールバーを設置できます。 スクロールバーのデザインを変更できます。 すべてのブラウザでマウス・キーボードでスクロールができます。 スクロールは慣性スクロールに対応しており、スピードは調整可能。 コンテンツのズーム機能。 対応ブラウザ IE6を含めたデスクトップブラウザだけでなく、iPhone, iPadなどモバイルブラウザ、タッチデバイスに対応しています。 Firefox 4+ Chrome 5+ Safari 4+ (win/mac) Opera 10+ IE 6+ iPhone, iPadなどのiOSデバイス [ad#ad-2]

  • [CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ

    画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか!って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基となるHTMLとなるCSS 必見の10種類のかっこいいデモ 基となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d

    n_isam
    n_isam 2011/11/12
  • 商用利用も無料、iPadのモックアップ用の高品質なベクターPSD素材

    iPadのPSD素材の拡大:下部 [ad#ad-2] ダウンロードできる素材のフォーマットはPSDで、レイヤーが保持されたものとなっています。 Photoshopで開いたキャプチャ 素材の利用にあたっては個人でも商用でも無料で、バックリンクなども必要なく、できれば広めてください、とのことです。 詳しくはダウンロードファイルの「license-README-FIRST.txt」をご覧ください。

  • Webサイトの表示速度を計測するシンプルで見やすいWebサービス・Pingdom Tools - かちびと.net

    Webサイトの表示速度をファイルごとに 計測してくれるツールです。表示速度 を可視化してくれるんですが、その速度 を遅くしているのはどのファイルなの か、というのが一目で分かります。 GoogleのPage Speedももちろん使うん ですが、まぁこれはこれでありかなと。 最近サーバーを変えてから担当の方とパフォーマンスの改善の話を相談していて、昨日はmysqlとapacheのチューニングを行って貰い、施工前後のサーバーへの負荷をデータに取って検証して貰いました。 そんなわけでまだ503が出たりとご不便お掛けしていますが、概ね原因が把握できてきましたので今後はパフォーマンス改善に移行します。ご不便をお掛けして申し訳ありませんでした。 で、今日の話題です。そんなパフォーマンス改善施工ですが、当然Webサイト側でも出来ますので、どんなファイルがWebサイトの表示スピードを妨げているかをこのツー

    Webサイトの表示速度を計測するシンプルで見やすいWebサービス・Pingdom Tools - かちびと.net
  • WordPressのオリジナルテーマ作成フロー・基本マニュアル

    初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基中の基で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を(触り程度だけでも)理解する HTM

    WordPressのオリジナルテーマ作成フロー・基本マニュアル
  • CSS3の:nth-childセレクタで、3n+2とかを計算するやつ

    あんまり使わないような使うようなセレクタ の:nth-childですが、自分の頭が宜しくない ようで、適応させたい箇所の計算で混乱しま す・・面倒くさいと思っていたのでいいツール ないかなと思ってたんですがシンプルでいい のがあったので同じく計算嫌いな方向けに シェアします。 E:nth-child(n)は、親要素のn番目の子要素であるE要素にスタイルを適応させます。とは理解しつつも、(2n+5)とかになってくるとなんか混乱するんですよね。なんで混乱するんだろw Nth-Child Visual Calculator n+2とか3n+8とか入れるだけで適応される箇所を明示してくれる、ってだけのシンプルなものです。何度か使って計算の仕方をおさらいしました。使ってないとまた忘れそうですけどね・・ こうやって見てみると8n+5なら5個目スタートで8を足していけばいいだけ、って分かるんですけど。ア

    CSS3の:nth-childセレクタで、3n+2とかを計算するやつ
    n_isam
    n_isam 2011/11/12
  • Google Analyticsの内容をいつでも確認できるMac OS Xガジェット「GAget」:phpspot開発日誌

    GAget ? Google Analytics Widget for Mac OS X Dashboard | Pixel perfect web design by Zoltan Hosszu Google Analyticsの内容をいつでも確認できるMac OS Xガジェット「GAget」 次のようなウィジェットをOS Xのダッシュボードに表示できます。スワイプしたらすぐアクセス解析なんていう感じにできるのはいいですね デザインも良い感じですね。 関連エントリ シンプルでインタラクティブな地図を実装できるjQueryプラグイン「jVectorMap」 ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」

  • 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」:phpspot開発日誌

    ALAJAX - a jQuery plugin for ajax auto form sending | Freelancer ID 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームなんかを作る場合はAjax前提で作ったりしますが、このプラグインで $('#form').alajax(); のように初期化すれば一瞬でajax化が完了します。 もちろん、サーバ側のプログラムの調整は必要ですが、簡単にajax化できるというのはよいかもしれませんね。 やっぱりajaxフォームの速度ってはやくて利用者としては速いほうがいいわけなので、こういう風にマークアップの作り手側は簡単に対応できると作り手としては嬉しいですね。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ 画面遷移なしのAjaxでファイルアップロードするjQuer

  • jQuery+PHP+MySQLでデータグリッドを作るサンプル:phpspot開発日誌

    JQuery Datatables plugin example with Php & Mysql - Share My Code jQuery+PHPMySQLでデータグリッドを作るサンプル。 PHPMySQLのデータを出すことってあったりしますが、単にテーブルで出すとかっこわるいですね。 次のようなインタフェースで出してあげると、検索やソート、ページング処理がついてくるので便利そうです。 単に出力するのはやめてこうしたライブラリの力を借りれば少ないステップで簡単に便利な機能を提供できそうです。 サクッと保存されているデータを確認したい、けどphpMyAdmin程の機能は必要ないし、ちょっと危ないみたいな場合に使えそうですね。 関連エントリ かっこいいページ送り付きのグリッドを簡単につくれる「OpenJS Grid」 好みのグリッドを作成してPNGやPhotoshop形式でダウンロー

  • カッコいいグラフィックスを作成する新しめのPhotoshopチュートリアル50:phpspot開発日誌

    50 Most Impressive Photoshop Tutorials of 2011 | The Design Inspiration カッコいいグラフィックスを作成する新しめのPhotoshopチュートリアル50。 次のようなカッコいいグラフィックスを作成するチュートリアルが色々とまとまっていました。 参考にできそうでしたのでご紹介です 関連エントリ プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集 カッコイイWEB管理画面を作成するPhotoshopチュートリアル 広告デザインのためのPhotoshopチュートリアル15

  • XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」:phpspot開発日誌

    XML Tree - visualise and traverse your XML | jQuery Plugins Demo XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」。 APIなんかでXMLはよく使うようになりましたが、XML自体を次のように折畳み可能でスタイルされたインタフェースで見ることができるjQueryプラグインのご紹介です。 ブラウザベースの味気ないXMLビューワよりも見やすい場合がありそうです。 次が実装のためのコード。描画のコードが超簡単なのもいいですね。 関連エントリ 綺麗なツリービューが実装できるjQueryプラグイン「jsTree」 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jqu

  • iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル:phpspot開発日誌

    Apple rotator banner effect with jQuery | jQuery Plugins iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル 左にメイン画像、右にサムネイルで3つあるあのiTunesストアのインタフェースをjQueryを使ってサイトで再現できます 解説ページはこちら シンプルなマークアップで実現できています Appleの製品のユーザインタフェースは色々なところに影響を与えていてそういうところもやっぱりさすがだなぁというところですね。 関連エントリ Apple.comの新スライダーエフェクトを実装するjQueryプラグイン Apple関連のフリーのアイコンや素材集20

  • ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」:phpspot開発日誌

    Minimit Gallery Plugin - Download ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」 このギャラリー他にはない感じで次のように要素をCSS3のプロパティなんかを駆使して変形、アニメーションさせながら切り替える等のインタフェースを提供します。 デモを見てみるのが一番速いですが、とても面白いです トランプのカードを拡大するような(?)。ちょっと動きを見ていただくのが一番速そう。 リストもマウスに応じてクネクネ動きます。 クネクネ。 マウス位置に応じて拡大。 CSS3とjQueryを組み合わせることで、もっといろんなことができそうですね。 数年後にはこうしたライブラリはCSS3等を応用しまくっていて、ちょっとソース見ただけだとどうやって実装しているか、よく分からないなんていう状態になっていそうな気がします 関連エントリ PCでもスマホでもスワ

  • ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラム:phpspot開発日誌

    Draggable Image Boxes Grid | Codrops ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラムのダウンロードができます。 Flashを使わずにここまで出来るのは素晴らしい限り。画像をクリックした後のアニメーションも良い感じです。 デモページ ギャラリーサイトをやるなら、これでやってみたいと思ってしまうようなハイクオリティなギャラリープログラムでした。 チュートリアル形式でソースコードの解説も行われているので勉強にもなります 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト&チュートリアル

  • ユニークなフリーフォント10:phpspot開発日誌

    10 New Free Fonts for Your Delight | Freebies ユニークなフリーフォント10。 次のような個性的なフォントが10個紹介されていました。気になったものは入れておいてもよいかもしれませんね。 フォントって何個までインストールできるんでしょうね。 以前入れすぎてなんかおかしくなった経験があります 関連エントリ WEBページに使えそうなアイコンっぽい図形フォント 手作り風フォントが入手できる「Handmadefont」 指定エレメントのフォントサイズ変更機能を超簡単に提供できるjQueryプラグイン「jFontSize」

  • 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」:phpspot開発日誌

    Notifier.js ? Elegant Javascript notifications | Srirangan 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」。 次のようなオシャレなアイコン付きの通知を表示できます。一定期間が終われば1個のアイテムはそれぞれ消えていく流行りのインタフェースです。 Notifier.success('User registration successful') のように関数を呼び出すだけで簡単に使うことができるので、使いやすそうです。 アイコンを変えるには、success の代わりに info や warning, error, notify といったメソッドを使えばOKです。 後から出てきただけあって、ポップアップなんかよりも邪魔にならないというところがいいですね 関連エントリ ピュアCSSでページ上に通知を出すチ

  • テーブルのカラムをドラッグ&ドロップでリサイズできるようにするjQueryプラグイン「colResizable」:phpspot開発日誌

    テーブルのカラムをドラッグ&ドロップでリサイズできるようにするjQueryプラグイン「colResizable」 2011年11月08日- colResizable ? jQuery plugin テーブルのカラムをドラッグ&ドロップでリサイズできるようにするjQueryプラグイン「colResizable」 OSのインタフェースなんかではドラッグ&ドロップで当たり前のようにリサイズできますが、WEBのテーブルは出来ませんね。 でもこのプラグインを使えば $("table").colResizable(); のように初期化しちゃってリサイズできます。 ドラッグ&ドロップで以下のようにカラムをリサイズ 分かりやすいようにつまみをつけたりすることも出来ます。 テーブルだけではなくて、次のようなインタフェースを実装するのにも使えます。 次のように事バランスを分類するようなインタフェースとしても

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

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

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    n_isam
    n_isam 2011/11/12
  • VOYAGE GROUP エンジニアブログ : 自分の周りに居る凄腕プログラマーが実際に読んでいる本

    2011年11月08日10:22 カテゴリ 自分の周りに居る凄腕プログラマーが実際に読んでいる こんにちわ、VOYAGE GROUPでエンジニアをしている伊織といいます。 RubyKaigi2010/2011でスタッフをさせて貰ったりしています。 他にも渋谷rbランチなどに顔を出させて貰っています。 弊社の先輩エンジニアは勿論の事、RubyKaigiのスタッフをやらせてもらったりShibuyarblunchやLispコミュニティでうろちょろしているお陰で僕の周りには凄いプログラマーが沢山います。そこで、周りの凄腕プログラマーが実際に読んで「良かった」と言っていた技術書を幾つか挙げてみたいと思います。自分で手を動かしてやったは僕の感想も添えます。 計算機プログラムの構造と解釈 クチコミを見る 有名な魔術師。MITで長年教科書として使われてきたです。今はPythonなので違う筈。今やっ

  • オブジェクト指向について語った時に使ったメモ

    今日、オブジェクト指向について1時間ほど語りました。整理するため自分用に書いたメモを公開します。大まかな構成はメモどおりに話しましたが、メモに書いていないこともたくさん話していますし、書いていても話さなかったこともあります。 前提として自分自身のオブジェクト指向へのスタンスを書いておきます。 自分のプログラマとしてのキャリアとオブジェクト指向の隆盛の重なりを考えると客観的に見て自分はオブジェクト指向世代のプログラマなんだと思います。一方で、世間で過剰にもてはやされる技術には反発してきました。オブジェクト指向も例外ではありません。オブジェクト指向を否定はしませんが、金科玉条のように扱う人の前では、オブジェクト指向なんて技法のひとつに過ぎないと、冷たく突き放してきました。 ただここ数年、かつてに比べてオブジェクト指向の威光は下がっている気がします。関数型プログラミング支持者から、オブジェクト指

  • 「SQLインジェクション対策」でGoogle検索して上位15記事を検証した - ockeghem's blog

    このエントリでは、ネット上で「SQLインジェクション対策」でGoogle検索した結果の上位15エントリを検証した結果を報告します。 SQLインジェクション脆弱性の対策は、既に「安全なSQLの呼び出し方」にファイナルアンサー(後述)を示していますが、まだこの文書を知らない人が多いだろうことと、やや上級者向けの文書であることから、まだ十分に実践されてはいないと思います。 この状況で、セキュリティのことをよく知らない人がSQLインジェクション対策しようとした場合の行動を予測してみると、かなりの割合の人がGoogle等で検索して対処方法を調べると思われます。そこで、以下のURLでSQLインジェクション対策方法を検索した結果の上位のエントリを検証してみようと思い立ちました。 http://www.google.co.jp/search?q=SQLインジェクション対策 どこまで調べるかですが、以前NH

    「SQLインジェクション対策」でGoogle検索して上位15記事を検証した - ockeghem's blog
  • プログラミング未経験からiPhoneアプリ開発を勉強する人が読むべき超オススメな参考書3つ! – 和洋風KAI

    (この記事は2011年11月に書かれたものです。今は、Swiftを勉強した方が良いでしょう。) おはようございます。プログラミング未経験からiPhoneアプリ開発を初めてそろそろ2年目、するぷ( @isloop )です。 いやーこの2年の開発ライフを思い起こせば、あっという間だったのですが、するぷろ for iPhone、するぷろ for iPadというブログエディタアプリと、バランスシートな貯金箱という家計簿アプリの3つをリリースできましたし、なんとおかげさまで、賞をいただくこともできました。 別に特別なことはなにもしていないのですが、これも、とびっきり優秀な参考書が隣にあったおかげ。優秀な参考書は、わからないときにサッと答えを教えてくれる白ヒゲを蓄えた長老のようなものです。 そこで今日は、「プログラミング未経験からiPhoneアプリ開発を勉強する人が読むべき超オススメな参考書3つ!」と

  • 画像からカラーパレットを生成しカラーコードをHEXやRGB形式でコピーできる「Pictures To Color」

    画像からカラーコードを取得するようなサービスにはPic2Colorのようなものもありますが、配色を一覧するカラーパレットの操作性や視認性がいまいちだったり、カラーコードがHEX形式だけだったりします。 また、サイトから直接使っている色を抜き出すI Like Your Colorsのようなものは、これまた見た目もいまいちで、HEXのみ。どれも一長一短ありといった感じです。 今回ご紹介するのは、カラーコードをHEX以外のRGBなどの形式でもクリップボードにコピーでき、配色のカラーパレットをHTMLで一覧することもできるWindows用のフリーソフトです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 画像から色コードをコピー、一覧できる「Pictures To Color」 「Pictures to

    画像からカラーパレットを生成しカラーコードをHEXやRGB形式でコピーできる「Pictures To Color」
  • 「Time Machine」で急減するLionのHDD--その理由と解決策 - builder by ZDNet Japan

    前回触れた、Lionの「Time Machine」で作成されるローカルスナップショット。内蔵ストレージの空き領域を使い、変更が生じたファイルを自動バックアップしてくれるので、つい外付けHDDの接続を怠ってしまう多忙な(横着な?)ユーザーにとってありがたい機能となっている。 しかし、次第に内蔵ストレージの空き領域が減ってしまうため、特に容量の乏しいSSDを使用している場合は、放っておけばすぐに使用率が90%台に達してしまう。このあたりの事情は、お伝えしたとおりだ。 ローカルスナップショットは、Time Machineを無効化すれば作成されなくなるが、そのあとも内蔵ストレージに残る。ルート直下の「.MobileBackups」ディレクトリをlsコマンドで(パーミッションの設定により管理者権限が必要)見れば、「Computer」というサブディレクトリに、/Volume/Users以下の領域を確認

    「Time Machine」で急減するLionのHDD--その理由と解決策 - builder by ZDNet Japan
    n_isam
    n_isam 2011/11/12
  • 映像レッスンでWebやiOSアプリの作り方が学べる『TreeHouse』 | 100SHIKI

    有料(月額25ドル or 49ドル)&まだまだ発展中なのがあれだが、こういうのは必要ですな、と思ったのでご紹介。 TreeHouseではWebデザインやWebアプリ、iOSアプリの作り方を学べるようだ。 レッスンはすべて動画で、5〜6分をかけて一つのトピックを学んでいく。 そしてレッスンの最後にはクイズをうけることになり、それに正解するとバッジがもらえる、という仕組みだ。 こうしてスキルアップをしていくことで転職したり、アプリをつくったり、起業できたりしようよ!ということらしい。 すべて英語ではあるが、一部の映像は無料で見られるので興味のある方はいかがですかね。

    映像レッスンでWebやiOSアプリの作り方が学べる『TreeHouse』 | 100SHIKI