はてなブックマーク

サーバの移行も完了して前々からローカルでちょこちょこ作成していたFuelPHPで完全書き換えしたプログラマーボックスを本番に上げて、めでたく通常運用になりましたのでFuelPHPとはなんぞや！？というところからFuelPHPの新しい情報の収集する時のサイトなんかを紹介しつつ、どんな感じでFuelPHPで書き換えたかを書いていきたいと思います。 FuelPHPとは？ FuelPHP はシンプルで、フレキシブルな、コミュニティにより開発されている PHP 5 用の Web フレームワークです。現在のフレームワークに対する不満から産まれ、開発者のコミュニティからサポート、支持されています。 FuelPHP はとても移植性が高く、多くのサーバで動き、そして、とても綺麗な構文のフレームワークです。 引用元:FuelPHP ドキュメント 書籍関連のリスト 2012/07 電子書籍 達人出版会 はじめて

突然ですが、Programmerboxのサーバを移行しました。移行にあたってどんなレンタルサーバが良いのか迷いましたが、お名前.comのVPS(KVM)に致しました。移行にする時のサーバ構築にちょくちょくハマってしまいましたので次に構築する時にハマらないようにここに忘備録として手順と設定方法を書いていきたいと思います。 構築するサーバの目的 様々なサーバがあると思いますが、今回はWeb寄りのベーシックな構築を行いたいと思います。 自分自身の要望としては 前のサーバより多くのアクセスを捌けるようにしたい。 バーチャルドメインで運用して行きたい。 FTPでファイルを上げれるようにしたい。 メールの送受信を行いたい。 とにかく自由にサーバをいじりたい。 まぁ、こんなもんでしょうか。 やはり、自由にカスタマイズ出来るという点が魅力ですね、VPSは。 お名前.comのVPS(KVM)で構築する VP

新しいフォントが無数に現れる時代になり、やはり情報と同じで多すぎると探しにくくなっています。そこでオススメのサイト2選を紹介しつつ、日本と海外のフォントポータルサイトや日本語フォントをメインに紹介している記事を集めてみました。 オススメの厳選サイト2選 大体はこの2つのサイトでイケてるフォントは手に入りますので要チェックです。ですが、日本語のフォントがないので日本語のフォントをお探しならば目次の2-1や3-2を見て下さい。 Fonts.com（SkyFonts） Fonts.com（SkyFonts） 個人的に超お気に入りのサービスです。現在1123種類のフォントをダウンロード出来るようになっていますのでやってない方は是非是非、お気に入りのフォントをダウンロードしましょう。 GoogleのオープンソースWeb Fontsコレクションが、デスクトップでも利用できるようになっている（Macおよ

先日、初めて会った人に色温度調整アプリ「f.lux」を教えてもらい、数日間利用しています。そして、このアプリはフリーなのですが、イケてるんですよ!調べてみたら様々なブログで紹介されてるんですが、見なかった事にしてさらな状態で記事を書いていきます。 f.luxとは？ PC画面の色温度を調整出来るMacのフリーアプリケーションです。機能としましては、現在いる場所を登録する事によって適切な調整も設定出来る機能のほか、時間の経過とともに画面の色を自動調整を行い目への刺激を極力防ぐ事が出来るようになります。 ※UX自体を取り除く事はもちろん出来ませんのでUXを取り除く事を目的とするならば効果はありません。 ですが、ブルーライトを抑えられるので目への刺激を和らげる事が出来ます。 ダウンロード方法 f.lux: software to make your life better f.lux: softw

膨大にある画像を一括リネームする機会ってweb制作をしていると度々ありますよね？今回はそんな時に役立つ方法(macで)を紹介致します。 Automatorはデフォルトでmacに入っているアプリケーションです。これで何でも出来るらしいのですが、今回は画像を連番で一括リネームする事に焦点を当てたいと思います。 Automatorとは？ Automator は、簡単に作業を効率化できるパーソナル自動化アシスタントです。Automator を使えば、単純なドラッグアンドドロップ操作で「自動化レシピ」を作成し、実行できます。自動化レシピは、単純なタスクも複雑なタスクも、必要なときに必要な場所で実行してくれます。 引用元:Mac 101：Automator Automatorアクションの作り方 では、早速方法を説明して行きます。 初めにAutomatorを開きましたら 下の画像のようにサービスを選択し

久し振りにJavaScriptを触ったら物凄く忘れていたので、まずはjQueryの基本記述をもう一度勉強し直してみました！DOMを操作する事って多々あると思いますので、ある意味チートシートのように見て頂くと嬉しいです。DOM以外にも偶数処理やクローン等も載せておきます。 親要素を取得する方法 まずは親要素の取得系からいきましょー。 一つ上の親要素取得 jQuery // 一つ上の親要素取得 $(".hoge").parent(); // 要素がdivなら取得する。divでなければ空(Objectは返ってくる) $(".hoge").parent("div"); 親全取得 jQuery // 親全取得 $(".hoge").parents(); // 親を指定して取得 $(".hoge").parents(".class_name"); 開始要素から最も近い親要素を選択 jQuery //

2013年度プログラミングランキングがTIOBEから8月に発表されました。少し記事にするのが遅くなってしまいましたが、ちょっとランキングがどうなってるのか気になったので記事にしてみます。その他に人気のあるwebサービスがなんの言語で開発されているのかをちょびっとだけ集めてみましたので、今後勉強したい言語を選ぶ為の材料としていただけると嬉しいです。 2013年度プログラミングランキング表 2012年とそんなに変わりはないのですが、10位以内の言語を合計すると物凄いシェア率になっているんだなと改めて実感してしまいました。言語名をクリックすると10年間のシェア遷移のグラフが見る事が出来ます。 2013年 2012年 言語名 シェア率 1 2 Java 15.978% 2 1 C 15.974% 3 4 C++ 9.371% 4 3 Objective-C 8.082% 5 6 PHP 6.694

ネットサーフィンしていたら面白いgifを発見したので紹介致します!見ているだけで良いデザインがヒラメく?かもしれません。動きが可愛すぎてボクはこの作品を見て癒されました。 ネタ元：Bisous les copains Bisous les copains Bisous les copains 超かわいいgifを公開しています。スゴい、スゴいよ!! Bisous les copainsギャラリー まとめ いかがでしたか?超かわいくないですか!?こうゆう遊び心のあるデザインって素敵ですよね。

みなさん、ブログを運営していてアクセスが少なくて悩んでいたりしませんか?理由がわからないまま悩む必要はありません。きちっとした方程式に当てはめれば運営しているブログの状態がわかり最適な手が打てるようになります。今回は誰でもブログでカンタンに100万PVを叩き出せるやり方と理由を説明していきたいと思います。 その前にwebの流れを理解していなくてはお話しになりませんので、先ずは読み流すだけでも良いのでwebの流れを見て下さい。 webの流れを理解する アクセスを増やしたいって思っていてもwebを理解していないと残念ながら記事を書いていても努力は実りません。そこで詳細な方法は省きますが流れを説明していきます。大まかな流れを知っているだけでもだいぶアクセスが増える感覚が身に付きますのでささーっと読み流しましょう。 検索されるのに必要な項目 HTMLを適切に記述する事 ここが一番重要です。HTML

ターミナルコマンドってすぐに忘れてしまいませんか?ボクだけかもしれませんが、そんな人の為にターミナルコマンドのチートシートを作成している素敵なサイトがありますので、そのサイトのブクマ記事にしたいと思います。たまにしかいじらないから忘れてしまうんですけど、そんな時にこのターミナルコマンドチートシートを見ましょう! UNIXのターミナルコマンドチートシート ジャンル別UNIXコマンド一覧 By 68user"s page ジャンル別UNIXコマンド一覧 コマンドの一覧が綺麗にカテゴリ分けされていてかなり見やすいです。このサイト自体、勉強になる情報しか置いていないので必見です。 Macのターミナルコマンドチートシート Macの隠された設定を変更する84個のハック集 Macの隠された設定を変更する84個のハック集 こちらはMacの設定ターミナルコマンド集ですね。 色々設定をカスタマイズするのもいい

ブラー加工とは画像をぼやけさせる加工の事を言うのですが、この加工した画像を使いランディングページを作るアプリが多くあります。ぼやけさせる事により明確にユーザーに見て欲しい文字に焦点を当てられます。 さて、そんなブラー加工ですがPhotoshop等の画像編集ソフトを使わなくてもJS上で加工して表示出来るプラグインがありますので、今回はその「Vague.js」を紹介したいと思います。 Vague.js Vague.js このページ自体にブラーがかかっていますので、そこから実装方法も見れます。 Vague.jsの使い方 Vague.jsのgitHubに行ってファイルをダウンロードして来ましたら次は実装ですね。 こんな感じのソースコードで動きます。 実装ソースコード <!DOCTYPE html> <head> <title>Vague.jsの最小実装コード</title> </head> <bo

今回の記事はMacでjpeg⇔png間でフォルダに入れるだけで自動変換する方法を書いていきたいと思います。Macのデフォルト機能である「フォルダアクション」を使い仕事の効率をあげましょう。また、今回はテキストの説明は省いて動画での説明に致しました。 フォルダアクションって? Mac OS 8.5から追加された機能拡張ファイルまたはその機能。フォルダーにAppleScript のスクリプトを割り当て、フォルダーの開閉やファイルの移動などの操作に対して特定の動作を対応させる。フォルダーへのスクリプトの割り当てと解除は、コンテクストメニューで行なう。 引用元:フォルダーアクション とは - コトバンク 神速で複数の画像をjpeg⇔pngに変換する方法 ＠ Mac(動画)

ふとCoda2の使い方を調べてみると詳しい記事がそこまでなく、困っている人もいるんだろうなって考えまして、このチュートリアルを書かせて頂く事になりました。 一応、全機能を網羅していきたいと思いますが、間違っている箇所や足りない部分がありましたらTwitterの方へご連絡頂くと助かります。 Coda2とは? Panic社が作成しているテキストエディターです。そしてそのCoda2はデザイナー視点で作られているのでUIが直感的にわかりやすく、機能もシンプルで使いやすいのが特徴です。 パニック - Coda 2 パニック - Coda 2 本家サイトに行きまして「Codaツアー」を見て頂けるとCoda2の概要は理解出来るかと思います。 ダウンロード方法 現在、ダウンロード方法は2つありましてパニック社のサイトから購入するか、App Storeから購入するかの2パターンありますが、どちらもメリット・

2013年はアイコンタイプのwebフォントを提供するサイトが多くなり、また利用するサイトも増えたんじゃないでしょうか?もちろん僕もその一人なのですが、良いデザインで色も自由に変更出来るアイコンタイプのwebフォントはますます需要が増すような気がします。今回はたまってきた無料のみ集めたwebアイコンフォントブックマークを記事にしたいと思います。 Genericons Genericons Genericons アイコン一覧表 Genericons 一番のオススメはこのwebフォントです! なんにでも使えるオールマイティーな感じが気に入っています。 Typicons Typicons Typicons アイコン一覧表 Typicons 少し丸みがかかっていて全体的にポップな感じに仕上がっています。 Batch. Batch. Batch. アイコン一覧表 Batch. ブログ系のコンテンツなら

触れるのがこわくてずっとGitを避けて来ました。ですが、使わなければならない状況に追い込まれたので初心者ながら少しずつコミットしたりしながらGitの使い方を学んでいたらGitってもしかして楽しいかも!!って思うようになり、もっとGitの事を学びたくて色々勉強出来る資料やサイトを集めていて情報がたまって来たので、ここでまとめていつでも見れるようにしたいと思います。 Gitの仕組みを優しく教えてくれるスライド 素敵なスライドがありましたのでご紹介させていただきます。 うん、見やすい!見やすいよー!! Gitを勉強出来るサイト サルでもわかるGit入門 サルでもわかるGit入門 世界一わかりやすく説明しているサイトです。僕でもわかりました。 Learn Git Branching Learn Git Branching ゲーム感覚で勉強したい時はこちら。このサイト自体がすごい 笑 Gitコマンド

Twitterアプリ作りたいなって思い「Twitter API1.1」とシンプルに検索した所、開発系の記事ではなくて言及だけしている記事が多くてビックリしました。開発するにあたっての情報が少ないので、この記事がその役目を負えたら良いなという思いで記事を書かせて頂きます。 PHPを使いOAuthを通すTwitter API1.1の使い方を説明していきます まず初めに断わっておく事があります。初心者向けに書いていきますので 「Twitter API1.1を使って取得したデータを表示する事」を目的として書かせて頂きます。 Twitterアプリ登録をしよう 一番初めにアプリ登録をしましょう。 Twitter Developers ツイッターデペロッパー(トップページ) Create an application | Twitter Developers ここでアプリの登録を。 登録が完了したら保存

Twitterで仲良くして頂いている方と会話をしていた時にタイトルのようなクライアントアプリを作るって決めてから、その日の夜にTwitter API1.1って何だろうって軽く検索していたら意外と簡単な雰囲気でコードが書かれていたので開発に手をつけました。Pickleを作った理由、工程、ネーミングの由来等を書いていきます。 Pickleとは? まずはここから説明していきたいと思います。 Pickle Pickle(ピックル)はURLがあるツイートだけ見れるTwitterクライアントアプリケーションです。 Pickleの想い どんな人に? クリエティブな仕事をしている人の為に作りました。 ワークタイム中に情報を得たいあなたに ワークタイム中でもPickleをさっと開いてURLのみを閲覧する事が出来ます。 情報を得るもう一つの手段 Pickleを使えばフォローしている人達が注目している記事も瞬時

マップ や ストリートビュー を利用した事がないという人を捜す事の方が困難になってしまった感があります。わからなくとも使っているんじゃないでしょうか? この技術を自由自在に カスタマイズ できるようになれば webサービス 作成の幅が広がりますので GoogleMapsAPI V3 を全くわからなくとも、この記事でみなさんが簡単な カスタマイズ をしつつ ウェブサイト に表示出来るようにしたいと思います。 Google Maps API V3とは? パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション 注: Google Maps JavaScript API バージョン 3（V3）は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新

半年ほど前から良く話題になるSassとかLessとかってなんだろうなーって思いつつめんどくさそうだからこの手の記事は回避していました。 ですが、いつものようにTwitterでつぶやいていたらSassかなり良いよって言われて 「へーそうなんだ〜」と興味を持ち始めて 少しずつですが記事を読みあさりながらSassってこうゆう感じなんだーっていうのが掴みかけてきたので記事にしたいと思います。 Coda2で検索して来た方へ この記事ではCoda2の事についてあまり触れていません。ですが、こちらの記事でがっつりcoda2の魅力を語っていますので是非ご覧になって下さい。 参考記事：Coda2の使い方をマスター出来るチュートリアル[完全版] Sassってなーに? CSSを拡張しよう!っていう感じのメタ言語らしいです!サスって読むらしいです。なんだか僕的にはいい響き!「ググる」とかと似ているかも。「Sass

急ですが、webサービスやwebサイトの負荷テストは行っていますか?どの程度のアクセスがあった場合にサーバが遅くなってしまうのかをバズる前に検証しておくべきです。 現在、Yahoo、はてブ以外にもGunosy等に載る事で簡単にバズり(普段のPV数 ＋ 想定PV数5000〜30000)その時にサーバが同時アクセスに耐えられなくなり、かなりの機会損失を被ってしまいます。自分のサーバ、または借りているレンタルサーバの能力値を理解していればそれなりの対策が打てるようになるのかなーっと。そうゆう事で負荷テストをオススメします。 今回は記事を書くというよりは負荷テストが出来るwebサービス、ツール、ソフトを紹介している記事をまとめて紹介して最後に要約していきたいと思います。 負荷テストツールをまとめている記事ベスト3 負荷テストを出来るサービスやツールを紹介しているまとめ記事を厳選して紹介したいと思い

2012年に色々なブログで紹介されていたカスタマイズ法が絶滅した感があります。 そこで、アクセストークンとかアプリキーとかめんどくさいんで違う方面から攻めてみました。HTMLとCSSだけでカスタマイズできるようにしたのですが少々冗長気味になってしまっているのが申し訳ないです。 まーとりあえず、やり方を紹介していきます。 初めに注意点とか色々 Facebookの仕様が変わりデザインが崩れる恐れがあります。 レスポンシブにも対応していますがデザインによって挙動が変わるかもしれません。 実装を試して上手く行かない時はご連絡下さい。 @mtoksuy FBページの中で動画やアニメを実装する事も可能ですので実装した勇者は宜しければ、ご連絡頂けたら嬉しいです。 「いや、俺はアクセストークンとか使ってJavaScriptでカスタマイズしたいんだ!!」って方はこちらの記事を読んで下さい。 それでも、Fac

いやーもうそろそろ夏っすね。女子の浴衣にドキッとくる季節ですね。 彼女居ませんが。 さて、タイトル通りなんですが、CSSだけで忍者くんに手裏剣を投げさせてみました。意外に楽しかったので公開してみたいと思います。 この子に投げさせてみたよ 可愛いでしょ?(自分で言うな)夜な夜なレイヤーを重ね合わせこの子は生まれました。 まぁ、僕なんですが。 この記事を書く為に忍者セットを作成したんですが、意外にも手裏剣を作るのが大変でした。3レイヤーで出来てます。 レスポンシブ化しようとしましたがめんどくさくなって固定にしました。固定良いよ固定。 目次に戻る 実装方法 参考にしたサイト CSS アニメーション - CSS | MDN さて、実装方法ですがCSS3のアニメーションを利用して動かしています。 ロジック的には キーフレーム という CSS3アニメーション の機能を使い、左手やら手裏剣やらを個別にア

最近はフラットデザインに押されて急速に使われなくなった感があるCSS3エフェクトなんですが、こうも使わないと忘れちゃいそうなので、今回はCSS3で作るエフェクトの再勉強を兼ねて記事を書いていきたいと思います。 初めに引用元を紹介します Paulund 例のボックスシャドウなんですが2012年このサイトのエフェクトは日本に居るweb系の人ならば一度は見ているくらい有名になったんじゃないでしょうか? 敬意を込めて引用させて頂きます。 目次に戻る CSS ボックスシャドウエフェクト - デモ & 解説 8種類のエフェクトがどう記述されていて、それがどう表示されているのかを解説していきます。 まず初めに、そのエフェクトをかけるボックスのCSSを見て下さい。 .box { background: none repeat scroll 0 0 #F3F3F3; border-radius: 2px 2