サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
rewish.jp
先週の水曜日に@hilokiと一緒に作った Shibastagram - 柴犬たくさん、しばすたぐらむ というモフモフ系癒しWebをリリースしました。 スクロールすると柴犬がモリモリ出てきて無限に癒されるナイスWeb。 今回はソースコード自体を公開し、Shibastagramのチワワ版「chihuastagram - チワワたくさん、チワスタグラム」を作りながら、ナントカstagramの作り方を紹介したいと思います。 ※記事中のChihuaやChihuastagramは自分のナントカstagramに合わせて読み替えて下さい。 準備 早速いってみましょう。 注意) 以下の内容はMac環境を前提としています。UNIX/Linux系のOSを使ってる人は問題無いと思いますが、Windowsの人はRubyやRubyGemsなど必要なモノを別途インストールする必要があります。あと全部ターミナルで作業で
svnコマンドはログが見づらいし、コミットしたらリモートにソッコーで飛んで行くし、Gitに慣れた僕には凄く扱いづらい。てことでgit-svnネタです。 一年くらい前からずっと下書き状態だったのを思い出したので公開。他にもコレ系の記事は沢山あるけど自分用のメモとして。ね。 svnリポジトリからチェックアウト いつものcloneコマンドにsvnを付けるだけ。 git svn clone -s http://svn.example.com/Project_Name/ -sオプションを付けると、svnリポジトリが trunk 、 branches 、 tags のような、お馴染みの構造だよって言うのをgitに教えられる。教えておくと、ブランチやタグがgitのリモートブランチとして扱えるようになるので便利。 また、 trunk 、 branches 、 tags の名称が一般的なモノとは異なる場合は
開発用のデータをチームで共有する仕組みがデフォルトでは無いっぽかったので、CakePHPのコンソールを使って、初期データのインポート/エクスポートを行うShellクラスを書いてみました。 仕組みは単純で、テーブルに入っているデータをCakePHPで扱えるデータ(Array)にして保存し、保存したデータをsaveメソッドを使って保存すると言った感じです。 インストール コードはGitHubに置いていますので、git cloneまたはダウンロードして下さい。 CakePHP-DataShell ダウンロードしたコードを、CakePHPのアプリケーションルート(appなど)以下にvenders/shells/data.phpをコピーすればインストールは完了。 使い方 仕組み上、まずはテーブルにデータを入力した方がスムーズです。 エクスポート 全てのテーブルのデータをエクスポートする場合は以下のよ
皆さん、Skypeの画面共有機能使ってますか。ある日、僕のSkypeで画面共有が出来なくなりました。それどころかビデオ通話すら出来ません。困った。 でね、タイトルで答え全部言っちゃってますが、最終的にはSkypeのプロファイルディレクトリにあるshared.xmlを消したら直ったわけですよ。 shared.xmlについて調べてみると、他の不具合の場合でもコレが原因であることが多いみたいなので、お手元のSkypeがおかしくなった場合は是非一度試して見て下さい。 以下、shared.xmlの消し方をWindows・Macそれぞれ簡単に書いてみます。 Windowsの場合 Skypeを終了する Windowsキー + Rキーを押す %APPDATA%\Skypeと入力しEnterを押す shared.xmlをリネームまたは削除する Skypeを起動する 不具合直ってるやったー Macの場合 Sk
10月末に開業届けを提出して11月1日付けで個人事業主になりました。 経緯としては、6月末で3年間勤めていた会社を退職し、紆余曲折を経てフリーランスとして活動することに決めました。大事な部分を端折った気がしますが、大体そんな感じです。 ちなみに屋号は Rewish (レウィッシュ)。名刺も作り直す予定なので、既に名刺交換させていただいた方には、改めてお渡ししたいと思います。 できること 今後どういった方向へ行くかは分かりませんが、 フロントエンド(JavaScriptもりもり) サーバサイド(Railsとかやりたい) iPhoneアプリ(Objective-C書きたい) 辺りでお困りの際は是非ご相談下さい! 連絡先 レスポンスが早い順です。 Skype rewish.org Twitter @rewish Mail info@rewish.jp それでは皆さん、今後ともよろしくお願いします
img要素ではなく背景画像(background-image)を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御(開始/停止/リセット) ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
先日作ったServices_SBM_Infoを利用して、ソーシャルブックマークのカウントやコメントを取得するWordPressのプラグインを作ってみました。 対応サービスや取得できる情報についてはServices_SBM_Infoと同じです。 ライブラリについて URLに対するソーシャルブックマークの情報を取得するWordPressプラグインです。 ダウンロード wp-sbm-info.zip - v0.1.0 ライセンス GNU General Public License 取得できるSBMの情報 ブックマーク数 ブックマーク数の単位 (user/users/tweet/tweets) ブックマーク数のランク (色の変わるブックマーク数に応じたランク) ブックマークコメント (Deliciousを除く) エントリーページのURL 追加ページのURL 対応しているSBMサービス はてなブッ
URLに対するソーシャルブックマークの情報を取得するライブラリをOpenpearで公開しています。 Services_SBM_Info - Openpear と言う報告だけでは何なので、概要と使い方を書いてみます。 ライブラリについて URLに対するソーシャルブックマーク(以下SBM)の情報を取得するPHP(PEAR)ライブラリです。 ライセンス New BSD License 依存ライブラリ HTTP_Request2 取得できるSBMの情報 ブックマーク数 ブックマーク数の単位 (user/users) ブックマーク数のランク (色の変わるブックマーク数に応じたランク) ブックマークコメント エントリーページのURL 追加ページのURL 対応しているSBMサービス はてなブックマーク (Hatena) Delicious (Delicious) livedoorクリップ (Livedo
今までLinux環境が必要な開発ではVMware Playerを使っていましたが、ちょっと開発環境の見直しも兼ねてVertualBoxを試して見ました。 今回はVirtualBox-3.2.8-64453-Winをインストールしましたが、基本的な流れやメリット等はVirtualBox 2.2 と CentOS 5.3 でローカル開発環境 - もやし日記とほぼ同じなので、詳しいインストール手順はそちらを参照して下さい。 仮想マシンの作成 こんな感じで作成しました。 名前 CentOS5 オペレーティング システム Linux バージョン Red Hat メインメモリのサイズ 512MB ハードディスク ストレージ タイプ 固定サイズのストレージ サイズ 5GB ホストOSがWindowsの場合、断片化を防ぐため固定サイズのストレージにしておくのが良い。 OSはCentOS5.5をネットインス
画像のロールオーバーを実装する方法は数多く存在しますが、ロールオーバーしてるのかしてないのかよく分からないモノが多いですよね。多いです。 そんな悩みはサクッと解決しちゃいたい!そんなアナタのために、ものすごい勢いでロールオーバーするjQueryプラグインを作りました。 input要素にも使えるjQueryのロールオーバープラグインとの互換性もバッチリなので、プラグインのファイルを差し替えるだけで動作します。 ダウンロードとデモ jdtrollover.js デモを見る 導入方法 1. jQueryとjDTRolloverを読み込む <script src="jquery.js"></script> <script src="jdtrollover.js"></script> 2. 実行する $() で対象にする要素を指定します。アンカーの中にある画像を指定するのが一般的ですね。 jQuer
ページ内リンクでスクロールをスムースにするスクリプトは良くありますが、アレってもっとスムーズにスクロール出来ないのかなーとか思いますよね。僕は思います。 もっとスムーズにするのは僕には難しいので、普通のスムーススクロールがスムーズに感じられるように、スムーズにスクロールしないjQueryプラグインを作りました。 ダウンロードとデモ jdtscroll.js デモを見る 導入方法 1. jQueryとjDTScrollを読み込む <script src="jquery.js"></script> <script src="jdtscroll.js"></script> 2. 実行する $() で対象にする要素を指定します。ページ内リンクなのでフラグメント識別子が付いてるっぽいアンカーを指定するのがいいですね。 jQuery(function($) { $('a[href^="#"]').jd
はてな記法の[URL:title]のような機能を提供するプラグインです。 はてな記法プラグインのように独自のDBテーブルにタイトルを保存するのでは無く、記事の内容を直接書き換えるタイプなので一応注意して下さい。 あと、ブックマークレット使えよとか言わないで下さい。 ライブラリについて a要素にhref属性を設定し、テキスト部分を空にして保存すると、リンク先のタイトルを自動で取得し挿入します。href以外の属性が在る場合でも他の属性を残しつつ処理を行います。 ダウンロード titlefetcher.zip - v0.1.0 ライセンス MIT License 使い方 titlefetcher.zipをダウンロード zipを解凍してwp-content/pluginsにディレクトリごとコピー 【プラグイン】メニューの【インストール済み】からTitleFetcherを有効化。 あとは記事を書く時
CSSを小分けにして@importで読み込んで管理している方も多いかと思いますが、これではHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありません。 Googleがページの表示速度を検索結果に反映するとか言い出したりもしているので、これはもうリクエスト数を減らすしか無いですね! でも手動でファイルを一つ一つ連結するのはとても面倒です!と言うわけで、そんな面倒な作業を自動でやってくれるPHPのクラスを書いてみました。 ライブラリについて @importで複数のファイルを読み込んでいるCSSを、動的に解析し、連結・圧縮を行います。また、表示する際にLast-ModifiedやExpiresなどのHTTPヘッダーを送出したり、gzip圧縮を行うなど、リクエストを出来るだけ軽減できるようにしています。 ダウンロード CSS_DynamicCompressor ライセンス MI
Twitterの諸機能をサイトに導入するためのJavaScriptフレームワーク「@Anywhere」がリリースされましたね。 その場でフォローしたりサイト上から直接Tweetしたり、Twitterがナチュラルに様々なサイトに組み込まれるようになるんですかね。 と言うわけで僕も軽く試してみたので、使い方のメモと雑感を書いてみます。 まずはアプリケーション登録 New Twitter Applicationでアプリケーション登録を行う。 Application Name @AnywhereでTweetした時に表示されるアプリケーション名。</dd> Application Website Application NameにリンクされるサイトのURL。 Organization 組織名?とりあえず空白で。 Callback URL コネクションの許可などで一度Twitterにアクセスした場合に
rewish.org
要素のクローンを被せる→元要素の背景を変える→クローンをフェードアウト この方法だと問題が多すぎるので、いずれ改善予定。
WordPressのパーマリンクを/YYYY/MM/DD/hhmmの様な日付ベースにしようとすると、日付アーカイブになってしまい記事単体のページとして認識されません。 秒まで設定(/YYYY/MM/DD/hhmmssなど)すれば記事単体のページとして認識されますが、微妙に長くなってしまうので見た目もちょっと・・・ですよね。 と言う訳で今回は、半ば強引にパーマリンクを日付ベースにしてみたいと思います。 日付ベースのパーマリンクを有効にするコード 以下のコードをテーマファイルの何処か(functions.phpなど)に記述。 <?php add_action('parse_query', 'date_base_permalink'); function date_base_permalink($wp_query) { $q = (object)$wp_query->query_vars; //
このプラグインは今後更新されることはありません。代わりにWP Emmetを使用すると皆幸せ。 WordPressの管理画面でZen codingを使えるようにするプラグインを書きました。良かったら使ってみて下さい。 ダウンロード WP Zen-Coding - v0.3.1 ライセンス MIT License Zen Codingの設定 設定は【設定】メニューの【Zen Coding】より行えます。 既知の不具合 Zen Coding for textareaのバグなのか仕様なのか、textareaに縦スクロールバーが出ている場合、タグの展開などを行うと最上部にスクロールされます。 カーソルは元の位置にあるので、文字を入力すれば元の位置にスクロールされます。 おすすめ Zen Coding for textarea を Movable Type で簡単に使うプラグイン - かたつむりくんの
CakePHP v1.3.0-betaが出ていたので、久しぶりにWindows上でCakePHPを使ってみました。 普段からWindowsのMS-DOSコマンドプロンプトを使うことがほとんど無い僕は、CakePHPのコンソール(bake)を使うために、いちいちコマンドプロンプトを立ち上げてcdで移動して・・・と言う作業が凄く面倒に感じた訳です。 なので、そんな僕の悩みを解決するため、簡単なバッチファイルを書いてみました。 バッチファイルの使い方 以下のコードを console.bat など適当な名前で保存し、cake(コア)フォルダと同じディレクトリに置いて実行して下さい。 自動的にpath\to\cake\consoleへのパスを通し、コマンドを入力可能な状態にしてくれます。 後はプロジェクトフォルダ(appなど)に移動して、cake bakeやら何やらお好きにどうぞ状態です。簡単ですね
Hatena.Star.Token = 'トークン'; Hatena.Star.SiteConfig = { entryNodes: { 'article > header': { uri: 'h1 a', title: 'h1', container: 'h1' } } }; AutoPagerize(+AutoPatchWork)への対応 継ぎ足しされるノードをHatena.Star.EntryLoader.loadNewEntries()に渡すイベントリスナーをwindow.addEventListener()で登録する。 注意点として、Hatena.Star.SiteConfig.entryNodesで指定したセレクタに、継ぎ足しされるノードが含まれる場合、継ぎ足しされるノードからのセレクタに修正する必要がある。 ウチのブログの場合、継ぎ足しされるノードがarticle要素なので、
jQueryの開発リポジトリに入っているファイルは、開発用のためモジュール毎に分割されています。 コードを追う時は良いですが、開発中のjQueryが使いたい!と言う時に、これらを全て読み込むのはちょっと面倒なので、ビルドして一つのファイルにしてみたいと思います。 今回は、Windowsの場合とMacの場合二つの方法を紹介します。 Windowsの場合 Windows XP SP3へのインストールを想定しています。その他の環境では動作しない可能性があります。 Gitをインストール msysgit - Project Hosting on Google Codeからインストーラーをダウンロード。 ※今回はGit-1.6.5.1-preview20091022.exeを選択 インストールの手順は以下の通り。 そのままNext そのままNext そのままNext そのままNext そのままNext
ある朝僕は、以下の用件を満たすカレンダープラグインを探していました。 シンプルなHTMLを吐いてデザインの変更が容易 コールバック関数である程度処理をイジれる 月移動のアニメーションが素人ウケしそう 小一時間色々なプラグインを見ましたが、中々しっくり来るモノが無く、「これは探すより作った方が早そうかなぁ」と思ったので作ってみました。 機能概要 記事の初めで大方出ていますが、主に以下の機能を備えています。 月移動時のスライドアニメーション 生成するHTMLを包含する要素のclass変更 イベント追加、月移動などに対応するコールバック関数 JSON形式でのイベント追加 イベント用JSONの先読み機能(月移動時の遅延対策) 表示中の月に属さない日付の表示、非表示 ダウンロード jQuery.calendar 動作デモ 導入方法 jQueryプラグインではお馴染み、 jQueryを読み込んでからプ
様々な誘惑に負けてMacBook Proを購入したのでセットアップの内容をメモ。 Macを触るのは今回が初めてと言うことで、Macbook (with Snow Leopard) 買った後にやったことまとめ - IT戦記を大いに参考にしつつ、部分的に自分なりの設定にしてみました。 ※とりあえず、トラックパッドは良い仕事してますね。 初期設定 お気に入りの日本語フォント、VLゴシックを予めインストールしておく。 トラックパッドの設定 スクロールの速さは左から5番目で、とりあえず様子見。 ターミナルの設定 開くシェルを/bin/bashに変更。zshはまだよく解りません。 フォントはVL Gothic Regular 14pt、文字間隔 1.10、行間隔 1.10 に変更。 Firefoxの設定 アドオン 意外に一杯あったのでここでの掲載は控えることに。機会があればまた公開します。 ブックマー
Dropboxを使い出してから自分用メモをブログに書くことが少なくなった気がするので、ちょっと古いですがVMware Toolsで快適な環境を作るメモ。 VMware Toolsを導入すると、「ファイルを開いたままVMware(samba)を終了してしまい、Explorerが固まってうわっふじこ」が無くなります。 その他、VMwareを起動していなくてもファイルを閲覧・編集出来たり、CGIモードじゃなくてもパーミッションの設定を(常に書き込み権限が与えられるため)スキップ出来たり、ホストOSと時刻を同期出来たり、とにかく便利になるのでオススメです。 VMware Toolsのディスクイメージをダウンロード ドライバとツール - VMwareからVMware Toolsのディスクイメージをダウンロード。 今回はCentOS 5.3の入ったVMwareにインストールするのでLinux版のISO
user 0user Webコーディングをする際、サーバーにアップロードする前にまず、ローカルで動作確認を行うと思いますが、Windowsのローカル環境ではルートパスで記述されたリンクを正常に読む込む事が出来ません。 そんな悩みを解決するべく、WindowsにApacheをインストールしてローカルテスト環境を構築する方法をざっと書いてみます。 1.Apacheをダウンロード Downloading Apacheからミラーサイトを適当に選択、 ミラーページ -> binaries -> win32 とディレクトリを移動(例:ダウンロードページ)し、その中にある apache_1.3.39-win32-x86-src.msi をダウンロードして下さい。尚、PHPやCGI/Perlを動かすには各種DLLなどが必要ですが、今回はHTML及びCSSのテスト環境を構築するだけなので割愛します(Ver.
某勉強会のグループチャットにて、「JavaScriptでXMLを取得、パースして適当に表示しなさい」というお題が出た時、ちょっと欲しいなと思ったので勉強がてら作ってみました。 一応date関数に対応する全てのフォーマット文字列が使えますが、タイムゾーン周りを正確に実装するのは実質不可能なので、 e は「 Asia/Tokyo 」、 T は「 JST 」固定になっています。 その他、副産物で日付周りのメソッドも色々生えてるので、良かったら使ってみて下さい。 ダウンロード php_date.js 簡単な使い方 date関数風に使う基本 インスタンス化したDateオブジェクトのformatメソッドを使ってdate関数風にフォーマット。 var date = new Date(); alert(date.format('Y-m-d H:i:s')); //=> 2005-08-15 15:52:0
あああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああああああああ あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ HTMLソースコード <!-- 1. 背景色のみ --> <ul> <li>あああああああああああああああああああああああ</li> <li>あああああああああああああああああああああああ</li> <li>あああああああああああああああああああああああ</li> </ul> CSSソースコード /** * 1. 背景色のみ */ ul { width: 660px; margin: 0 0 20px; overflow: hidden; } ul li { float: left; width: 200px;
レンタルサーバーではmod_expiresが使えない場合が多いので、PHPとmod_rewriteで頑張って追加してみよう的な感じです。 ただ、以下で示す方法は、画像などの静的ファイルにExpiresヘッダを追加するため、ファイル数分のPHPが動くのでサーバーに大きな負荷をかけてしまいます。 上記理由により、アクセスが多いサイトでは、使用しない方が無難かも知れません。 概要 header関数を利用して Expires / Last-Modified / Cache-control / Content-Type を送出するPHPのクラスと、それを利用するためのmod_rewriteの設定。 大まかな処理の流れ リクエストされたファイルが存在する場合、ファイルのフルパスをPHPに渡して処理。 拡張子からMIMEタイプを判別してContent-Typeを送出。 デフォルトの設定ではGZIP圧縮し
WordPressに限った話では無いですが、移行用のエクスポートファイルは移行先のツールに合わせたフォーマットの方が良いんじゃないかと言うお話。 ブログツールによっては、各種ブログのエクスポートフォーマットに合わせたインポート機能がついていたりしますが、結局は他所様の作ったツールなので対応が微妙だったりしますよね。 その点、今回提案する方法なら、割とスムーズにインポート出来るんじゃないかなと思います。 ※今回はMTからの移行を例に説明していますが、他のブログサービスやブログツールでも、なんらかの方法で書き出しが可能ならばいけると思います。 経緯 先日、このブログもMTからWordPressに移行しましたが、WordPressのMTフォーマットでのインポート機能もかなり微妙でした。と言うか使い物にならない。 そんなWordPressも 自分のことなら出来るだろう と言う考えからWordPre
はてなダイアリーでおなじみのはてな記法。慣れるとさくさく記事が書けてなかなか良いので、PHPのはてな記法パーサHatenaSyntaxを利用してWordPressのプラグインを作ってみました。 手軽に導入できるので、はてな記法が大好きなWordPressユーザーはぜひ使ってみてください。 ダウンロード WP Hatena Notation - 2.0.x 開発リポジトリはrewish/wp-hatena-notationです。 ライセンス GPLv2 or later サポートする記法 使用可能な記法についてはHatenaSyntaxに依存しています。詳しくはサポートする記法 - HatenaSyntaxマニュアルを参照してください。 キーワード記法については タグページへのリンク となります。 はてな記法の設定 【設定】メニューの【はてな記法】から設定を変更できます。 バージョン2.0未
次のページ
このページを最初にブックマークしてみませんか?
『Welcome to nginx!』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く