はてなブックマーク

seleniumでヘッドレスChromeブラウザを立ち上げながら自動操作をしていく流れの中で Chrome拡張機能を噛ませたいシチュエーションがあったんですが、結構ハマったのと 色々なシーンでの可能性を見出したのでメモ。 Chromeアドオンを実装したヘッドレスブラウザの起動 seleniumドライバとして立ち上げるChromeは通常使ってるChromeブラウザとは異なるものなので、入れてる拡張機能は同期されていません。 まずはヘッドレスブラウザに拡張機能を読み込ませた状態で起動できるようにしましょう。 通常使ってる拡張機能を併用する場合 普段使ってるChromeブラウザに入っている拡張機能をそのまま利用する場合は、まず拡張機能がインストールされている場所を確認します。 拡張機能のID確認と保管場所 Chromeの設定アイコン　→　「その他のツール」　→　「拡張機能」で現在インストールして

前回、「jQueryに興味はあるけど難しそう・・・」とか「覚えたいけど何をどうすれば？」といったjQueryに関心のある方のお手伝いができれば!!! といった訳で問題集を作ってみました。 jQuery覚えたい人向け入門の問題集作ってやんよ!!!（メソッド編） 前回はjQueryライブラリで用意された関数を用いてページを読み込んだ時点で処理を行うものがメインでしたが、 ＵＩやヌルヌル動くアニメーションを手軽に作成できるのがjQueryの真骨頂だと思いますので、 せっかくテキストの書き換えや要素の追加・削除ができていればあとはもうあとはfunction宣言や記述ルールのコツさえつかめばおｋ。 jQuery問題集レベル２（ベタ書きfunction関連） レベル２・・・・・完成イメージから処理に適したメソッドを選定でき、functionイベントを設計できるレベル 問31.id名「q31」の要素にサ

Javaのnullのように、特別な値を言語側が提供しなくても、一定の約束事(0をNULLとするなど)を決めることで対応できるのです 逆にいえば、約束事を決めておいてでも、“何もない値"を使う必要があったわけです。 「何もない」を表現する必要性とは？ 値を格納する箱に名前を付けるもの、あるいは値を束縛するために必要な物が変数。 変数は基本的には何かの値とひも付いている物であり、逆に値とひも付かない変数があってもよいのでは？ これこそが「null」が必要とされた理由です。 ネット検索に例えて考えてみる 極端な例でいうならば、とあるキーワードをネットで検索した場合、 キーワードに該当するサイトやページがヒットすれば検索サイトはその該当するページを一覧で返してくれますが、 もしキーワードに該当するページが無かった場合、何の反応もしないわけにはいきませんから システムエラー画面ではなく「何もなかった

更新が滞ってしまいました・・・全国5000万人の「ときどきWEB」ファンの方々、すいませんでしたm(_ _)m 初心に帰ってページ読み込みの負担を軽減させるには必須技術となる非同期通信。 ちゃんと習得していこうと思います。 jQueryのajax関数とは？ いわゆる「非同期通信」というヤツです。 ページ遷移を行わずに足りないデータだけをサーバーにリクエストして読み込むことができます。 Facebookのページ下までスクロールするとどんどん過去の投稿がでてきたり、 Googleマップなどもマップ内を移動したら、ウィンドウのリロードなどをせずともその場所のデータを新たにフレームワークに読み込んだりできますよね。 実際にはJavaScriptとXMLでなんやかんやして・・・ といったちょっとクライアントサイドをかじった程度の素人には敷居が高い技術の様に思えますが、jQueryの関数でajax()

HTMLファイル内の指定個所に期間限定で表示させるPHP 同じ内容のソースを一定の期間だけ表示させたい場合、期間中に毎回毎回ファイルに記述して更新して 期間が過ぎたらまた修正して、時期がきたらまた更新・修正・・・・・・・ そんな事やってらんないわ！！ と、お嘆きの奥さんにピッタリなPHP関数をご紹介！ PHPファイル記述例 /*---------------------------    フィールド値    ----------------------------------------------*/ $start = 5;        //表示開始日(5日～) $end = 10;        //表示終了日(～10日) $text = "表示してやんよ"; //表示するテキスト /*---------------------------    実行プログラム    -------

指定日とそれ以外で切り替わる画像 サイトなどで普段表示してある画像を「毎月○の付く日は～」の様に、 指定した日付の間だけ画像を切り替える関数を作った。 PHPの記述 今回はパチンコ店などでも使えるような『7の付く日は大放出』的なバナーを出力するシチュエーションを想定して作成。 $n = array(7,17,27); //指定数の付く日 $ver01 = array('01','7のつく日だよ'); //指定日出力画像('画像名','altテキスト') $ver02 = array('02','7のつかない日だよ'); //その他出力画像('画像名','altテキスト') //--------------------------------------------------------------- $imgOutPut = funcbannerChange($n,$ver01,$ver

スマホやタブレットではiframeが効かない現象・・・ ※正確にはiframeの高さの指定が利かずに内部コンテンツの中身がすべて出てしまう。 この現象は知っていましたが、いざ実際に遭遇するとけっこう厄介な代物だと気づかされたのでかなり力技ですが対策スクリプトを書きました。 対応策①CSSで疑似iframeに装飾 こちらはよく他のサイトでも解説されていますが、同じファイル内にコンテンツを記述しCSSでiframeの様に装飾をする方法があります。 HTMLの記述 <div class="counterfeit" style="overflow:auto;"> <h3>疑似iframeコンテンツ</h3> <h4>overflow:auto</h4> <p>コンテンツテキスト</p> <p>コンテンツテキスト</p> ～ <p>コンテンツテキスト</p> <p>コンテンツテキスト</p> </d

JavaScriptの処理ライブラリを作りためたい気分になってきたので今回は条件分岐のパターンとよく使われる演算子をおさらいします。 「js覚えたいなー」系の方々の参考にでもなればいいなぁー。 条件分岐の方法 単純に上から記述されたスクリプト処理をしていくだけではプログラムは作れません。 状況に応じて処理を切り替える処理を主に”条件分岐”と呼びます。 条件分岐には主に「if文」という構文が用いられます。 この「if文」を処理に使う事で、得られる結果が 条件を満たしているtrue（是）もしくは条件を満たしていないfalse（否）の判定をして、その実行された結果が、その後の処理に引き継がれていきます。 if/elseを使って条件分岐 使用グローバル変数の設定 //変数を宣言 var var01; var var02; var var03; //パラメーターの代入 var01 = 5; var0

以前ページスクロールで対象位置までスクロールしたら要素の表示・非表示処理に関する記事を書きました jQueryでページスクロールの指定箇所で要素の表示・非表示を切り替える関数作ってやんよ!!! 今回はＬＰページなどでページスクロールをしていくと横から飛び出すイベントを作成。 前回は指定位置を固定ピクセル値で指定するものだったので、ユーザーのブラウザのウィンドウサイズに制限される要素が多いので、今回はブラウザの高さに左右されない仕様を設計。 スライド式スクロールイベントページの作成 HTMLの記述 <div id="contents"> <div class="item">アイテム①</div> <div class="item">アイテム②</div> <div class="item">アイテム③</div> <div class="item">アイテム④</div> </div> CS

jQueryを覚えたい!!という方で本屋さんで『すぐにわかるjQuery入門』なる参考書を買っては一週間後にはその話題はタブーになっちゃう方へちょっとした問題集を作ってみようと思います。 もう参考書を買ってわかったつもりとはさよならbyebye♪ これからjQueryやJavaScriptを覚えていきたい方など是非とも！！ 練習問題.『Hello,World』をアラート出力せよ 回答はコチラ alert("Hello,World"); jQuery問題集レベル１（メソッド関連） 特殊なロジックや記述は不要。基本的にはメソッド単品のみで処理可能レベル 問1.id名『q01』のテキストカラーを赤に変更せよ <!-- HTML --> <p id="q01">ときどきweb</p> 回答はコチラ $(function(){ $("#q01").css('color','red'); }); 問2

そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP

たとえば共有してるインクルードファイルの記述の中に特定のページにだけバナーやタグを追加したい場合、そのページだけ静的にソースを別個記述するのは更新性的にもイヤなので 特定のページに該当する条件で処理するjQueryをつくる。 1.指定のURLが一致した場合の追加処理 もしこのページにだけ追加したい処理がある場合、URLの下層ディレクトリのファイル名で指定すれば良いので <ul> <li>あああああ</li> <li>いいいいい</li> <li>うううううううう</li> </ul> という記述を共通インクルードファイルに記述していた場合に、特定の下層ページにだけ<li>を追加したいという場合に <ul> <li>あああああ</li> <li>いいいいい</li> <li>うううううううう</li> <li class="eee">えええええええ</li> </ul> と加える。 次にCS

動画コンテンツを制作するにあたってこれまでPCではFlash、スマホはMP4で設置しとけば何とかなる感がありますが、レスポンシブデザインサイトで制作する事を想定した場合、動画形式についてもブラウザ間の仕様やキャリア端末毎の問題点や把握すべき点がありそうだったので調査してみますた。 <video>タグについて webサイトにて動画コンテンツを設置する際は、HTML5で新たに追加された<video>タグを使用する。 これにより、Flash無しで動画が再生可能となる。iPhone・iPad・iPod Touchなど、Flashに対応していない端末で動画コンテンツを利用する際は、<video>タグだけが動画コンテンツに対応させられる唯一の方法となる。 <video> <source src='動画ファイル' type='video/拡張子; codecs="動画データ(MINEタイプやコーデック)

レスポンシブデザインのサイトやスマホ機種の解像度によってCSSの指定を振り分けられるmedia queryですが、クライアントによっては 「Apple製品だけきっちり見えれば良い」とか「ウチの社長のAndroidの○○だからそれでキレイに見せてよ」などなど・・・ 単純なスクリーンのサイズの指定だけでは済ませられないケースもあったりして・・・ なので主要機種用のmedia query指定のライブラリー一覧作ります。 お好みの指定をコピって下さい。 主要ディスプレイサイズ別 ディスプレイサイズ320px @media screen and (max-width: 320px) { /*スタイル記述*/ } ディスプレイサイズ640px @media screen and (max-width: 640px) { /*スタイル記述*/ } ディスプレイサイズ800px @media screen

スマホサイトなどでよくある開閉式のアコーディオンをjQueryと少しのJavaScript記述で作りたいと思います。 ベーシックな開閉アコーデイオン jQueryの設定 jQueryライブラリを使用するのでCDNの記述を忘れずに！ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> HTMLの記述 <dl> <dt class="accordion">ときどきＷＥＢ</dt> <dd> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Android</li> </ul> </dd> </dl> dl要素をアコーディオンの入れ子としアコーディオン全体のボックスを作成。 引き

年内から来年の内にタブレットの出荷台数がＰＣを超えるといわれ、いよいよサイト制作にもレスポンシブ化の必要性が日に日に大きくなってきました。 色々なサイトでレスポンシブデザインサイトの制作のポイントを紹介がありましたので、個人的に制作時に必要なポイントをまとめてみました。 レスポンシブデザインにする理由 まず、レスポンシブとは？の説明等はここでは省略しますが、レスポンシブデザインにするべき明確な意思が制作側で固まっていない事には様々な障害にブチ当たる事になります。 まぁ要するにレスポンシブ化はそんな単純な事ではない!!!・・・ってコトです。 レスポンシブデザインのメリット Googleがレスポンシブ対応を推奨している ・コンテンツが容易にインデックスされやすい ・デバイスごとのリダイレクト対応が不要 ・Googleのクローラーへの負担が軽減される ・コンバージョン、直帰率や滞在時間が大幅に改

アプリケーションを実行しているスマホの画面サイズや向きを動的に取得できれば、それに応じて表示するコンテンツを調整できますよね。 画面サイズを取得する JavaScriptで画面サイズを取得するためのプロパティが用意されています。 ウィンドウサイズを取得できる関数 screen.width document.write(screen.width); 画面の幅を取得することが出来ます。 screen.height document.write(screen.height); 画面の高さを取得することが出来ます。 画面サイズとタスクバーを除いたスクリーンサイズを取得することが出来ます。 コンテンツ領域を取得できる関数 window.innerWidth document.write(window.innerWidth); ウィンドウ内側の横幅を、取得したい場合に使用。 ※ スクロールバー領域を含

最近のタブレット市場も画面サイズがどんどん悪化・・・細分化してきやがって・・・ とも言ってられないが、正直制作サイドとしても把握しきれなくなってきたんで、ここらで目安的な一覧表を作ってみた。 全機種ではないですが国内で流通してる機種は大体集めてみました。 ※2022年9月更新・・・一覧が長くなっているのでテーブルごとにスクロールしてください スマートフォンタイプ（Apple iOS）一覧 iPhoneシリーズ 機種 発売 画面サイズ （インチ） アスペクト比 画素密度 (ppi) viewport （横×縦） 解像度 （横×縦）