はてなブックマーク

Useful links Dropboxデバイスを選ばないオンラインストレージ。 tenpu無広告のおしゃれなファイル転送サービス。 ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。 aguse.jpURLからサーバやドメイン管理者などを取得。 SimilarWeb競合サイト解析ツール。 Google Web Fonts PreviewGoogle Fontsの全フォントを任意の文字で一覧化。 PageSpeed Insightsサイトの読み込み時間と問題箇所をスコア化。 Entity LookupHTML特殊文字を類似文字から逆引き出来るサービス。 PHP Live Regexpreg_matchのマッチング結果を出力。 10 Minute Mail時間延長可能なワンタイムメールサービス。 ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。

みんな大好きWordPress！プラグインは宝の山やで!! 近年ではブログサイトのみならず、企業サイトやウェブサービスの基幹としても使われて久しいWordPress。 その最大の魅力ともいえるのは、膨大かつ便利なプラグインの数々。 ただ、あまりにプラグインの数が多すぎて、似たような機能を持つプラグインの中からどれを選んだら良いのか、迷うケースも多々あって。 キャッシュ系は「W3 Total Cache」か「wp Super Cache」か、バックアップなら「BackWPup」「WP-DBManager」か、などなど。。。 そんなワケで今回のエントリーでは、素晴らしいWordPressのプラグインの中から、実際にフリーランスのワタクシがクライアントワークでも使わせて頂いている「smkn的スタンダード」なモノだけを、総計21個まとめてみました。 実務においてジャンルを問わず利用できる基本的なモ

最初は暇つぶしや備忘録のために始めたブログでも、そのうち欲は出てくるモノで。 「一生懸命書いたんだから、ちょっとは人様に見てもらいたい」「頑張って続けてるのに、6pv/日とか寂しすぎる」「同じような時期に始めたっぽいブログが注目されててグギギギ」などなど。。。 とはいえ世の中には開始から数ヶ月で何十万pvとか稼ぎ出すブログがあることも事実。 そんな偉大な先人たちの中には「ウチはこーやってアクセスアップさせたよ♪」みたいな足跡を残されている方も多く、じゃあそれらを片っ端から拝読したら、なんか共通項が見えてくるんじゃないか、と。 そしたら、なんか見えました！ そげなこげなで今回は、さまざまなブログ様の「○ヶ月で××PVにする方法」的な記事に共通の施策をご紹介します！ 1. 記事タイトルに細心の注意を払う ダントツ１位！みなさま口を揃えて重要だと説くのは「記事のタイトル」について。 そのポイント

例えば、名詞や単語のリストが山ほどあって、それぞれの代表的なサイトにリンクさせたいんだけど、それらのURLをひとつずつ手作業で調べるのは現実的じゃない場合。 つまるところ、あるキーワードに対して「Googleの検索結果で１位のサイトのURL」を取得してほにゃららしたいっ！って時の方法 by PHPを、メモがてらにご紹介♪ ただしこの方法は検索サイト側の利用規約に対してグレーな使い方ですので、クライアントワークでの使用を控え趣味程度に収めるなど、ご利用は自己責任にてお願い致します。 んでは、いきまっかー！ まずはじめに、処理の流れとしてはフツーに検索結果をスクレイピングするだけなんですが、素直にGoogleからfile_get_contents()とかで直接取ろうとすると、Google側からハネられたり通ったり、挙動が安定しません。 では、どうすれば。。。 それではさっそく、下記コードをご鑑

シンプルで使いやすくて機能十分！ファイルを１つ置くだけのphpMyAdmin代替ツール「Adminer」 phpMyAdmin入ってないんだけど、データベースの中が見たい！なんなら追加も修正もしたい！あまつさえエクスポートも！いやはやEXPLAINも！ そんな時に超絶便利なphpMyAdmin代替ツールを発見しましたので、ご紹介☆ たった１つのphpファイルで出来た「Adminer」は、めっちゃ使いやすい上に、インストールもサーバにこの１ファイルをアップするだけ！ しかも容量も挙動も軽くって、もはやphpMyAdminの「代わり」じゃなく、本命として使えるレベル。 もうかさばって重ったるい環境とはお別れの気配。。。！ シンプルで使いやすいphpMyAdmin代替ツール「Adminer」 「Adminer」とは 前述のとおり、phpMyAdminに代表される、MySQLデータベースをGUIで

さきほどハードディスクの中を見て回ってたら、デザインについて重点的に勉強してた時の備忘録みたいなのが出て来ました。 改めて読んでみたら、あらまぁ結構いいコト書いてんじゃんか、と。 そんなワケで今回のエントリーは、この「デザイン勉強メモ」を臆面も無くご披露させて頂きます☆ メモなので箇条書きだったり見難かったりするかもですが、駆け出しのデザイナーさんやデザインの勘所を知りたいってエンジニアさん方のお役に立てば幸いです♪ キーワード別の具体例 かわいい ・花や星やキラキラなど、かわいらしさを象徴するパーツを随所に用いる。 ・円形、角丸、ポップ体など、「丸み」を強調する。 ・手書きフォントやクレヨンの質感などもかわいらしさを表現できる。 ・余白は多め、文字も重要部では大き目が良い。 やさしい ・暖かな中間色や柔らかな暖色など、「低彩度、高明度」が向いている。 ・[かわいい]ほどではない程度に「丸

ブログに限らず、よっぽどのコトが無い限り、いわゆるページネーションの「次へ」とかってボタンは押されにくいものです。 そこで最近は、ページ末尾まで行くと自動で次ページの内容がAJAXで読み込まれるような仕組みも増えて来ました。 今作ってるウェブサービスでもこの仕組を導入したいっ！と思って探したら、ナイス・ガイを発見したのでシェアします！ その名も「jQuery.autopager」！ 合わせて、それをWordPressでうまいこと使う方法もご紹介。 これでアナタも流行UI/UXに乗れちゃうかも!? 「jQuery.autopager」のインストールと使い方 まずは下記ご本家サイトから、JSファイルを頂戴致しましょー！ jQuery.autopager: Automatic paging plugin for jQuery ダウンロードしたら、制作者の方に感謝の祈りを捧げ、そのご多幸を願いなが

【WordPress】投稿の定型文（雛形）を作れるプラグイン「simple-post-template」の紹介と文字化け対応策 ブログを続けていくと、エントリーって大体ある程度決まった形式というか、基本的な雛形が出来てきます。 当ブログでも、今まさに読まれている「前文」から始まり、「中タイトル」「解説文」「小タイトル」「詳細解説文」「参照リンク紹介」「あとがき」といったパターンで、おおよその記事は定型文化されています。 WordPressの場合、投稿文中にそれぞれHTMLタグで上記のパターンを記述しますが、コレを毎回投稿のたびに手書きするのは無駄無駄ムダムダムダァァァーー！！ そんな時に役立つのが、今回ご紹介するプラグイン「Simple Post Templates」です！ コレは「投稿の雛形を登録すると、記事作成時にテンプレートとして読み込めるようになる」という、まんま要望通りのプラグイ

愛しのWordPressで画像アップロードした際に、所定のサイズに切り抜き（リサイズじゃなくて）する時、あるじゃないですか。 でもアレって、画像の「天地中央」で切り抜くじゃないですか。 そーすっと例えば人物のバストアップ画像なんかの場合、顔の半分が見切れちゃうじゃないですか。 なんかヤじゃないですか。 今回のエントリーではその問題を解消すべく、画像切り抜きの基準点を「中心」から「左上」に変える方法をご紹介しようじゃないですか！ そんなコトよりこの文体、ちょーウザいじゃないですか！ アップロード画像の切り抜き基準点を「左上」にする方法 調べてみると、結構多いのが「コアファイルをイジる方法」なんですが、コレやっちゃうとWordPress本体のアップデート時に毎回書き直さなくちゃいけなくて、保守性に著しく欠けるという欠点が。 それはやだなーと別の方法を模索したところ、海外の記事でドンピシャの方法

ここんとこスキや合間を見計らって、当方運営のwebサービス「フリーランサーズ パーク」をリニュってます。 フリーランサーズ パークでは、ユーザーさんが入力した郵便番号から住所や緯度経度を弾き出してるんですが、その際に使用しているのが「Google Maps API」です。 APIのバージョンが3になってからは認証キーなども必要なくなり、動作も軽快で出力形式もJSON/XMLが選べたりと、なにかと手軽に使用できるようになりました。 郵便番号のみならず、市区町村の文字列からも緯度経度を取得できますし、いわゆるジオコーディングには最適のAPIなんじゃないかと。 っちゅーコトで今回のエントリーでは、このGoogle Maps APIをPHPでゴニョゴニョして、都道府県や市区町村、緯度経度なんかを取得する方法をご紹介します☆ Google Maps APIとPHPで郵便番号からジオコーディングする方

さてさて第３弾となる【CSS 中級講座】ですが、今回は個人的にメンドくさくて仕方ない「ベンダープレフィックス」について。 ちょくちょくみかける”-moz-”やら”-webkit-”ってヤツです。 これは、草案段階のCSS3プロパティなどに対して、各ブラウザ側で実験的に実装するために用意されたモノ。 実験的な状態から恒常的な実装となった場合、該当ブラウザのベンダープレフィックスは必要なくなりますが、それがいつ不要となったのか、なかなか調べる機会もありません。 っちゅーコトで、2012年9月12日現在、主要なCSS3プロパティのベンダープレフィックスが未だ必要なのかどうか、最新情報をいくつか調べてみましたよ！ CSS3の各種ベンダープレフィックス調査 CSS3プロパティは数あれど、今回調べたのは結構主要なトコだと思われる下記６つ。 調査対象のCSS3プロパティ text-shadow box-

さて【CSS 中級講座】シリーズ第２弾は、CSSコーディングには必携の知識「clearfix」について。 なんらかの要素を float した場合、しっかりそれを解除しないと続く要素にも影響しちゃって、レイアウトが崩れてしまいます。 そんな困った時に使われる「float状態を解除する方法」を通称して「clearfix（クリアフィックス）」と呼ぶのですが、実はいろいろな方法があります。 有名所としては「:after疑似要素 + contentプロパティ + IE用ハック」ってのがありますが、そんな手間をかけずとも、もっとシンプルにfloat解除する方法、あります！ そんな訳で、さっそくいってみましょー！ 実装前の状態 まず最初に、clearfixを使う前の「レイアウト崩れてもうた」状態のマークアップをば。 <div id="contents"> <div id="main"> <p>ここは<b

リストタグ（li タグ）に対してCSSで display:inline や display:inline-block を使って横並びにしようとすると、なぜか横に2～3ピクセル程度の意味不明な隙間が生じます。 初めて遭遇した時は、慌てて自分の書いたCSSを確認したり、仕方無しに float:left に書き換えたり、マイナスマージンで誤魔化したりしたって方も多いんじゃないでしょーか。 が、この問題の主たる原因はCSS側ではなく、HTML側の「改行」。 とはいえ「見栄え」の問題なので、HTMLをどーこーするのは気持ち悪い。 そんな時には今回ご紹介する対応策！CSSにほんの少々の手を加えるだけで、この謎の隙間から完全に開放されちゃいます！ さぁさぁ、寄ってらっしゃい見てらっしゃい♪ 横並びにしたliタグで隙間が出来る問題の対応策 まずは現象を再現してみる 下記マークアップで現象は再現されます。ま

Contact Form 7に画像の送信ボタン（<input type=”image” />）を追加するモジュールを配布します♪ WordPressでコンタクトフォームを作る際の王道プラグインといえば「Contact Form 7」ですが、デフォルトでは画像の送信ボタン（<input type="image" />）を挿入するタグがありません。 しっかりフォームをデザインするんなら、送信ボタンもシャレオツに決めたいところですし、無いなら作ればよかろーもん！とゆーワケで、作りましたのでシェアさせて頂きますよ。 JavaScriptでのマウスオーバー/マウスアウトにも対応させてるので、より印象的な送信ボタンを配置できるようになります。 目指せ！コンバージョン率UP！ Contact Form 7に画像の送信ボタンを追加するモジュール 導入方法 まずは下記よりモジュールのファイルをダウンロードし

現在メインで使ってるPCがそろそろガタがきてるので、先週イキオイでwindows7機を購入しちゃいました。 いちおーHDDに諸々のバックアップもしてありますが、イキオイついでに愛用ツール群をご紹介しつつ、取り逃しの無い様に備忘録としてシェアしたいと思います。 いかんせんXP機で使ってきたツール達なので、中にはwin7に対応してないモノもありますが、その辺はご愛嬌とゆーコトで。 んでわ、以下に一挙大公開☆ smkn愛用ツール群 ブラウザ Firefox Opera Google Chrome Safari デバッグ用ブラウザ IETester SuperPreview コミュニケーションツール Thunderbird Skype Janetter twitterクライアント。この手のpツールをいろいろ触った結果、一番デザインと使い勝手が良かった。 MicroSoft Office Word

Google Feed APIを使って複数フィードをまとめて表示する「jquery.googleMultiFeed.js」 めちゃめちゃ使い勝手がイイ感じだったので、思い余ってご紹介。 当ブログでは以前より、デザイン系からシステム系、ついでに２ちゃんまとめ系など複数のブログのRSSを読み込んで表示させていました。 んで、先日のリニューアルまでは自作のスクリプトで実装してたんですが、なにせコイツが１年半以上前に作ったモノなのでスキルも知識も足りておらず、かなり力技のゴリゴリ仕様でした。 リニューアルに際し、この辺も小綺麗にまとめたいなーと思ってたところ、まさにベストな逸品を発見しちゃいました。 その名も「jquery.googleMultiFeed.js」！ そんなワケで今回は、使い方もカンタンで細かいトコまで気が回る、この敬愛すべきjQueryプラグインをいんとろでゅーすしちゃいます☆ 「

こないだちょろっと当ブログのアクセス解析データを見たところ、最近「文字化け 解読」「文字化け ツール」みたいなキーワードでのご来訪が多かったんですね。 「みんな文字化けメールに苦労してんだなー」と思うと同時に、ある思惑が。 アクセスが多い → そんな需要に沿うツールを作る → そこに広告を張る → 温泉！温泉！ そんな不埒な思惑のもとｗ、ちょーど時間もあったんでイキオイ100％で作ってみました☆ ちょっとカワイイ!?文字化け解読ツール「もじばけらった」！！ 以下にカンタンな機能説明と、制作に関するよもやま話をご紹介しちゃいますっ！ 「もじばけらった」とは 「もじばけらった」は、文字化けしちゃった文章の解読をお助けする無料のwebサービスです。 あんま文字化け現象に詳しいワケでは無かったんですが、この「もじばけらった」作成に際していろいろ調べてみたところ、文字化けの性質上、化けた際に文字を構

（12.02/21 16:00 追記）以前掲載していた「Google+1の実装方法」は、正しくは「Google+ Shareの実装方法」でした。改めて「Google+1の実装方法」を追加するとともに、謝意を表します。 今ちょっと新作webサービス作ってるんですが、自分で作ったオリジナル画像やフリー素材などで「Google+1ボタン」を実装する場合、どこにリンク張ればいいのか分からんくて。 いろいろ情報を探してみたところ、さっきやっとこさ判明したので、イキオイでシェアしまーす！ んで、それだけじゃアレだから、ついでに「twitter」と「facebook」と「はてなブックマーク」でも同様の方法をメモメモしときます。 オリジナルの自作画像で各SNSのシェア系ボタンを実装する方法 Google+1の場合 2012年2月21日現在、Google+1へ追加するためには、正規の方法（ココからスクリプト

ふとワクワクするようなアイディアが浮かんだ時、もし自分でwebサービスを作れたらなーって思う方も多いんじゃないでしょーか。 実際、twitterやfacebookを徘徊してても、結構頻繁に「webサービス作ってみたい☆」みたいな投稿をみかけますが、中には「何から手を付け始めれば良いか分からない！」的な迷える子羊達もちらほら。 そんなワケで、ささやかながら今まで当ブログでもいくつかの自作webサービスを公開してきて、企画からデザイン・コーディング・プログラミング・宣伝に至るまで、若輩ながら全て一人で担ってきた私の知見をご紹介したいと思います。 だいじょーぶ、やりゃーできる！ webサービスを作るための技術と知識 技術に関する最大のポイントは「全てを知る必要はあるが、全てに精通する必要は無い」、つまり「広く浅く」で良いというコト。 その中でどこかに自分の強みが持てると尚良しですが、手始めであれ

今年はクリスマス前後が３連休となってリア充大興奮うっほほーい☆だそうで、非リアを称される方々から怒りの声が続々と沸き起こっているようですが、筋金入りの非リアである私なぞからしてみれば、っつーか忘年会のお誘いが来る時点ですでにそれリア充やろが！と枕を濡らす季節となりました。皆様いかがお過ごしでしょうか？ せめてwebページ上だけでも、そんな甘美な情緒に身をゆだねるべく、昨年末に公開した" webページ上に雪を降らせる" というWordPressプラグイン「WP Snow Drops」の再紹介でもしよーかと思います。 非常にユーザーの多いWordPressのネタを投下するコトで、あわよくば好奇心旺盛な方々から「もし良かったら今度一緒に飲みませんか♪」という、まるで「食パンをくわえて走る美少女と曲がり角でクラッシュ→パンチラ」レベルの奇跡的リアクションに夢を馳せつつ、ご紹介スタート！ 雪を降らせ

最近ではドメインやサーバにかかる代金も格安になり、個人でもwebサービスを作りやすい環境となりました。 私自身もいくつかのwebサービスを開発・運営してますが、いつも苦労するのが「作ったwebサービスの宣伝」です。 作成した際には当ブログやtwitterで宣伝したり、各所にプレスリリースを送ったりしていますが、最近では自作webサービスをPRできるようなサイトも増えてきていて、そーゆートコにも登録申請したりしています。 もしリンク集サイトがもっと多くのに知れ渡れば、それを見に来る人が増える → 宣伝効果が上がる → webサービスの登録が増える → 見に来る人が増える、、、というすんばらしい好循環！ そんなワケで今回のエントリーでは、個人のwebサービスを紹介してくれる「webサービスのリンク集サイト」をまとめてみました！ 今回ご紹介する全てのサイトは、掲載や登録申請に際して一切費用がかか

WordPressでA8.netの広告バナーを管理するプラグイン「WP A8 Manager」作りました！ えー、まんま表題の通りなんですが、そーゆーWordPressのプラグインを作りましたとゆーコトで。 WordPressに限らず、ブログをやっている方の多くがアフィリエイトのために使っているA8.netのバナー広告、もちろん当ブログでもそこかしこに貼り付けてありますｗ ですが、たまに気を抜いてると広告期間が過ぎちゃって、かなりチープなデフォルト画像に差し変わっちゃってたりするんですよねー。 今まではPHPで無理矢理ランダム表示させてみたり、広告表示用のfunction書いてみたり、果てはローカル環境に管理用ツールを作ってみたりもしましたが、やっぱりちょっと不便だし、いくつか広告管理用のプラグインを探してもみたんですが、シェアウェアだったりなんだりと、なかなか良いのは見つからず。 そんな

長文テキストから必要な文字列を抜き出したり、HTMLソースから欲しいトコを抽出したりしたい時、役に立つのが「正規表現」。 使えるようになるとメチャクチャ便利なんですが、記号の羅列っぷりに気押されして、初めはなかなか手をつけられないんですよねー。 自分自身まだまだヒヨッコではありますが、それでも「たったコレだけ知ってるだけでも、効率がガクンと上がったよ！」という正規表現について、ご紹介しちゃおーと思います。 サンプルは基本的にPHPのモノですが、内容はPerlでもテキストエディタの検索/置換機能でもおおよそ同じかと思いますので、そこら辺は各自で適宜読み替えつつ、ご覧になって下さいまし☆ 「正規表現」2つのポイント 本題の前に（正規表現とpreg_replace関数・preg_match関数について） 正規表現自体イマイチ良く分からんって方のためにカンタンに説明すると、正規表現とは「あらかじめ

最近新しいwebサービスを制作してまして、その一環で「オンライン上で動くmp3プレイヤー」を探してまくったので、その成果をシェアしちゃいます。 flashでエフェクティブにうにょうにょ動くようなモノから、JavaScriptでシンプルに設計されたモノまで、その数およそ16個！ それぞれ特徴があって、オープンソースだったりCCライセンスだったり、再生ボタンだけだったりガッツリデザインだったり、ボリュームバーの有無、曲のタイトル表示の有無、カスタマイズ性、拡張性などなど、ホントに千差万別。 なので、とりあえずプレイヤー本体の画像を並べて置きますので、気になったモノがあったら迷わず本家サイトを覗くが吉。 なお、掲載した全てのmp3プレイヤーを動作確認したワケではないので、それぞれの使い方なんかはご自分でお調べ下さいまし＆ご利用は自己責任でお願い致しますです。 それでは、久々に画像だらけのエントリ