パラメータ値が数字かどうか判別する - シンプルシンプルデザイン php
https://simplesimples.com/search.html?p=xxxx たとえば、こんなURLがあって、pの値が数字かどうか判別したいとき。 事前段階のパラメータの有無は isset で確認したとして、パラメータ値が「0-9」のみかどうか判別する正規表現を書くんだろうな、と想定したけど、もっと他の手段があったので備忘録。 is_int 「与えられた変数の型が整数型かどうかを検査します。」とのこと。でもパラメータ値は文字列として判断されるから注意。そこで is_numeric。 is_numeric 「指定した変数が数値であるかどうかを調べます。」とのこと。おー、いいじゃん。なのですが、たとえば下記はすべて numeric です。 “42” 1337 0x539 02471 0b10100111001 1337e0 9.1 正規表現 個人的な結論としては、パラメータ値が「0
jQueryでformを操る【nameの値を取得する/クリアする】 - シンプルシンプルデザイン JavaScript
form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使えば「さくッ」と取得できて便利。今回は、nameの値を取得する、にフォーカスします。 input type=”text”の値が変更するたびに処理を実行する $('input[type="text"]').on('input', function () { }); inputのvalue値 サンプル <input type="" name="sample" value="" /> type=”text” $('[name=sample]').val(); type=”radio” $('[name=sample]:checked').val(); チェックがない場合は「undefined」が返ってきます（Firefox 23で確認）。
SEO 2013（CSS Nite LP29） - シンプルシンプルデザイン イベントレビュー
注目は再訪。再訪は、お知らせを受ける許可をしてくれた人であり、追加したコンテンツを最初に届ける相手。ここはクチコミの起点ともなる。 再訪を増やす（＝経路整備）方法（古い順） ニュースレター、メルマガを購読してもらう RSSを購読してもらう Twitterをfollowしてもらう Facebookページにいいね！してもらう SEO/SMOの完成 作成（有益で高品質なコンテンツを作る） 告知（多くの人の目に触れさせる） 拡散（話題になり多く見られる） 反応（フィードバック・リンクが集まる） 従来は告知がネックだったが、Facebook広告（初めての効果的な積極策）のおかげで今はネックがない！ 司会者からの質問 テクニック重視からユーザー中心になった理由は？ 「儲からなきゃ意味がない、その結果の流れ」（心の声）深いィーーーーーー！ SEOの最新トレンドに乗り損ねるな SEOの定義 ユーザーの役に
SEOとドメイン変更 → 301リダイレクト！ - シンプルシンプルデザイン SEO
ドメインを変更する場合、GoogleやYahooの検索ボックスを利用した際に表示される順位が下がってしまうのでは！？と不安になる。 そんな不安を消してくれる検索エンジン対策が、「SEO ドメイン変更」「SEO 301」「リダイレクト SEO」とかで検索すると該当する記事がたくさん見つかって、紹介されていた。 レンタルサーバ「heteml」でドメイン変更 .htaccess RewriteEngine On RewriteCond %{http_host} ^www.olddomain.com RewriteRule ^(.*) http://www.newdomain.com/$1 [R=301,L] できた！以上。 なのですが、ググったときの備忘録。 301リダイレクトによるサイト移転時に知っておくべきこと 知識編 海外SEO情報ブログ「301リダイレクトによるサイト移転時に重要なTIP
文字数を知る（javascriptでいうところのlength）→ mb_strlen - シンプルシンプルデザイン php
ちょっとハマってしまったので備忘録。 javascriptの「length」に相当する、文字列の長さを得るphpの関数に「strlen」「mb_strlen」があることを知る。 strlenはバイト数を。mb_strlenは文字数を取得できる。 なるほど。mb_strlenで楽勝だな、と思ったが・・・。 mb_strlen(‘あ’); 当然「1」が返ってくると思ったけど、実際は「3」が返ってきた。しかも環境によって返ってくる値が「3」だったり「2」だったり「1」だったり・・。 なぜ？ ググる。どうやら内部エンコーディングが文字列のエンコードと異なっている時に想定外の値が返ってくることが分かった。対応方法がいろいろ書かれていたが、「あ」が「2」ではなく「1」がほしい。 function getLength($str) { // 内部エンコーディング取得 $org_encode = mb_in
[連想配列]2つ以上のキーで並び替えをする - シンプルシンプルデザイン JavaScript
2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつてと", 10]); arr.push(["3", "6", "かきくけこ", 20]); arr.push(["3", "6", "かきくけこ", 10]); arr.push(["7", "2", "さしすせそ", 10]); arr.push(["3", "2", "あいうえお", 50]); 連想配列の第1引数を並び替えをする場合 昇順 function funcCompare(a, b) { if (a[0] < b[0]) return -1; if (a[0] > b[0]) return 1; return 0; } arr.sort(funcCompare); 降順 function funcCompare(a, b) { if
ほんとの意味で「シンプル」とは？ - シンプルシンプルデザイン デザイン思考
D.A.ノーマンの書籍「複雑さと共に暮らす デザインの挑戦」の本文内のテキストをほぼそのまま抜粋し、ポイントごとにまとめ直した（2011年10月に書いた記事「ほんとの意味で「シンプル」とは？」から移動してきました）。 「なぜ、テクノロジーは複雑か？」 「なぜ、ものごとはシンプルにならないのか？」 それは、人生が複雑だからだ。 機能を減らして複雑を減らすのは容易だが、シンプルを切望する一方、複雑を必要とするのが心理。 実際、モノをシンプルにすると売れなくなる。 選択できるときは、より多くのことをやれるものを選ぶ。その機能が複雑さの元になることを知っていても、シンプルより機能を取るのが心理。シンプルを望むが、すばらしい機能のどれ一つも失いたくはない。 生活の中では「複雑」は必要。 「複雑である」ことと「分かりにくい」ことは別。 「分かりにくい」ことは、悪いことだが、「複雑である」ことは、良くも
localStorageでオブジェクトを格納する - シンプルシンプルデザイン JavaScript
localStorageは、近頃のブラウザやスマホで対応しているのでチョー便利。 そして文字列ではなく、オブジェクトを格納しようとするたびに、その方法を検索しちゃうので、いいかげん覚えたい。 テスト1 // セット localStorage.test = {a : ‘test’}; この方法だと、[object Object]という文字列が格納されるだけ・・・。 テスト2 // セット localStorage.test = JSON.stringify({a : ‘test’}); // 呼び出し localStorage.test この方法だと、{“a”:”test”} という文字列を呼び出すだけ・・・。 ファイナルアンサー // セット localStorage.test = JSON.stringify({a : ‘test’}); // 呼び出し JSON.parse(local
デバイス別、クロスブラウザ別対応 – not useragent - シンプルシンプルデザイン JavaScript
もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代になって1,2年が経ちました。 「プログレッシブエンハンスメント」や「グレイスフルデグラデーション」、「メディアクエリ」、「CSSスプライト」、「モバイルファースト」というキーワードも聞かれるようになりました。 あ、最大のキーワードは「html5」。これは広義にも狭義にも使われてますね。 このような流れを受けてか、ビジュアルデザインは大きく、フォントも大きくなったサイトを見かけることが多くなった気がします。 結果見やすく、アクセシビリティにも良い印象。個人的にも素材を大きくダイナミックな表現は好みなので見てて楽しいです。 っとデザインの話しではなく、クロスブラウザ、マルチデバイスにどう対応するか。 そのコンテンツのユーザーは誰か？をデ
Google検索で上位表示されるページの共通点 - シンプルシンプルデザイン SEO
検索結果に上位表示されるには、外的要因と内的要因がある。 そして、内的要因に手を施すのが「本来のSEO対策」であり、外的要因に対して対策を練ることはスパムであるべきだ。 たとえばWebリングや相互リンクを使った外部ドメインからのバックリンクを増やすという行為は健全なSEO対策とはいえない。 と考えると、SEO対策でできないことは、書にも触れられているが、 ドメインの取得経過日数 外部ドメインからのバックリンク 年月をかけて積み上げたページ数 であり、できることは 内部施策 である。 という前置きはいいとして、実際のとこはどうなのか？ 250個のキーワードでGoogle検索した検索結果を50位まで収集し、分析されたのがこの本。 「やっぱりね」 で終わるわけだが、その裏づけとなるので、知識に対する自信につながった。 Google上位表示 64の法則 ページランクが高いと上位表示？★★★★ We
html5の要素とコンテンツモデル - シンプルシンプルデザイン html
html5の要素を調べたことがあれば、下図のようなものを見たことがあるかもしれない。 これは、W3C Editor’s Draftを参考に、自分なりかみ砕いたものだ。 コンテンツ・モデル html4までは「インラインレベル要素」か「ブロックレベル要素」がキーワードだったが、html5ではその概念はない。 その代わり「コンテンツ・モデル」という概念を意識する必要がある。 コンテンツ・モデルの種類 2012年2月1日付けのW3C Editor’s Draftによると大別して7つのコンテンツ＋2に大別され、各要素は下記のいずれかに0個以上に属する。 メタデータ・コンテンツ (Metadata content) フロー・コンテンツ (Flow content) セクショニング・コンテンツ (Sectioning content) ヘッディング・コンテンツ (Heading content) フレー
スマホでアドレスバーを非表示にする - シンプルシンプルデザイン JavaScript
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> <meta name="robots" content="ALL" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <link rel="apple-touch-icon-precomposed" href="a
offsetTopやらoffsetHeightやら | 0から目指すWebマスター
コンテンツの高さだったり、ページ内の指定した要素を表示するようスクロールさせようとした際とか、毎回同じことをネット検索してしまうので、ここで高さを取得する方法に限定してまとめておきます。 ①画面の表示領域 window.innerHeight ②現在表示している上部は、コンテンツ上部からどのくらい離れているか window.pageYoffsetwindow.pageYOffset ちなみに、「window.pageYOffset」の代わりに、「document.documentElement.scrollTop」を使うと、iPhone（iOSのバージョン覚えておらず。。）でスクロール量に関わらず「0」が返ってきてしまってた。。 ③指定した要素は、コンテンツ上部からどのくらい離れているか document.getElementById(‘test’).offsetTop ④内包されたコンテ
スマホでマウスオーバー - シンプルシンプルデザイン JavaScript
スマートフォン（以下スマホ）やタブレットでPCでいうところのマウスオーバー処理をしたいときは、touchイベントを使うことで実現できる。 確かAndroid1.6とかでtouchイベントに対応していない端末があったような気がするが、touchイベントに対応しているか判別すればいいわけで、デバイスがPCだろうがスマホだろうがタブレットだろうが関係ない。 実装イメージ touchイベントを認識するか？ しない→clickイベントで処理（マウスオーバーは普通にCSSで） する→clickフラグ用の変数を用意。 タップした（ontouchstart）ときに見た目を変えるCSSやclass名をセットする。 タップしたところから移動（ontouchmove）したら、clickフラグを無効に。 タップを離した（ontouchend）とき、 タップしたときにセットしたCSSやclass名を取り消す。 cl
マルチカラムをCSS3で実装 - シンプルシンプルデザイン CSS
幅を指定 column-width: 150px; columns: 150px; カラム数を指定 column-count: 3; columns: 3; 「columns」は、幅指定もカラム数の指定もできるので便利。 ※両方指定した場合の挙動は、W3Cドキュメント「http://www.w3.org/TR/css3-multicol/」のThe floor() function rounds a number to the next smaller integer. に記載されているが、よくよく考えて幅とカラムを両方指定するシーンはそうないと思う。 カラム間 余白 column-gap: 40px; 区切り線 column-rule-color: #ccc; column-rule-style: solid; column-rule-width: 10px; column-rule:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
