スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

処理進捗やLoading状態を表現するプログレスバーですが、今回はBootstrapのプログレスバーの長さをjQueryでアニメーション制御します。

こちらがBootstrapのデフォルトのプログレスバーです。

30% Complete
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
    <span class="sr-only">30% Complete</span>
  </div>
</div>

このバーの長さを制御するためには、単純にwidthの値をJavaScriptで変更するだけで良いです。
BootstrapでデフォルトのTransitionプロパティが指定されているので、CSS3が有効なブラウザ上でwidthの指定だけでアニメーション効果が得られます。

WordPressでアイキャッチ画像や投稿中の画像など、メディアが保存されるディレクトリを変更する方法です。

デフォルトでは「(WordPressの設置場所)/wp-content/uploads」に保存されますが、セキュリティの面からインストール先を隠蔽するなど、運用の都合上、ディレクトリを変更したい場合があります。

そのような場合、まずは管理画面にログインした状態で以下のURLにアクセスします。

http://cms.helog.jp/wp-admin/options.php

するとWordPressの細かい設定項目の一覧が表示されます。

WordPressのセキュリティチェック項目一覧です。

最近WordPressを使った要件がますます増えてきたのですが、そんな中でセキュリティチェックはルーチンワークとなっています。

オープンソースとして、活用事例も格段に多いWordPressですが、それに伴い攻撃の対象となりやすいのも事実です。ここで今一度、そのセキュリティの精度を確保するために、チェック項目一覧としてまとめてみます。

インストール編

WordPressインストール時に気をつけたいセキュリティチェック項目の一覧です。

WordPressインストールディレクトリの変更 WordPress本体のインストールディレクトリはルートにせずに、任意のディレクトリに設置しましょう。また、ディレクトリ名は「wordpress」や「wp」などとせずに、連想されないディレクトリ名にしましょう。
テーブルプレフィックスをデフォルトから変更する インストール時、デフォルトで生成されるDB内のテーブル名プレフィックスは「wp_」です。データベースを攻撃の対象とされた場合の対策として別のプレフィックスに変更しましょう。
SSL通信を適用する ログイン画面、管理画面にはSSLを適用して、通信を暗号化しましょう。
ユーザ名を「admin」などとしない 不正ログインを防ぐため、ユーザ名を「root」や「kanri」などにしない。特に、以前のバージョンでデフォルト管理ユーザ名である「admin」にはしない。

ソフトバンクでiPhoneを利用し始めてから約1年半が経ちました。
いわゆる「2年縛り」で、違約金が発生せずに乗り換えられる期間が近づいてきたので、最近話題の格安スマホへの乗り換えを検討してみます。

現状のソフトバンクの満足度

現在、使用しているソフトバンクのiPhone5cですが、個人的には特に不満なく利用しています。

  • 生活範囲内で電波圏外になることはなし
  • 速度にも不満なし
  • 生活範囲内にWi-Fi環境が整っているのもありパケット制限に達することもない

唯一の不満といえば、利用料金が高いと感じること。
速度、容量も十分ということから、オーバースペックに割高感というのは否めないのですが、恐らくその辺りはauにしてもdocomoにしても同じこと。

そこで格安スマホはどうだろうか?と思い少し調べてみました。

あるCMSをWordPressに移行するという事で、既存データを流し込みたいという依頼がありました。
そこで、関数wp_insert_postを使って投稿を一気に流し込む方法を考えてみます。

はじめは、それぞれのCMSでDB上のデータ構造が異なるので、詳細を把握した上で、PHPでDBからDBへのデータ移行プログラムを書くという、かなりリスクのある方法を検討していました。
しかし、WordPressのDBを直接操作することは、後に整合性がとれなくなるなど危険があります。

調べてみると、WordPressでは管理画面のインタフェースから記事を投稿する以外に、関数wp_insert_postを使ってプログラム上から整合性のとれた投稿が可能なことを知ったので、これを利用することにしました。

今回はFlickr APIを使って画像を取得してみます。

The App Garden on Flickr

写真投稿SNSとして有名なFlickrですが、先日、パブリックドメインに対応したということで話題になりました。

これまで、Flickrに投稿された画像について、各レベルの著作権が設定可能であったため、
どのようにしたら流用できるのか、著作権違反にならないのか、さまざまな場所で議論されてきました。

しかし、今回、著作者がその権利を完全に放棄するパブリックドメイン(CC0)を設定できるようになったことで、
APIから画像や動画を利用しやすくなりました。

FuelPHPのAuthパッケージで会員管理やログイン画面などの作成に便利な認証機能を使ってみました。

今回はAuthパッケージの中でも基本的なドライバセット「Simpleauth」を利用してみます。

なお、今回の確認環境は以下の通りです。

  • PHP 5.4
  • FuelPHP 1.7

※FuelPHPはDB接続設定済みとします

JavaScriptなどのプラグインを使用せず、CSSのみでフォームのラジオボタンやチェックボックスを画像で装飾する方法です。
さまざまな方法があると思いますが、1つの方法としてご参考いただければと思います。

まず、例えば以下のような未選択状態と選択状態のものを並べた装飾画像を1つ用意します。

今回は横幅15px、縦幅15pxの画像を縦に並べたもので装飾してみます。

次にHTMLの用意です。

<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン1</label>
<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン2</label>
<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン3</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス1</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス2</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス3</label>

FuelPHPのOilコマンドを使ったソース生成がものすごく便利です。

コマンドラインからOilコマンドを実行するだけで、Model、ViewやControllerクラスを自動生成してくれます。
また、Model生成時には、DBに定義したテーブルをcreateしてくれたり、cronジョブを実行してくれたりと、MVCフレームワーク特有のめんどくさい準備作業を自動化してくれます。

以下、今回確認した環境です。

  • Windows 7
  • xampp 1.8.2
  • FuelPHP 1.7.2

軽量で柔軟性に優れいていると話題のFuelPHPをWindows環境にインストールしてみます。

FuelPHP » A simple, flexible, community driven PHP5.3 framework.

今回検証した環境は以下の通りです。

  • FuelPHP 1.7.2
  • PHP 5.4.19
  • xampp 1.8.2
  • Windows 7

PHPはxamppのものを使います。
FuelPHPはPHP 5.3以上で動作するという事なので、要件は満たしています。

Monthly Archives