【JavaScript】$(document).ready()？ $(window).load()？ at softelメモ
問題 $(document).ready() と $(window).load() は何か違うの？ 答え 違う。 readyはDOMが構築されたら実行される。 $(document).ready(function() { // Handler for .ready() called. }); これは次のよく見かける省略形と同じ。 $(function() { // Handler for .ready() called. }); loadは、使用される画像など含めて、ページが完全に読み込まれたら関数が実行される。 $(window).load(function () { // run code }); そのため $(document).ready(function() { // 画面にある画像の大きさを取得したいよ → できません× }); $(window).load(function(
【CSS】改行を含むテキストの表示をスタイルシートで？ at softelメモ
問題 以下のような改行を含むテキストがあって、ブラウザの画面に表示したいんだけど、こういうときはphpのnl2br()を使うんだっけ？ 改行を含むテキスト あいうえおかきくけこ 本日は晴天なり ↓ nl2br($str) 改行を含むテキスト<br /> あいうえおかきくけこ<br /> 本日は晴天なり 答え それでもいいんだけど、スタイルシートで対応するのはどう？ <div style="white-space:pre-wrap;">改行を含むテキスト あいうえおかきくけこ 本日は晴天なり</div> ↓ ほら。 事例 twitterがPC版で改行の表示を対応したとき、white-space:pre-wrap;したみたいです。 ブラウザの対応状況は？ white-space:pre-wrap;はIE6以前がだめらしい。今なら使っても大丈夫でしょう。 「HTMLで改行といったら<br />で
［ウェブサービスレビュー］ダミー画像を簡単に生成できる国産ジェネレータ「Placehold.jp」
内容：「Placehold.jp」は、ウェブサイトの制作においてダミー画像が必要な時、画像サイズなどの条件を入力するだけで必要な画像を出力できるジェネレータだ。スタイルシートも利用できるほか、国産のサービスということもあって代替テキストに日本語が使用できるのが大きな特徴だ。 「Placehold.jp」は、ウェブサイトの制作においてダミー画像が必要な時、画像サイズなどの条件を入力するだけで必要な画像を出力できるジェネレータだ。国産のサービスで、代替テキストに日本語が使用できるのが大きな特徴だ。 使い方は前回紹介した「DummyImage.com」をはじめとする競合サービスとよく似ており、サイズや色などの条件をパラメータとして入力する。完成した画像はダウンロードもできるほか、「placehold.jp/48/000000/ffffff/640x480.png」といった具合にパラメータが埋め込
twitter bootstrap を とにかく手軽に始められる雛形 at softelメモ
問題 twitter bootstrap やってみたいんですけど。 twitter bootstrap 都度都度ダウンロードしてくるのめんどくさい。 twitter bootstrap もうちょっとサクッと使えない？ そんなとき。 答え 以下のようなHTMLからスタートすると、何も用意する必要がなく、HTML一枚から始められるでしょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Bootstrapの雛形です</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.
デコポンは商品名なのだ！ ｜ softel blog
いつも事務所にみかん臭を撒き散らしてすみません。 なかなか手が黄色くならないYです。 自分が知っていることはみんなも知っている と思いがちですが、 「デコポンは商品名であり、品種としてはしらぬひ（不知火）なのだ！」 ということが、付近（自席の半径3m）では案外知られていなかったので、 ぜひ世界の皆様にもお伝えしておこうと思ったしだいです。 デコポンについては、以下のJA熊本うき Webサイトからの引用のとおり。 「デコポン」は、JA熊本うきを代表するブランド柑橘。品種名を「不知火」といい、「ポンカン」と「清見」の交配で生まれました。不知火のうち、光センサーでチェックされた糖度とクエン酸の基準をクリアしたものだけが「デコポン」と名付けられます。 「しらぬひ（不知火）」という品種のみかんの中で、 選ばれし者だけが「デコポン」を名乗ってよいということですね！ とはいえ、「しらぬい？何それ？」と言
途中まで日本語入力してしまったけど半角英数字に直したい ｜ softel blog
こういうことないでしょうか。 例えばメールアドレスを入力しようとしているとき、 「kitagawa」と入力したいのに、 日本語入力がONになっていて「きたがわ」と入力されてしまった。 そんなときは！ 入力確定前なら、F10キーを押してみてください。 あら、「きたがわ」が「kitagawa」になるじゃありませんか。 間違えて日本語で途中まで入力することが多い方、 「あ～ぁ、入力し直しか…」となることが多い方、 F10キー押下で解決です★ F10で半角英数字に変更できる機能が案外知られていないようで、 こんなことができると知って、結構びっくりされることが多いです。 文字入力時のストレスがだいぶ軽減されると思いますので、 ぜひ活用ください！
【php】あるディレクトリの中のファイル一覧を作る関数 at softelメモ
問題 あるディレクトリの中のファイル一覧を作りたい。phpで。 答え こんな関数を作るとわかりやすいでしょうか。 //ファイル一覧作成関数 function rd($p, $x = array()) { $d = dir($p); while (false !== ($e = $d->read())) { if ($e != '.' && $e != '..') { $x[] = $d->path . '/' . $e; if (is_dir($d->path . '/' . $e)) { $x = rd($d->path . '/' . $e, $x); } } } return $x; } それ以上深い階層がなければ、ファイルを集めてくる。 それ以上深い階層があれば、再帰でさらに調べる。 . と .. は無視。 LinuxでもWindowsでも使える。 ディレクトリも隠しファイル（先頭
【WordPress】ダッシュボードにちょっとした情報を追加で表示したい at softelメモ
問題 WordPressのダッシュボードに表示を追加したい。 ほんとちょっとしたことなので、下図のあたりに情報を追加で表示したい。 答え うまい具合に、そんなところに表示を追加できるフックがあるのかなと思ってソースを見たら、ありました。 function wp_dashboard_right_now() { /* 中略 */ update_right_now_message(); echo "\n\t".'<br class="clear" /></div>'; do_action( 'rightnow_end' ); // wp-admin/includes/dashboard.php 406行目付近 do_action( 'activity_box_end' ); } WordPressのフックは1000個以上あり、覚え切れない、探せないという感じがしますが、ちょっとソースを追えば、希
【CSS】印刷するとリンクの後ろにURLが勝手に表示される at softelメモ
問題 あるWebページを印刷すると、リンクの後ろにURLが表示されました。 ぜんぜん見た目どおりでなくて、ちょっと困るのですが。。。 答え 以下のようなCSSが組み込まれていると、a要素でhref属性がある場合、印刷時に、要素の後ろにリンク先が挿入されます。 @media print { /* 省略 */ a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* 省略 */ } 最近の Twitter Bootstrap などがそうなっているようです。 どうしても困る場合は、CSSの該当部分を削除してしまえばよいです。
【jQuery】easing関数を作る at softelメモ
戻り値は変化率とでもいえばよいだろうか。 一番簡単な、進捗に正比例して変化する例 こんな変化をさせる場合。横軸が時間（0～1）、縦軸が値の変化。 これでよい。 jQuery.easing.myEasing = function(x, t, b, c, d) { return x; } 進捗率＝変化率で、進捗0なら変化も0、進捗1（100%）なら変化も1（100%）。 最初ゆっくり、後から加速の、二次関数を使った例 こんな変化をさせる場合。物が落下するときの感じの変化。 jQuery.easing.myEasing2 = function(x, t, b, c, d) { return x * x; } あら？なんだかとても簡単そうな感じがしてきましたか？ 変化のある動きをさせる例 こういうのはどうでしょう。 jQuery.easing.myEasing3 = function(x, t,
【php】年度に分ける例（4月開始の） at softelメモ
問題 お客様の声の投稿日の年度別の一覧表示を作りたい。 完成物件の完成日の年度別の一覧表示を作りたい。 スタッフの入社日の年度別の一覧表示を作りたい。 といったとき、どうしましょう。 年度です。4月スタートで3月終了のあの年度です。 答え こうしてみた。 //年リスト作成（スタートと終了は適宜調整） $ym = array(); foreach (range(1990, date('Y')) as $y) { foreach (array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12') as $m) { $ym[] = array($y, $m); } } //後ろに3ヶ月追加して、来年03月終わりにする $ym[] = array(date('Y') + 1, '01'); $ym[] = a
【WordPress】スパム判定になったコメントを登録したくない（プラグイン作成） at softelメモ
問題 WordPressの設定→ディスカッションのところにコメントブラックリストの設定がありますよね。 コメントブラックリストでスパムだと判定されたコメントは、スパムに入れないで、ゴミ箱にも入れないで、最初から登録しないで欲しいんですけど、そういうのできますか？ 答え プラグインで、できそう。 WordPressがコメントブラックリストを使ったスパム判定をした後で、我々もスパム判定するチャンスがある。 使うのはフィルターの「pre_comment_approved」。 このフィルターが呼ばれるタイミングは、コメントが wp_insert_comment()で登録される前で、WordPressが「承認する(1)/承認待ちにする(0)/スパム(‘spam’)」の判定をするwp_allow_comment()の中で、WordPressの判定の後になる。 「WordPressはスパムと判定したけど
tmhOAuthでエラー（レスポンスコード0、エラー番号60） at softelメモ
問題 tmhOAuthというtwitterのOAuth libraryを使って、phpスクリプトからtwitterに投稿しようとしたのですが、 レスポンスのコードは0、以下のエラーが返ってきました。 error setting certificate verify locations: CAfile: /xxxx/yyyyy/zzzzz/cacert.pem CApath: /xxxx/yyyyy/zzzzz 答え オプションに 'curl_ssl_verifypeer' => false を追加すると、証明書のチェックを省くので、問題のエラーは出なくなる。 $connection = new tmhOAuth(array( 'consumer_key' => 'xxxxxxxxxx', 'consumer_secret' => 'xxxxxxxxxx', 'user_token' =>
【jQuery】長いリストを短くして「もっと見る」をつける at softelメモ
リストで、あまりに長くなって邪魔な場合があると思います。 例えば、WorPressの年月日のアーカイブの一覧が、3年ぐらいたつと36個もできてしまう。 普段は上10個ぐらいあれば十分。でも件数制限して画面から消してしまうのはなんだかもったいない。 そこで、下図のようなことをしてみます。 スクリプトが動くPCなどの環境ではリストがコンパクトになり、スクリプトが動かない環境では通常通りの表示をします。 JavaScript $(function(){ $("#list").each(function(){ $(this).find("li:gt(10)").each(function(){$(this).hide();}); $(this).append('<p>» もっと見る</p>'); $(this).find("p:last").click(function(){$(this).par
【JavaScript】JSONを使う。IEでも。 at softelメモ
問題 ネイティブのJSONはたいていのモダンなブラウザなら大丈夫だけど、IEはIE8以降らしい。 どんな環境でもJSONを使えるようにしたい。 答え JSON.parse や JSON.stringify を、ブラウザの違いなど考えずに使えると、うれしいですね。 json2.js を使って、こんな風にしておけば、ネイティブのJSONがない環境ではjson2.jsのJSONが使えるでしょう。 <script>!window.JSON && document.write('<script src="/path/to/js/json2.js"><\/script>')</script> !window.JSON && を入れているのは、読み込まなくてよい環境では無駄に読み込みたくないからですが、気にしない場合は素直に以下のようにしておけばよいと思います。 <script src="/path/t
【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 at softelメモ
【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 問題 フォームがEnterキー押下でsubmitしてくれたり、くれなかったりするのですが、何かルールがあるのですか。 特に、サブミットボタンがないフォームについて。 特に、入力欄が1つのときと、2つのときの違いについて。 例1 form内にinput[type=”text”]が1つだけ <form method="post" action="?"> <input type="text" name="test"> </form> Enter押下でSubmitします（だいたいのブラウザで） 例2 form内にinput[type=”text”]が2つある <form method="post" action="?"> <input type="text" name="test"> <
ソースコードを表示するためのフォント at softelメモ
Adobeから「Source Code Pro」というフォントが、オープンソースで公開された。 http://blogs.adobe.com/typblography/2012/09/source-code-pro.html プログラムやHTMLを表示したときに、見た目が紛らわしくなりがちな文字が判別しやすいなどの特徴があるとのこと。 Adobe Edge Web Fonts、Typekit、WebINK、Google Web Fontsの各種サービスからも利用可能。 Eclipseのエディタで使ってみるとこんな感じ（フォントサイズと太さの指定でだいぶ感じは変わるだろう）。 使用後スクリーンショット Source Code Pro 雰囲気は好きなのだが、Eclipseのエディタでは日本語が表示できなかった。 ダウンロード ダウンロードはこちらから。 http://sourceforge.n
【WordPress】ユーザーのプロフィールの項目をカスタマイズする at softelメモ
問題 例えば、会社のホームページの社員紹介ページのようなものを作る場合、 社員の情報をWordPressのユーザーとして管理しようとすると、どうしても項目が足りない。 社員番号や、性別や、twitterアカウント、facebookのURLなど、いろいろ入れたいんだけど、難しい？ 答え 案外簡単。functions.php などに、以下のフックを追加する。 /** * ユーザープロフィールの項目のカスタマイズ */ function my_user_meta($x) { //項目の削除 unset($x['aim']); unset($x['jabber']); unset($x['yim']); //項目の追加 $x['twitter'] = 'twitter'; $x['facebook'] = 'facebook'; $x['phone'] = '電話'; $x['address']
Amazon S3 でWebサイトを公開する at softelメモ
概要 Amaon S3に、静的HTMLのWebサイトを設置する。 S3（Amazon Simple Storage Service）はストレージで、アプリを置く場所ではないのですが、動的なものでなかったら置いて参照するのは問題ありません。 何かのモックアップとか、デモサイトとか、サーバーサイドの処理がないWebページ、画像やスクリプト、CMSで作ってありながらほとんど更新されていないサイトなど、置いておきたいだけのものって結構あるんじゃないかと思います。 S3上に、気軽にホイホイ場所（buckets バケツ）を作り、ドメインはCNAMEで簡単に設定。転送量がなければ、課金はほぼタダ同然。 そんな素敵な Amazon S3でWebサイトの手順。 1. amazon web service のアカウントを作る こちらにて http://aws.amazon.com/jp/ 2. さっそくS3の
【Javascript】 in演算子 at softelメモ
問題 inって演算子なんですか。 答え in単体だと演算子です（for-inのはそういう”構文”）。 あまり見かけないけど、こういう書き方ができる。 Example if ("xxx" in obj) { //obj に xxx プロパティがあるとき //... } Example ("xxx" in obj) ? alert('obj.xxx あり') : alert('obj.xxx なし'); ただ、以下の書き方でだいたい事足りるので、あまり使われない。 if (obj.xxx) { //... } 「プロパティが存在するかどうか」と、「プロパティの値が真かどうか」という意味合いの違いはある。 /** * 準備 */ var o = {}; o.aaa = 123; o.bbb = null; o.ccc = undefined; /** * test 1 : プロパティがあって値が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
