最短を目指すWEB制作者の技術ログ
HTML･CSS･PHP･jquery＆将棋

WEBやDTP専門の会社ではないけど、自社のビジネスをネットに力を入れて集客していきたい。 そんな会社は多いかと思います。 できれば、商品のサイトや広告媒体の制作を全て自社内部で済ませたいというのは、自然な発想です。 何故ならデザイン制作会社に依頼をすると非常にコストがかかるからです。 じゃあ、デザイナーの求人を出して、採用をしようってなるんですが、 何を基準にデザイナーを選べばいいのか？いくらの年収にすれば腕のいいデザイナーが来やすいのか？ 技術者ではない経営者がそこを見極めるのは、意外と難があります。 よくわからなくて、なんとなくでポンコツな技術者を採用してし...続きを見る

DVDfabでDVD（及びブルーレイ）をMP4にする方法を紹介したいと思います。MP4にしてしまえば、youtubeにアップできるのでどこでも見れるようになるので便利。 今回の例は「海外ドラマで２話が入っている」ケースでの設定で字幕もMP4の映像に入れ込むようにしている。 まず、「リッピング」のメニューをクリックし、チェックボックスでMP4に変換したいところ選択。ドラマなので、同じオープニングが毎回しつこくなってしまうので、チャプターを2-7にしてますが、通常は変更する必要はありません。 次はエンコードの種類を選択。2014年の現在は「MP4」、「WMV」が主流で、今...続きを見る

2013年9月にロリポップサーバーで、なんと8,438件ものサイトがハッキングされ、サイトが改ざんされた様子。前に、GMOクラウドのサーバーからもワードプレスのハッキングについてのメールが届いていた。ワードプレスは利用者が多いので、信頼してしまいがちだが、利用者が多ければ多いほど強者のハッカーに狙われてしまう。だからもうワードプレスは使用しない方が得策だろう。 サイトの改ざんだけで済めばいいが、データベースを初期化されたりしたらもうおしまい。ワードプレスに依存している会社は倒産するかもしれない。そんな会社は急いでワードプレスを普通のHTMLに戻さないといけない。かなり面倒臭いけどね。ワー...続きを見る

インターネットとブラウザは切っても切れない関係。 果たして、あなたが使っているブラウザは本当に自分に合っているブラウザなのか？ 「IE」「google chrome(以下、クローム)」「firefox（以下、狐）」「safari」 ブラウザのシェア率は、この辺が高いというのは知っている。 が、個人的には日本人が開発している「sleipnir(スレイプニル)」（以下、プニル）がイチオシである。 国産のわりには読みづらい名前で浸透性がなく、シェア率は0.2％ほどの超絶マニアックブラウザ。 しかし、慣れてしまうと他のブラウザにはもう移行できない感が一番強いのはプニルではないかと思...続きを見る

画像ファイルがあるかないかを判断して、必要に応じてノーイメージ(now printing)を表示する時などに使用するファイル存在確認の代表的関数file_exists()。 phpStart $path = './log/item/12345.jpg'; if(file_exists($path)){ $img = $path; }else{ $img = '/img/noimage.jpg'; } phpEnd しかし、自サーバーならfile_exists関数でファイルがあるかないかを判断できるが、他ドメイン＆他サーバーでは使用できないので、その場合はget_hea...続きを見る

更新 2018-11-26 この記事に関する最新記事は「ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)」になります。 管理画面で時間のかかる処理（例えば画像や動画などをアップロードする際）をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹...続きを見る

引数とは…戻り値とは…と言葉で書いてもパッとしなさそうなので、半角のカタカナを全角のカタカナに変換するmb_convert_kana関数を例として見てみよう。 phpStart $zenkaku = mb_convert_kana($hankaku, "KV"); //$hankaku が第一引数 //KV が第二引数 //$zenkaku が戻り値 phpEnd これで用語の意味は分かるかと思います。自分で関数を作る（ユーザー定義関数）時はこの引数と戻り値のことを理解しておかないと便利なものは作れない。 個人的にフレームワークの使い方を覚えるのが面倒なので、自作関数の...続きを見る

Google Chart APIを利用すればたった一行でQRコードが作れます。 htmlStart http://chart.apis.google.com/chart?chs=《サイズ》&cht=qr&chl=《URLやメールアドレスなど》 htmlEnd 画像タグに上記のコードを記載するだけ。 htmlStart htmlEnd パラメータの「chl」には日本語を使うこともできます。mailtoタグと同様で日本語を使う場合は文字化けの対処をしないといけないので、文字コードをパラメータの「choe」で指定しないといけない。 QRコードは携帯やスマホで読み取られるの...続きを見る

フォームやカートなどで重宝するcookie(クッキー)の操作を簡単にする定義関数。クッキーを配列で使用することでシンプルな組み方が実現されてます。この関数があればクッキー操作が格段にラクになるのでオススメです。 phpStart define(_TIME_OUT_,time() + 30 * 86400); //一ヶ月保持 function makeCookie($array,$cookie_name) { foreach ($array as $text => $value) { setcookie($cookie_name."[$text]",$value,_TIME_...続きを見る

文字列の一部分を取り出すsubstr関数は使用するシーンが多いです。長い文章の最初だけを表示する時や、URLから一部分を切り出す時などなど。 ＜substr()関数 - 最後の２文字を取り出す＞ phpStart $str = 'http://sample.jp/cate.php?id=06'; echo substr($str, -2); //結果「06」が出力されます。 phpEnd 第２引数にマイナス値を入れれば最後からの文字が取得できます。先頭から２文字を取得する場合は正数を書けばOK。文字列が日本語の場合はmb_substr()を使用しないとバグが起きます。 ...続きを見る

デザインで重要な要素は「素材の選定」「色使い」「レイアウト」の３つ。これが全てうまくいけば違和感のない美しいデザインに仕上がります。 ３つの要素ともにどれも重要で、一つ欠ければダサいものになってしまいます。またほんの少し間違うだけでもダサくなってしまうことがあるので、デザインは本当に繊細なものです。美しいデザインは感覚で作られたものではなく、全てデザイナーの計算の上に成り立っているのです。 素材の選定は最初の方に行う工程で、これによってデザインのイメージが確定します。「広告は素材ありき」なので、いい素材がないといいものができません。素材収集→素材選定の工程だけで数日かかってしま...続きを見る

プロフィールを登録させる際に年齢の項目を設ける場合は、年齢を入力させるのではなく、生年月日を入力してもらうのが基本です。年齢を入力させてしまうと、データ上その人はずーっと同じ年齢のままになってしまうからです。 生年月日から年齢を求めるの方法はいくつかあるみたいですが、一番短いのが以下の計算方式です。 ＜計算方式＞ phpStart $birth = 19811007; $age = floor((date('Ymd') - $birth) / 10000); phpEnd 計算方式は「(今日の日付 - 生年月日) ÷ 10000」で求められるみたいです。floor()...続きを見る

画像をダウンロードして、フォトショップで切り抜き加工をして使ってください。CSSの宣言方法も記載しておきます。 ＜HTML＞ htmlStart サンプル１ サンプル２ htmlEnd ＜CSS＞ htmlStart ul.listMark li{ background:url(/img/list.gif) 0 2px no-repeat; padding-left:15px; } htmlEnd 背景ポジション(0 2px)←この部分はline-heightの設定値により数値の調節が必要になります。ポジションの数値はマイナスの値も使えます。 ...続きを見る

＜サンプル＞ ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。 ＜CSS＞ htmlStart .cf:after{ content: "."; display:block; clear:both; he...続きを見る