奇跡のリカバリー&鉄壁バックアップ 無料5GB枠のままでも十分使える「OneDrive」の節約運用法 2024.07.25
![PC](https://cdn-ak-scissors.b.st-hatena.com/image/square/bed39b5962a5d552c95b6d796db8f55e72d32943/height=288;version=1;width=512/https%3A%2F%2Fxtech.nikkei.com%2Fimages%2Fn%2Fxtech%2F2020%2Fogp_nikkeixtech_hexagon.jpg%3F20220512)
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
WideArea? WideArea is simple and lightweight JavaScript and CSS library (2KB JS and 4KB CSS) which helps you to write better, simpler and faster. How to use? Really simple. Just include both JavaScript and CSS file and then add data-widearea="enable" attribute to your textarea and then call this JavaScript function in the page: wideArea(); License Free and open-source (including commercial use). P
Selectize.js タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」 次のような良い感じのデザインのタグ入力補完機能付きタグ入力UI、同様にコンタクトリストでも使えるUIが作れます Bootstrapと組み合わせても違和感なさそうなリッチなUIがいいですね 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 超クールなjQueryUIテーマ「Delta」
least.jsはJavaScript製のソフトウェア()です。 スマートフォンの時代になって写真コンテンツが増えています。そして求められるのは写真コンテンツをいかに格好よく見せるかです。今回はレスポンシブWebデザインのギャラリー、least.jsを紹介します。 デスクトップサイズ。写真が5列で整然と並んでいます。 マウスオーバーで半透明なフィルタがかかります。 クリックで拡大。キャプションも下に表示されます。 タブレットくらいのサイズ。写真の列が3列に変わりました。 写真の拡大は変わらず。 さらにスマートフォンサイズ。写真は縦1列になります。 この場合は拡大してもさほど変わらないですね。 least.jsのアニメーションは格好が良く、一旦前の写真が引っ込んだ後に次の写真が読み込まれるようになっています。大きな写真を奇麗に見せたい時に使ってみたいライブラリです。 MOONGIFTはこう見
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
SocialFeed.jsはGitHubやTwitterなどのデータを取り込んでタイムライン形式に表示するライブラリです。 自分自身のプロフィールサイトを立てるなら格好よくあるべきです。gnab.orgにインスパイアされて作られたソフトウェアがSocialFeed.jsです。 トップページです。各種ソースからのフィードをつらつら並べて表示します。 GitHubのコミットも表示されます。 こちらはモジュール。Bloggerモジュール。 RSSフィード。 Twitterモジュール。 SocialFeed.jsは外部のフィードを取り込んで一覧で表示するソフトウェアです。対応しているサービスはGitHub、YouTubeの動画アップロード、Disqus、RSSフィード、Deliciousとなっています。また、別途自分で機能追加することもできます。 SocialFeed.jsはJavaScript製
Chart.js | HTML5 Charts for your website. クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 次のようにクールな線グラフ、棒グラフ、円グラフ、レーダーチャート等のグラフが描けます 今時のデザインがいい感じですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 テーブルをグラフに変換してくれるjQueryプラグイン 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
sDashboardはJavaScript製のシンプルなウィジェット、ダッシュボードシステムです。 必要な情報をチェックする際に色々なシステムを眺めていくのは非効率的です。見逃しも発生するかも知れません。そこで使ってみたいのが一元管理可能なダッシュボードです。今回はsDashboardを紹介します。 メイン画面です。ウィジェットはD&Dで並び替えできます。 一つのウィジェットを拡大表示できます。 グラフのクリックイベントをキャッチできます。 イベント通知対応です。 複数のウィジェットを動的に追加できます。 テーブルの行をクリックしたといったアクションもキャッチできます。 sDashboardではiGoogleライクにウィジェットごとに情報を集約して管理できます。便利なのは一つのウィジェットだけを拡大表示できる機能です。データを渡せば、その見せ方はグラフや表形式などを選択するだけで良くなりま
Parsley.js 属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」 <input>に対して data-* の形で属性を設定すればデータのバリデーションが簡単にカッコよくできちゃうフレームワークです。 例えば、<input data-type="email">って記述しておけば、そのinputにメールアドレス以外が入力されていればエラーを検出出来ます。 emailだけでなく、数値、URL、アルファベット等のチェックに対応。その他、最低・最高の長さの設定や、必須項目、範囲設定、正規表現、リモートURLによるパラメータチェックができ、とにかくバリデーションするなら全体的に機能が詰まっています。サンプルサイトもBootstrapベースで作られていて、Bootstrapとも相性が良さそう。 FE側でのバリデーションをスマートにやりたいって方は評価してみてもよ
JavaScriptのコードをフォーマット&色付けを行い、その内容をHTMLに貼り付けられる形にします。 JsDecoderというソースの整形&色付けを行ってくれる便利なライブラリを使って実現しています。 JsDecoder - code.gosu.pl →Blogへ戻る 使い方 下記のテキストエリアにJavaScriptのコードを入力し、「Preview」ボタンを押します。 すると、コードを整形したイメージが表示されます。 そのコードをHTML上に貼り付ける場合には、さらにその下のテキストエリアのテキスト内容を使用します。 format color
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
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ(マウス移動で画像全体を閲覧可能)〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
リッチなユーザーインターフェイスを簡単に実装できる「jQuery UI」 jQueryUIはドラック&ドロップなどのアクション、アコーディオンやダイアログなどのグラフィカルなユーザーインターフェイス、フェードインアニメーションのエフェクトなどがセットになったjQueryのプラグイン群です。 またプラグインの他にも高品質なテーマファイルもセットになっているので、あまりオープンにしないサイトの管理画面でしたら、そのまま使用しても問題ないのではないかなと。 投稿日2011年03月21日 更新日2011年04月02日 jQueryUIのダウンロード jQueryUIトップページからダウンロードしてもいいですが、テーマファイルのビジュアルを確認してからダウンロードした方がいいと思いますのでこちら。 jQuery UI – ThemeRoller 左ナビゲーションの「Gallery」タブを選択して、好
iPhoneやiPad、Androidといったスマートフォンやタブレット端末では フリック/スワイプと呼ばれる指でスライドさせるUIが付き物になっています。 jQueryでもこのフリック/スワイプ動作を実装できるプラグインはたくさんありますが いざ自分で作ろうとすると意外と大変な動作だったりします。 この動作についていろいろ調べていたところ Sleipnirのフェンリルさんのデベロッパーズブログにて、 iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ) と題した、jQueryでiPhoneやAndroid、PCでタッチイベントを取得する方法がとても参考になったので この記事を参考にしてフリック/スワイプで操作するシンプルな画像ギャラリーを作ってみました。 まずは動作サンプルから。 下記の画像をフリック/スワイプしてみてくだ
HandsontableはjQuery製の小さな表計算風ソフトウェアです。 Webブラウザ上で表計算を行えるサービスは増えてきましたが、大抵全画面で表示されるものです。Handsontableはごく小さなグリッドをページ内部に埋め込んで使えるソフトウェアです。 こんな感じで簡易的な表が描けます。 選択したグリッドをコピーできます。 選択から入力もできます。 バリデーションや入力値の変換もできます。 行の削除やカラムの非表示などのアクションを追加します。 コンテクストメニュー。 コンテストメニューのカスタマイズも可能です。 リードオンリーなセル。 HandsontableはJSONでデータを定義します。データは編集も可能で、Ajaxを使うこともできるのでユーザビリティ高い編集画面を提供できます。ごく小さなマスタ編集を行ったりするのにぴったりではないでしょうか。 HandsontableはjQ
Teamwork Gantt ガントチャートとタスクツリーが作れるjQueryコンポーネント「Teamwork Gantt」。 次のようなガントチャートを作成できる無料サービスに加えて、実装コンポーネントをダウンロードすることができます。 開始日、終了日の指定がカレンダーで指定できたり、入力も楽々。 この手の使いやすいUIを自分で作るとなると骨が折れそうですが、これをカスタマイズ等して便利に使うことが出来そうです 関連エントリ コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」
爆速JSONPはJavaScriptのコーディングレスでJSONPで取得したデータを表示する処理を行うライブラリです。 去年くらいからのYahooはとりあえず何でも爆速をつけておこう的な雰囲気が感じられますが、ついにオープンソース・ソフトウェアまで爆速がつくようになりました。今回はJSONPを使った表示処理エンジンである爆速JSONPを紹介します。 サンプル。電力消費量を取得しています。 ソースです。取得したJSONデータをテンプレートとして当てはめています。 爆速JSONPはデータをJSONPを使って取得し、その結果を予め決められたテンプレートに埋め込んで表示する仕組みです。data-*要素を使っており、JavaScriptのコードを書かずに実装できてしまうのが利点です。 爆速JSONPはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く