サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
isket.jp
HTMLの見出しタグ（H1、H2、H3・・・）はよく使われるタグですし、見出しを付けてサイトを構成することは見やすいサイト作りの基本です。 今回はそんな見出しタグの背景に画像を表示して、リッチな見出しにする方法をご紹介します。 HTMLは常に同じ HTMLの内容は今回はH1タグで「いらっしゃいませ」を囲むだけのシンプルなものとします。変更するのはスタイルシートだけでHTMLは以下のままで、今回の表現の変更は可能です。 <h1>いらっしゃいませ</h1> スタイルシートで下線を引いてみる 一番シンプルな見出しの装飾は線を引くことです。 何もスタイルシートを書いていない場合は文字だけです。 以下のようにスタイルシートを書いてみます。 h1 { border-bottom: 1px dotted rgb(255, 182, 182); } このように点線が下線として表示されます。 今回はbord
何らかのイベント当日までのカウントダウンを表示したいという要望は結構あると思います。 今回はJavaScriptを使って目標とする日付までの日数をカウントダウンするスクリプトをご紹介します。 コード <script type="text/javascript" language="javascript">// <![CDATA[ // 今日の日付を取得 var today = new Date(); // 開催日を設定 // ※ 月は0～11までで指定 var targetDay = new Date(2014,0,1); // 1日のマイクロ秒で除算をすると // 開催日までの日数が算出できる remainDay = Math.floor((targetDay - today) / (24*60*60*1000)); // 開催前日の場合は残り0日になってしまうのを防止 remainDa
HTMLのformタグ内にcheckboxがある場合、チェックボックスのチェックを付けている場合はnameとvalueを送信することができるのですが、チェックを付けていない場合はnameすら送られてこないので何も無いという状態になります。 チェックを付けた場合は1を送って、付けてない場合は0を送るという処理であれば、受け側でも処理がしやすいですよね。 今回はcheckboxのチェックを付けていなくてもパラメータを送る方法を紹介します。 同じname属性だと後から書かれたものが有効になる 方法は簡単です。 HTMLでは同じname属性は後から書かれているものが最終的には採用されることを利用します。（※ちなみにid属性はダメです。id属性はページ内でユニークでなければなりません。name属性はユニークであることを求められていないので今回の手法が利用できるわけです。） 以下のように実際のchec
WordPressのお問い合わせフォームといえば、Contact Form7です。 今回はContact Form7を共有SSLに対応する方法をご紹介します。 ※共有SSLが安全かどうかの議論は置いといて・・・とりあえず対応する方法ということで。 プラグイン WordPress HTTPSを使えば簡単に対応可能 WordPressには豊富なプラグインがあるので使わない手はありません。今回、使わせて頂くプラグインは「WordPress HTTPS」です。 さっそくインストールしてしまいます。 プラグインの追加画面で「WordPess HTTPS」と入力して検索すると、上記画面が表示されますので、いますぐインストールをクリックしてプラグインをインストールしてください。 その後、プラグインの有効化を忘れずに！ インストールが完了すると、ダッシュボードにHTTPSというメニューが追加されますので、
SQLのソート方法というと、カラム名を指定してASCかDESCのいずれかでソートするのが一般的ですが、CASE文を使って任意の文字列の順番でソートすることができます。 例えば、テーブル名がtable_fruit、カラム名がnameというテーブルがあり、nameにはもも、りんご、いちごという名前が入っていたとします。 通常、nameをASCでソートすると、いちご→もも→りんごの順になりますが、case文を使ってソートすると、任意の順番でソートすることができます。 もも→りんご→いちごの順でソートするには以下のように書きます。 SELECT * from table_fruit ORDER BY CASE name WHEN "もも" THEN 1 WHEN "りんご" THEN 2 WHEN "いちご" THEN 3 ELSE 0 END CASEはいろいろと利用すると便利なSQL文が書ける
データを表などを使って表示すると縦に長いページになってしまったりすることがあります。データを下にスクロールしながら閲覧している時に、先頭に戻りたい場合はパソコンのブラウザであれば、スクロールバーを移動させることで高速に移動することもできますが、スマホ、タブレットの場合は指でフリックを何度もしなければならず、相当面倒なことになってしまいます。 このような問題を解決する1つの方法として、右下に「先頭に戻る」ボタンを常に表示しておくという方法が考えられます。今回は「先頭に戻る」ボタンを常に表示しておく方法をご紹介します。 まずはHTMLです。「先頭に戻る」ボタンを押した時の戻り先をdivタグで作っておきます。bodyタグのすぐ下で良いでしょう。さらに「先頭に戻る」ボタンをbodyタグを閉じる前に入れておきます。スタイルシートでデザインするので、class名を入れてあります。 <! DOCTYPE
1次元の連想配列を検索する場合は、array_search()関数を使って値を検索し、その値を持つキーを返してくれます。 このように使います。 // 検索対象の連想配列 $dataArray = array('apple'=>'赤','banana'=>'黄','chocolate'=>'茶'); // 「黄」を検索 // キーの名前はbananaです。と表示されます。 $ret = array_search('黄', $dataArray); if ($ret != false) { echo 'キーの名前は'.$ret.'です。'; } else { echo 'キーは見つかりませんでした。'; } 2次元の連想配列の場合は？ ではは2次元の場合はどうやって検索すればいいのか？という内容です。関数で簡単というのは残念ながらありません。地道にやることになります。 連想配列なので、fore
JavaScriptで子ウインドウから親ウインドウの関数を呼び出して、内容を通知する方法をご紹介します。 まずは子ウインドウをオープンするためのHTMLです。名前はmain.htmlとでもします。 onClickイベントでJavaScriptの関数を呼び出すように書いています。 <html> <head> <script type="text/javascript" src="form.js"></script> </head> <body> <input type="button" id="parent_button" value="子ウインドウを開く" onClick="openChildWindow()"> </body> </html> さらに子ウインドウに表示するchild.htmlはこちら。TESTという文字列を親ウインドウに送ります。 ポイントはopenerという変数です。子
以前、PHPで応答をJSON形式で返す方法をご紹介しました。今回は、JSON(ジェイソン、JavaScript Object Notation)を受信した時にPHPでオブジェクト毎にパース(解析)して、連想配列に格納する方法をご紹介します。 次のようなJSON形式のデータを受信したとします。今回はこの内容をresponse.jsonというファイルを作って、ファイルの内容を以下のようにしておきます。 response.json { "name":"アイスケット", "address":"神奈川県", "work":{ "program":"PHP", "design":"CSS", "database":"MySQL" } } 次にPHPですが、先ほどのresponse.jsonと同じフォルダにPHPファイルを作ってください。 <?php // ファイルからJSONを読み込み $json =
PHPで日付や時間が現在と比較して、未来なのか過去なのかを判定して処理を行うといったことがあると思います。 そのような場合にはstrtotime関数を利用すると、簡単に日付や時間で比較を行うことができます。 例えば、指定した日付が未来なのか、過去なのかを判定するなら以下のようになります。 // 今日の日付を取得 $dt = new DateTime(); $dt->setTimeZone(new DateTimeZone('Asia/Tokyo')); $today = $dt->format('Y-m-d'); // 比較する日付を設定 $target_day = '2013-05-21'; // 日付を比較 if (strtotime($target_day) > strtotime($today)) { echo '指定した日付は未来です。'; } elseif(strtotime(
AWS(Amazon Web Services)関連の第4弾の投稿です。 [過去記事] Amazon SESでメール配信を行う [PHP]AWS SDK for PHPを使ってAmazon SESでメールを送る方法 メール配信システムに欠かせないバウンスメールの扱い方 今回はAmazon SESで通知したメールがバウンスメール(相手に何らかの不具合でメールが届けられなかったメールのこと)だった場合に、その通知をAmazon SNSを利用して送信者側に通知する方法をご紹介します。 まずは、SESで承認済みのメールアドレスの左側のチェックボックスを選択すると、下部のFeedback DetailsのEdit Configurationが設定できるようになります。下の画面だと、Bounces SNS Notification、Conplaints SNS Notificationはnoneになっ
サイトに画像を表示した時に、画像サイズが大きかったりするとウインドウからはみ出て表示されてしまいます。 最近流行りのレスポンシブデザイン(1つのサイトが大きな画面でも小さな画面でもキレイに配置されるのでスマホ用に作りなおさなくても良いデザイン)でも、ウインドウ幅に合わせて画像が拡大縮小する手法はよく用いられています。 今回は画像をウインドウ幅に合わせて拡大、縮小する方法をご紹介します。 通常のimgタグで画像を貼り付けた場合 ウインドウ幅が十分ある場合は画像は全て表示されています。 ウインドウ幅を狭くすると、画像がはみ出てしまっています。 スタイルシートにたった2行書くだけで解決 この画像がはみ出てしまうのを解決するためにはスタイルシートを使います。 スタイルシートに以下のように追加してください。これで縦横比を保持したまま、画像がウインドウ幅に合わせて自動的に拡大縮小します。拡大に関しては
WordPressでテンプレート毎にヘッダを変えて表示したい場合があると思います。 今回は複数のヘッダを用意しておいて、テンプレート毎に切り替えて利用する方法を紹介します。 ヘッダの表示はget_header関数 WordPressでヘッダを表示するために呼ばれているのはget_header関数です。 get_header関数は引数の有無で表示するヘッダを変更することができる仕組みになっています。引数を指定すると、指定した引数名と一致するヘッダを読みこませることができます。 // 引数が何もない状態で実行すると、header.phpを表示 <?php get_header(); ?> // ダブルクオーテーションで区切ると、header-2013.phpを表示 <?php get_header("2013"); ?> 仕組みはフッタも同じ フッタの場合もヘッダと同様に複数のフッタから表示す
前回の記事、「Amazon SESでメール配信を行う」では、Amazon SESのコントロールパネル上からメールを送信する方法をご紹介しました。今回は自社のWebシステムなどの外部からAmazon SESを利用してメールを送信する方法をご紹介したいと思います。 AWS SDK for PHPをダウンロードする SESを利用する場合、ゼロから作る必要はありません。SDK(Software Development Kit)といって、簡単にAWS(SESはAWSが提供するサービスの1つ)を使えるようにするためのツールがAmazonから提供されているので、それをダウンロードして利用します。(ダウンロードはこちらから） 少し気をつけることがあります。上記のリンクに行くと、AWS SDK for PHP2という新しいバージョンもあるのですが、2013年6月10日の時点では、最新版にはまだSESを利用す
Amazon SESを利用してメールを送る方法などを過去2回に渡ってご紹介してきました。 [過去記事] Amazon SESでメール配信を行う [PHP]AWS SDK for PHPを使ってAmazon SESでメールを送る方法 今回はメール配信システムを実装する上で重要な要素の1つであるバウンスメール(配信エラーとなったメールのこと)の通知をAmazon SNS(Simple Notification Service)を利用してメールで通知する方法をご紹介したいと思います。長くなるので分けて投稿します。今回はバウンスメールについてです。次回はメールで受信する方法(6/17追記)をご紹介します。 バウンスメールとは まずはバウンスメールの扱いの重要性について説明しておきたいと思います。バウンスメールは送信しようとしたけど、何らかの原因(宛先不明、相手側のメールサーバのダウンなど)により、
メールマガジンなどを運営する場合、たくさんのメールアドレス宛てにメールを送信しなければなりません。スクリプトを用意してリストにある宛先に順番に送ることを考えた場合、注意しなければならないことがあります。それはレンタルサーバのメール送信数の制限です。 レンタルサーバでメールマガジン配信は難しい メールマガジンを配信する場合、できるだけコストを下げたいと考え、フリーソフトのメール配信スクリプトなどを用いて、レンタルサーバで運用することを検討すると思います。その場合、配信数が数百件程度(～200件くらいまで)で、1日1通を送信するくらいであれば対応することは可能です。しかしながら、数千、数万の宛先に配信する場合はレンタルサーバのメール送信数制限により配信することができなくなってしまいます。レンタルサーバは1台のサーバを利用者で共有しているため、大量にメールを送信することによって負荷が上昇するのを
PHPで配列に要素を追加する場合、array_push()を使えばいいので連想配列も同じでいいだろうと思って以下のようにコードを組んでみたところ、syntax errorで怒られてしまいました。。。(文法違反なので、当たり前ですよね。) $hoge = array(); array_push($hoge，'hoge'=>'value'); この方法では追加できないようなので、別の方法を検討したところ、以下のようにすれば追加できました。 $hoge = array(); $hoge += array('hoge1'=>'value1'); $hoge += array('hoge2'=>'value2'); var_dump($hoge); のように書くと、結果は次のようになります。 array(2) { [hoge1]=string(6) value1 [hoge2]= string(6)
前回の記事「大量のメール配信を行う場合に気を付けること」でAmazon SESを使ってメールを送信する方法があるということを紹介しました。今回は、実際の使い方をご紹介したいと思います。 まず、Amazon Web Servicesのアカウントを作成します。アカウント作成は無料です。アカウント作成はこちらから。アカウント作成の流れはAmazonのサイトに詳細が書いてくれてますので、ここでは省略します。 アカウントが出来たらさっそくAmason SESの設定を行うことにします。作成したアカウントでログインしてください。右上の「アカウント/コンソール」から「AWS Management Console」を選択してください。 すると、AWSのサービス一覧が表示されますので、その中からSESを選択してください。 SESを選択すると、Amazon SESのコントロールパネルが表示されます。初めてAma
このページを最初にブックマークしてみませんか？
『アイスケット | 神奈川県相模原市ホームページ制作、SEO対策、運用なら』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
