【はてなブログ向け】Milliard関連記事プラグインのHTML構造を図解してみた - 野良ジニアのスクラップブック
こんにちわ、野良ジニアです。 ブログカスタマイズを放置気味でしたが、「関連記事を記事の下に表示したいなー」と思いMilliardを設置しました。 Milliardはデフォルトでオシャレな見た目なのですが、色々とカスタマイズしようと思うと、どういうHTML構造なのかを理解する必要があります。 「もう誰かまとめてるだろう」と思ったのですが、調べた感じでは記事が見付からなかったので、自分なりにまとめてみました。 「Milliardを使っていて、オリジナルのカスタマイズをしたい！」という方の参考になればと思います。 Milliardについて そもそもMilliardってなに？ Milliard公式より引用 Milliardの使い方 Milliardのカスタマイズについて はてなブログ向け カスタマイズ 本題：MilliardのHTML構造を図解してみた ゆきひーさんカスタマイズ編 初期設定そのまま
Ansible実践入門 | DevelopersIO
渡辺です。 最近、Ansibleに関する書籍が増えてきていますね。 とはいえ、ほとんどは入門的な位置付けで、それはそれで需要があるんですが、実践レベルで使いこなすノウハウは少ないというのが現実かと思います。 この辺り、まだ試行錯誤を繰り返しているところも多いでしょう。 そこで、ノウハウをガンガン流出させるクラスメソッドなので、ベストプラクティスみたいなものをまとめちゃいました。 Ansibleとは？ 雑な言い方をすれば、SSH接続したリモートホストでミドルウェアのインストールや設定ファイルの更新を行うツールです。 カテゴリとしては構成管理ツールに分類されます。 SSH接続が可能であれば、リモートホスト側にエージェントのインストールが不要である点は大きな特徴です。 Playbookにサーバの状態を定義する AnsibleのPlaybookは、リモートホストの状態を定義したファイルです。 構成
長い（はみ出した）テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」 – bl6.jp
長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてくれる便利なjQueryプラグイン「trunk8」を使ってみました。もちろん「read more」などのリンクを付け加えて続きを読めるようにもすることが可能です。サイドバーや色んなところでスペースを有効活用したい時に役立つプラグインかと思います。以下、使い方です。 [ads_center] 使い方 jQuery本体とダウンロードしたtrunk8.jsを読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <script type="text/javascript" src="trunk8.js"></script> あとは
[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2
セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2 GitHub [ad#ad-2] Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一部のものにバグあり。 Chrome8+ Firefox3.5+ Safari3+ Opera10.6+ Select2のデモと実装 各デモとともに実装方法を紹介します。 jQueryは1.7+推奨で、1.4.2から対応しています。 デモ：ベーシック（上：既存、下：Select2適用） まずは、ベーシックなデモから。 下記のシンプルな記述で、既存のセ
簡単にスワイプ処理を作成出来るライブラリ「Swipe」 - 強火で進め
「Swip」はiPhoneなどでスワイプを行うとページを切り替える様な処理が簡単に実装出来るライブラリです。 公式サイト ライブラリのダウンロード先(GitHub) 使い方 主な記述は以下の様になります。ここがスワイプ可能な部分になります。 <div id='slider'> <ul> <li style='display:block'><div>1</div></li> <li style='display:none'><div>2</div></li> <li style='display:none'><div>3</div></li> <li style='display:none'><div>4</div></li> <li style='display:none'><div>5</div></li> </ul> </div> ライブラリはCSSとJSファイルで出来ています。 CS
Sinon.JS を使った JavaScript のテスト - mixi engineer blog
初めましてこんにちは。ソーシャルクライアント開発の tanabe と申します。 今回は?Sinon.JS を使った JavaScript のテスト方法を紹介したいと思います。 Sinon.JS って何？ Sinon.JS はノルウェーのエンジニア Christian Johansen さんが書かれた、JavaScript 用のライブラリです。スタブやモック、フェイクオブジェクトの提供に特化していて、QUnit などのテスト用のフレームワークや実行環境に依存しない所が特徴です。Christian Johansen さんは?Test-Driven JavaScript Development の著者でもあり、こちらは近々翻訳版 が登場するようです。 では早速、Sinon.JS を使ったテスト手法をご紹介していきたいと思います。本稿ではテストフレームワークは QUnit を採用しています。 時間
スピナーを簡単に実装できるJSライブラリ - spin.js
今回は簡単にスピナーを実装できるspin.jsをご紹介します。 なんと準備するものはspin.jsのJSファイル一つのみ！CSSもjQueryも必要ありません！ spin.js そもそもスピナーってなんすかスピナーとはロード中にぐるぐる回るアレのことです。 読み込んでいる最中にユーザのストレスを軽減する事ができると言われています。 主にAjaxでの通信中に使用したりすることが多いと思います。 spin.jsのメリット数あるスピナーのライブラリからspin.jsを推す理由は以下の4点です。 使用するのはjsファイルだけjQuery等の外部ライブラリが不要とても軽量CSSを汚さない個人的に一番大きいのはjsの1ファイルのみ読みこめば使用できるという点。 jQueryライブラリなどでよくあるのが付属のCSSファイルを読み込むというもの。 ライブラリを多用しているとライブラリ用CSSファイルが多く
Progress.js·読み込み中のストレス軽減のためのプログレスバー MOONGIFT
処理に時間がかかっている時にプログレスバーを出せばユーザストレスは幾分軽減できます。幾つものプログレスバーライブラリがありますので、目的に合わせて選ぶのが良いでしょう。 今回のProgress.jsはサイト全体はもちろん、画像などの一部の描画を行っている時に使ってみると面白そうなライブラリです。 Progress.jsの使い方 Progress.jsのJavaScript/スタイルシートファイルを読み込んだ上で、スタートを実行します。 //to set progress-bar for whole page progressJs().start(); //or for specific element progressJs("#targetElement").start(); Progress.jsのデモ 読み込み中。プログレスバーごとに速度を変えられます。 表示されました！ テキストエリ
Notify.js·HTML5のデスクトップ通知を手軽に実装できるJavaScriptライブラリ MOONGIFT
HTML5の新しい機能の一つにデスクトップ通知があります。ブラウザ上だけでなく、デスクトップに通知が出せるのでメッセージやチャット、お知らせを配信するのにぴったりです。とは言え実装方法が面倒そうで手を出していないという人も多いでしょう。 そこで使ってみたいのがNotify.jsです。各ブラウザのデスクトップ通知をラッピングし、手軽に扱えるようにしたライブラリです。 Notify.jsの使い方 Notify.jsを使っている場合、以下のようなコードを書きます。 var myNotification = new Notify('Yo dawg!', { body: 'This is an awesome notification', notifyShow: onNotifyShow }); function onNotifyShow() { console.log('notification
phiary
『notie.js』とは？ 公式より A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies. JavaScript のためでクリーン(おそらく依存性がないってこと)でシンプルな通知ライブラリです. 的なことが書かれています. Official ... https://jaredreich.com/projects/notie.js/ Github ... https://github.com/jaredreich/notie.js 『notie.js』デモ 『notie.js』の使い方 Install cdn 経緯で読み込みます. github を見る限りだとまだリリースバージョンがないようだったので commit バージョンをしていして cdngit
JavaScriptで日付を扱うならこれ！「moment.js」
■ つかいかた（基礎編） ダウンロードしたmoment.jsをscriptタグで読み込ませたら準備完了です。 あとは下記のような実装で使用できます。 // momentオブジェクトを初期化して・・・ var m = moment(); // formatで出力! var output = m.format("YYYY年MM月DD日 HH:mm:ss dddd"); console.log(output); // => 2013年05月15日 12:34:56 Wednesday // 現在時刻 moment(); // ミリ秒で指定 moment(1368543600000); // タイムスタンプ（秒）で指定 moment.unix(1368543600); // Date.parseで解析可能な文字列を指定 moment("May 15, 2013"); // Dateオブジェクトか
チェックボックスとラジオボタンをカスタマイズできる「iCheck.js」 ｜ Tips Note by TAM
フォームでよく使うチェックボックスやラジオボタンを、簡単にカスタマイズできるプラグイン「iCheck.js」をご紹介します。 利用方法は簡単で、通常通りマークアップされたチェックボックスやラジオボタンに対して、.iCheck()メソッドを呼び出すだけです。同梱されているスキンの種類が豊富で、そのまま利用することも、自分でカスタマイズすることもできます。 iCheck まずは上記サイトからプラグインをダウンロードします。 ・html 特別な属性などを指定する必要はありません。 ・JavaScript $('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', // チェックボックスにclass名を追加 radioClass: 'iradio_minimal-red' // ラジオボタンにclass名を追加 }); カスタマイズするi
[JS]通知パネルをアニメーションで表示する超軽量のスクリプト -Humane JS
jQueryなど他のスクリプトに依存せずに動作する、アニメーションで表示する通知パネルを実装するスクリプトを紹介します。 Humane JS デモページ [ad#ad-2] 上記デモの「Welcome Back」の通知パネルは、下記のスクリプトで実装されています。 JavaScript humane("Welcome Back"); 通知パネル内のテキストにはHTMLも使用可能で、スタイルシートを利用することも可能です。 JavaScript humane("<p style='color:red'>Invalid Username and/or Password</p>"); [ad#ad-2] スクリプトのオプション スクリプトのオプションでは下記を設定できます。 通知パネルの表示時間 表示時間終了後、マウス・キーボード操作があるまで表示 新しい通知パネルがすぐに表示されるかどうか 対
Hammer.jsを使って簡単にタッチジェスチャーを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 毎朝寒さで布団からなかなか抜け出せません、エンジニアのゆたろです。 みなさん、スマホのタッチジェスチャーの実装につまずいたことはありませんか？ 今回は、そんなときに便利なライブラリ「Hammer.js」をご紹介します。 hammer.jsを使ってみよう http://hammerjs.github.io/ まずは、上のリンクよりプラグインをダウンロードしちゃいましょう！ https://github.com/hammerjs/jquery.hammer.js ここではjQqueryプラグインとして使いたいので、jquery.hammer.jsも合わせてダウンロードしてください。 ダウンロードしたファイルとjQueryをHTMLに読みこませます。 <script src="jquery.js"></script> <script src="hammer.js"></script
Flow.js - 巨大なファイルもリジューム付きで簡単アップロード MOONGIFT
巨大なファイルをアップロードする際に欲しくなるのがリジューム機能です。万一途中でネットワークエラーになったりして最初からやり直し、なんてことになったらもはや二度とアップロードする気にならなくなるでしょう。 今後Webの利用範囲が広がっていく中で、動画をはじめサイズの大きいファイルをアップロードしようと思ったらリジューム機能は欠かせなくなります。そこで使ってみたいのがFlow.jsです。 Flow.jsの使い方 Flow.jsは通常のファイルアップロードの代わりに使えるようになっています。 デモです。ボックスにファイルを追加します。 アップロード中… 途中で止めたり、一つだけ再開もできます。 タネを明かすと、Flow.jsではFile APIを使ってファイルを読み込み、小さく分割（チャンク）してアップロードを行っています。その分ネットワーク接続の回数が多くなりますが、巨大なファイルによるネッ
Fields.js
Fields.js creates collections of fields. Each field is constantly evaluated for validity, and is accessible through the collection. A field is any uniquely named text-based input, select, textarea, group of radio inputs, or group of checkbox inputs. TODO Make this awesome. This is a work in progress and I would love to make working with, and validating, fields and forms a much more simple process.
favico.js·Faviconを自在にコントロール MOONGIFT
Webカムや動画までFaviconに流しちゃいます！ FaviconはWebサイトのマークとして大事な役割を担っていますが、単に同じ画像をいつまでも表示しているのでは面白みがありません。もっと活用したい、そう考える人に使ってみて欲しいのがfavico.jsです。 できること favico.jsができることはFaviconのダイナミックな変換です。例えば、 バッジ表示 別なアイコンに差し替え 動画の表示 Webカムの表示 ができます。Faviconの中でWebカムを表示したいと思うケースは思いつきませんが、バッジ表示やユーザによってアイコンを変えると言うのは十分ありえるのではないでしょうか。 バッジ表示についてはアニメーションや形を指定することもできます。 デモ バッジ表示。数はダイナミックに変更できます。 数をアップしました。 アイコンの差し替え。 動画の再生。 バッジの表示位置は指定でき
デバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト -Device.js | コリス
ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。 Device.js -GitHub Device.jsの使い方 Device.jsのデモ Device.jsの使い方 Device.jsの実装は、簡単です。 外部ファイルとして、当スクリプトを記述するだけです。 <script src="device.js"></script> スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。 iPhoneでアクセスすると、こんな感じに。 <html class="ios ipho
javascriptのライブラリを一覧にしてまとめてみた
自分用にまとめていたけどせっかくなので公開。 なるべくフロントエンドで完結してライセンスも使いやすいものを選択したつもり。 全部で100個超。 １番目のURLが本家 or GitHubのページ、2番目のURLが比較的わかりやすいと思った日本語の解説ページになっています。 Node.jsのライブラリもまとめたので合わせて見るといい感じ accounting.js金額のフォーマットを行う カンマ区切りや小数点n桁までなど https://josscrowcroft.github.io/accounting.js/ ace.jsテキストエディタ ハイライト・文字列畳み込み・ショートカットキー 組み込むのが簡単で機能もひと通り揃ってる https://ace.c9.io http://qiita.com/naga3/items/1bc268243f2e8a6514e5 AlertifyJSダイアロ
副業ブログで20万稼いだ人は確定申告へ！確定申告の基礎知識と『MFクラウド』の使い方 - Life is colourful.
確定申告の時期が近づいてきました。 会社員でも副業（ブログなど）で20万円以上稼いだ人は、確定申告の義務がありますので税務署に行きましょう。無職の人や学生、専業主婦は38万円です。 今年の確定申告期間は以下の通りです。（郵送やe-Taxも可能です） 確定申告期間：2月16日（木）～3月15日（金） ブロガー目線で確定申告の概要を書いてみますが、その他の副業の方もやることは同じです。副業で去年（2016年1月1日～2016年12月31日）20万円以上稼いだ人は参考にして下さい。 また、今年20万円稼ぐ予定の人も参考になるので、今から準備してください。（通常、確定申告の作業は直前ではなく1年を通じて準備するものなので） 「20万円以上稼いだ人」って？ 参考確定申告が必要な方｜確定申告に関する手引き等｜国税庁 「20万円稼いだ人」というのは、厳密には「所得」が20万円以上の人です。所得というのは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2014/12/20141217.php