JavaScriptをシンプルに書けるCoffeeScript使ってみた
JavaScriptをシンプルに書けるCoffeeScript使ってみた CoffeeScript は JavaScript を Ruby や Python ライクに書けるので、タイプ数が減ったり、コードの見通しが良くなったりといったメリットがあるようです。 この記事では CoffeeScript の基本構文と使い方をご紹介します。 投稿日2012年02月13日 更新日2012年02月13日 変数に var は必要ない では、基本的な構文からみていきましょう。 CoffeeScript num = 3245 console.log num JSなら var num = 3245; と書くところですが「var」も「 ;（セミコロン）」も必要ありません。 2行目の console.log num は console.log (num) とカッコで囲んでも大丈夫です。 これをコンパイルすると次の
WP MVCプラグインをWindows+XAMMP環境で使えるようにしてみた
「WP MVC」の大きな流れは次のようになります。 WP MVCでコマンド実行して、MVCに分かれたプラグインフォルダを作成 作成されたプラグインのインストール そのプラグインフォルダの中でプログラムを作成 最初にプラグインフォルダを作成するためにコマンドを実行しなくてはいけません。 Macなら最初からターミナルがあるので問題ないと思います、Windowsでもプロの方なら仮想環境とかあったりで大丈夫でしょう。 Windows+XAMPPでちょこちょこっとしかWordpress使わない私のような人は、ターミナルエミュレーター的なツールを導入してコマンドを実行できるようにしましょう。 MinGWのインストール Windowsで使用できるターミナルは探したら結構色々ありましたが、「MinGW」をインストールすることにしました。 下記からダウンロードできます、exeファイルだと簡単にインストールで
jQueryで指定ユーザーの最新のYoutube動画を表示する方法
jQueryで指定ユーザーの最新のYoutube動画を表示する方法 最近では自社のWebサイトにYoutube動画を載せたいといったケースが増えていますね。動画単体だったら公式の埋め込みコードで簡単に表示させることができますが、更新が頻繁にあるとそのつどWebサイトの更新をしなくてはいけないので面倒です。 そこでこの記事ではjQueryで自動的に最新動画を取得する方法をご紹介します。 投稿日2012年01月19日 更新日2015年11月05日
CSS+jQueryで左右別々の背景にする
CSS+jQueryで左右別々の背景にする センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。 そこでcss+jQueryでなんとかしてみます。 投稿日2012年01月12日 更新日2012年01月13日 中心で分かれた背景 とりあえず中に配置するコンテンツは考えないで左右で別々の背景画像を設定してみます。 デザインによっては左右でdivを配置する必要があるかもしれませんが、今回は全体を囲うdivと半分だけのdivを配置してみます。 html <div id="wrap"> <div id="left-bg"></div> </div> css html, body, #wrap, #left-bg { height: 100%; } #wrap { background: url(bg
CSS3だけでクリックでアニメーションさせる
CSS3だけでクリックでアニメーションさせる CSS3でアニメーションが使えるようになり「hover」と組み合わせればマウスオーバーアニメーションならJSを使わなくても余裕な感じですが、クリックでアニメーションしたいときはそれらしいセレクターがないのでできないかなと思ってましたが、頑張ればできるらしいです。 投稿日2011年12月21日 更新日2011年12月21日 クリックした要素自身をアニメーションする チェックボックスを使用して、クリックした状態でcssを切り替えることでアニメーションさせます。 動かしたい要素を「label」で囲めばチェックボックスと連動するんです。 html <input type="checkbox" id="start"> <label for="start"> <div id="box"></div> </label> css /* チェックボックスは非表示
CSSをシンプルに書くことができるLESS使ってみた
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
PHPでシンプルなページャーつくってみた
PHPでシンプルなページャーつくってみた すごくつまらなくて申し訳ないですが、PHPでページャー（ページを分割したときのナビゲーション）を作ってみましたので載せておきます。 投稿日2011年11月22日 更新日2011年11月22日 php <?php function pager($c, $t) { $current_page = $c; //現在のページ $total_rec = $t; //総レコード数 $page_rec = 10; //１ページに表示するレコード $total_page = ceil($total_rec / $page_rec); //総ページ数 $show_nav = 5; //表示するナビゲーションの数 $path = '?page='; //パーマリンク //全てのページ数が表示するページ数より小さい場合、総ページを表示する数にする if ($total_
WordPressの入っていないサイトにRSSを取得してブログの情報を載せる
WordPressの入っていないサイトにRSSを取得してブログの情報を載せる サイト本体とブログを別々のドメインで運営しているけど、ブログの最新情報をサイトのトップに載せたいというが時々にあったりします。 そこでPHPでRSSを取得してWordpressの入っていないサイトでもブログの最新情報を載せる方法をご紹介します。 投稿日2011年11月16日 更新日2011年11月16日 FeedのURLの確認 最初にRSSを配信しているFeedの確認をしてみます。 例えば「http://www.example.com/」にWordpressをインストールしたならURLは下記になります。 http://www.example.com/feed SimpleXMLを使用した場合 記事のタイトル、リンク、抜粋などの基本的な情報なら、標準機能の「SimpleXML」を使用するだけなので簡単です。 適当な
jQueryで長いページの区切り（セクション）ごとに背景を変化させる
Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
