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

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

レンタルしていたサーバー屋が廃業するということで、サイトのお引越しをせざるを得なくなってしまった。 ポータルサイトの引越しの際、ユーザーが管理画面からアップロードしたデータを新しいサーバーに移動した際に、パーミッションが初期状態になってしまった。パーミッションを変更しなければ、管理画面から変更ができなくなってしまう。 ディレクトリは【755】から【777】へ ログファイルは【644】から【666】へ変更しなくてはいけない。 普通ならFTPソフトで変更すれば終わりの話なのだが、ディレクトリが1000ファイル以上あり、各ディレクトリには無数の画像ファイルが存在し、FTPでの手作...続きを見る

画像ファイルがあるかないかを判断して、必要に応じてノーイメージ(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...続きを見る

管理画面で時間のかかる処理（例えば画像や動画などをアップロードする際）をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹介しよう。 まずは、jQuery本体とcssを読み込む。#loadingは画面いっぱいにちょっと暗くするための箱。 htmlStart htmlEnd ...続きを見る

ドラッグ＆ドロップで並び替える機能はほんの数行で実現できる。まずはjqueryとjquery-uiを下記にアクセスしてダウンロードする。jqueryは自サーバに置いたほうが読み速度が早いから直リンクはオススメしない。 htmlStart http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js http://code.jquery.com/ui/1.10.2/jquery-ui.js htmlEnd 次は、下記のようにjqueryを読み込んで、一行コードを書いてやります。#sortにドラッグ＆ドロップソートを適応さ...続きを見る

さくらインターネットの共有サーバーではhtaccessのルールが特殊で、結構悩まされる。安いサーバーに難があるのは仕方がないけど…。 既に拡張子が「html」で作成されたサイトで、後からSSIやPHPを使いたいという状況。これWEBの仕事してるとそこそこ出てくるよね？ URLを変えるのはSEO的にイヤだということで、拡張子はhtmlのままSSIやPHPを使用したいという時は、htaccessにちょいと書いてやるだけで実現します。 htmlStart ▼phpの場合 AddType application/x-httpd-php .htm .html ▼SSIの場合 Add...続きを見る

年々進化続けるパソコンなどのメカニックな技術。 しかし、それ必要か？それ面白いか？と思ってしまうどうでもいい進化が多すぎではないだろうか？ まず、ゲーム機の３ＤＳ。３Ｄモードを切ってプレイする人がやたら多いとか…。アバター以来３Ｄ画面の話題はさっぱり。全然需要がない技術のようである。ゲームはスーファミやゲームボーイのように２Ｄの時が一番面白かったような気がする…。 エクセル2010なんかは特にひどい使いにくさ。エクセルは2003で完成しちゃってるからそれ以降は余計な機能しか追加されてない。そんな余計な機能は必要ナッシング！ アイコンを増やして、直感的に分かりやすくしている工...続きを見る

divの中全体をリンクにしたい場合は下記のコードがおすすめ。リンクにしたいタグにクラス指定をすれば、そのタグ内にあるリンクのリンク範囲をボックス全体にしてくれます。 ＜javascript＞ htmlStart $(".boxlink").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); htmlEnd HTMLは下記のような感じで使用する。親ボックスは特にdivじゃないとダメということはない。block要素であればなんでもOK。 ＜HTML＞ ...続きを見る

引数とは…戻り値とは…と言葉で書いてもパッとしなさそうなので、半角のカタカナを全角のカタカナに変換する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コードは携帯やスマホで読み取られるの...続きを見る