構想雑文

DREAMWEAVER、FLASH、JavaScriptなど WEBデザインとMacに関すること中心の、自分向けメモ主体のブログです。

さくらインターネットでhttp→httpsになる設定について

さくらインターネットで借りているサーバーでhttpsで常時接続になるように設定しました。
公式のよくある質問には下記のような記事があります。
wwwのありなしでサイト名を統一する方法の.htaccessの書き方はあるものの、httpで始まるURIをhttpsにリダイレクトするやり方が書いてません。
さくらインターネットのサーバーで、よくある下記のようなリダイレクトの記述を書いても、.htm、画像ファイルはうまくリダイレクトできるものの、一部のファイルがリダイレクトできませんでした。
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://www.hoge.com/$1 [R=301,L]

検索するとWordpressで導入するための下記のブログの記事のまとめが参考になりました。
この記事によれば、さくらインターネットのhttpsの判定は、"X-Sakura-Forwarded-For"という文字列を使うとのこと。
RewriteEngine on
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://www.hoge.com/$1 [R=301,L]
この他に、事前にサイトにfavicon.icoを用意してないと常にfavicon.iconについて、404 Not Foundエラーを吐き出すようなので、favicon.icoを作ったうえで、.htaccessに下記の記述もあったほうがいいようです。
AddType image/xicon .ico
<Files favicon.ico>
ErrorDocument 404 /favicon.ico
</Files>

ちなみに、
さくらインターネットでhttp → httpsはできるんですけど、wwwなしからwwwありにするための設定を組み合わせをつくろうとすると、無限ループでうまく表示できなくなるようで、いまいちよい解決策が見つかりませんでした。

もうちょっとやり方をみつけなければ...




ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

Bracketsで終了タグが自動で追加されるのを無効にする

Adobeのコードエディター「Brackets」はDreamweaverに比べると、起動も早いので、ちょっとした修正やHTML入門者にはお薦めのソフトだと思っています。

Brackets
http://brackets.io/

でも個人的に不満なのは、初期設定では、開始タグの入力を終えると自動的に終了タグが追加されてしまうこと。

49
 
図のようにタグを先にコーディングするときは特に問題を感じないんですが、先に文章を入力してからだと終了タグが自動で追加されるのは、ちょっとイライラすることがあります。

Bracketsには一応[デバッグ]>[環境設定ファイルを開く]で環境設定が表示されますが、困ったことにパネルではなく、JSON形式のファイルを直接編集するカタチです。

 001

しかも、左右二分割で表示されるので、どっちを修正すればいいのか、戸惑ってしまいます。
よく見ると画面の左側に表示されたファイルは読み取り専用のファイルです。

002

画面左に表示されたファイルを参考に、画面右側のファイルを編集していきます。
実は左側の環境設定の読み取り専用ファイルに記述があって、右側の実際の環境設定のファイルには項目がないものがあります。

開始タグを入力終えたら、自動的に終了タグを追加する設定もその一つです。
「左側の環境設定の読み取り専用ファイル」にある下記の場所を見つけます。
だいたい44行目ぐらいから記述されています。

003

これをそのまま、右側の先頭に貼付けます。
44

右側に貼付けたあと、「"whenOpening": true」を「"whenOpening": false」に変更します。 

これで保存して、 [デバッグ]>[機能拡張付きでリロード]を選択すれば、適用されるのですが、
そのままだと下記のエラーが表示されます。

48


このエラーが出ないように、元のファイルに記述してあったコメント部分を削除します。

42

このように記述して [デバッグ]>[機能拡張付きでリロード]を選択すれば、変更環境です。

あとは、開始タグを閉じても、終了タグがでないようになります。

これで、事前にテキストがあってもお気楽にコーディングができる!





ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

 

PHPのタイムゾーンの設定について

以前から契約しているレンタルサーバのPHPのバージョンを5.6に変更したら、あるプログラムで、以下のようなエラーが表示されました。

Warning: strftime() [function.strftime]:It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function.

なんのこっちゃ? と思って調べてみると、date()などの時間を取得する命令でPHPでデフォルトのタイムゾーンの設定がないと、こういうエラーが出るとのこと。

プログラム内に以下の命令を追記すれば解決するそうだとわかりました。

date_default_timezone_set('Asia/Tokyo');

今回はこの命令を書いて問題解決しました。
PHP.iniが変更できるなら、以下の命令を追加すれば、エラーがでなくなるとのこと。

date.timezone = Asia/Tokyo


困ったら、PHP.iniいじれば大丈夫だということか。
PHPマニュアルのサイトにはPHP.iniで設定できることがたくさんあるのは、わかったけど、何ができるかよくわからん...


色々なサイトや人から教えてもらって、把握するのが良さそうです。


ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ 

jQuery、$(セレクタ).each()を使って、複数のチェックボックスをまとめて選択もしくは解除する機能をつくる

ページ内に、いくつかのチェックボックスがあって、それをまとめてチェックさせたり、外したりする機能を実装します。
HTMLコーディングは以下のようなものです。

<p><a  class="setbtn chkon" href="#">全部を選択する</a><br />
<a  class="setbtn chkoff" href="#">全部の選択を解除する</a></p>

<table  border="1">
<tbody><tr>
<td><span><input  value="2015-05-01-1" name="set1_1" class="set1" type="checkbox">1日 午前</span></td>
<td><span><input  value="2015-05-01-2" name="set2_1" class="set2" type="checkbox">1日 午後</span></td>
<td><span><input  value="2015-05-01-3" name="set3_1" class="set3" type="checkbox">1日 深夜</span></td>
</tr>
<tr>
<td><span><input  value="2015-05-02-1" name="set1_2" class="set1" type="checkbox">2日 午前</span></td>
<td><span><input  value="2015-05-02-2" name="set2_2" class="set2" type="checkbox">2日 午後</span></td>
<td><span><input  value="2015-05-02-3" name="set3_2" class="set3" type="checkbox">2日 深夜</span></td>
</tr>
<tr>
<td><span><input  value="2015-05-03-1" name="set1_3" class="set1" type="checkbox">3日 午前</span></td>
<td><span><input  value="2015-05-03-2" name="set2_3" class="set2" type="checkbox">3日 午後</span></td>
<td><span><input  value="2015-05-03-3" name="set3_3" class="set3" type="checkbox">3日 深夜</span></td>
</tr>
<tr>
<td><span><input  value="2015-05-04-1" name="set1_4" class="set1" type="checkbox">4日 午前</span></td>
<td><span><input  value="2015-05-04-2" name="set2_4" class="set2" type="checkbox">4日 午後</span></td>
<td><span><input  value="2015-05-04-3" name="set3_4" class="set3" type="checkbox">4日 深夜</span></td>
</tr>
</tbody></table>
  

実際表示すると以下のような感じの表示にします。

59)


そもそも こんな表示のページを作ることあるかよ! とか、checkboxにまとめてチェックいれることあるかよ! って言われそうですが(汗

ま、jQueryで簡単にできるのでやってみよう、という感じです。

チェックボックスの<input>の属性はcheckboxなので、それがわかれば、$(セレクタ).each()を使ってまとめて処理します。

jQueryの$(セレクタ).each()は、条件に一致したすべてに、命令を実行します。

ということで、先のHTMLソースコードのページに表示された「すべてのチェックボックスに一気にチェックをいれる」場合、jQueryは以下の処理になります。

$('.chkon').click(function(e){
e.preventDefault();
$("input[type=checkbox]").each(function(index){
var setval = $(this).val();
$(this).val([setval]);
});
});
    


ちなみに、チェックを一気にはずす場合のjQueryは以下

$('.chkoff').click(function(e){
e.preventDefault();
$("input[type=checkbox]").each(function(index){
$(this).val([]);
});
});

以上、2つのjQueryのコーディングを組み込んだのが下記のページです。参考にご確認ください。

完成したサンプルページの動作を見る


ちなみに<input>がチェックボックス、ラジオボタンのときに、属性checkedをjQueryで設定する方法には次の書き方があります。


○チェックをいれるとき

$(セレクタ).attr("checked", true )
$(セレクタ).val([value属性の値])

○チェックを外すとき

$(セレクタ).attr("checked", false)
$(セレクタ).val([])

※なお、ラジオボタンの場合、nameの設定次第では、全選択にならないこともあるので注意。

今回は、今回、checkedを入れるのに、$(セレクタ).val([value属性の値]) を使いました。

全部、チェック入れるのは、こんな感じでお気楽にできるんでいいんですが、表の中の1列だけとか、1行だけにチェックをいれる、はずしたりする場合はちょっと面倒なスクリプトを書くことになります。

やり方としては、checkboxにclass属性を設定していけばいいだけなんですが。

 

ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

MacOSX 10.6.7でGitを使う

今さらいれたの? って言われそうですが。

ふだんよく使うMacのバージョンがまだOSX10.6.8 Snowleopardのままなんですが、てっきりOS X10.7以降じゃないと、GitをGUIで扱うソフトがないから使わない、と諦めていたら、OS X 10.6.8(SnowLeopard)にも、GitをGUIで扱えるソフトがあると聞いたので、早速設定してみました。

私が導入した目的はPHPやJavaScript等のスクリプトのファイルの修正前の状態を残すこと、納品時点のファイルから修正した差分を管理するためです。

Subversionでもいいんだけど、SubversionはGUIのソフトが使いにくいんですよね...
以前、Subversionを設定しているので、下記にやり方をまとめている。


ということで、まずMacOSXにGitをインストールします。

まずGitをダウンロード。Git本体は以下のサイトからダウンロードする。

Git


使っているMacOSXのバージョンが新しければ、トップページの「Download for Mac」をクリックしてダウンロードできるバージョンをそのまま使えば問題ないはずだが、
私が使っているSnowLeopardとか古いバージョンのOSの場合、以下から、OSに合ったバージョンをダウンロードする。
2015年2月現在ダウンロードできるのは、SnowLeopard向けのものと、Marvericks向けのもの。

git-osx-installer

git-osx-installerをダウンロードすると、インストーラーでインストールできる。
インストールが終わったら、一応、「ターミナル」を起動して、Gitが無事にインストールされているか、以下のコマンドを入力して確認する。

> git --version

これでインストールされているバージョンが表示されれば、問題なく無事にGitがMacにインストールされたことになる。

Gitのインストールが確認できたら引き続き、Gitを使うユーザーの設定をするために、ターミナルで以下のコマンドを入力する。
> git config --global user.name 適当なGitで使う名前
> git config --global user.email Gitにヒモづくメールアドレス

「適当なGitで使う名前」は半角英数字で入力したほうが無難。
「Gitにヒモづくメールアドレス」はネット環境で複数の人が使う、なんてことがなければ、入力しなくても大丈夫かもしれないが、一応念のために入力。

これで環境設定は終了。
次にGitを使うGUIのアプリケーションをダウンロードする。

OSX10.7以降なら、Gitのサイトにもあるように、GUIのアプリも色々あって、使いやすいのを選ぶといい。

GUI Clients

OSX10.6.8は選択肢が少なく、直感的に使えるアプリが「GitX」ぐらいしかない。

GitX

他にもGUI Clientsで紹介されているアプリの中で、OSX10.6.8で無料で使えそうなアプリでは「git-cola」「GitEye」もある。
こちらはインストールしてないので、使い方がわからない。

「GitX」をダウンロードすれば、アプリはすぐに使うことができる。

GitXを起動する
02)

 
アプリを起動すると、最初にRepositoryのあるフォルダを選択するウィンドウが表示される。
Repositoryがまだなければ、ここは「キャンセル」を選択。

次に[file] > [new]を選んで、Gitでバージョンを管理するフォルダを選択する。

選択したフォルダの内容は「Unsteged Changes」というところに表示される。
表示された項目をダブルクリックすると、「Steged Changes」に移動する。

Commit Messageのところに、あとでバージョンを見直すときのきっかけになるコメントを記入し、「Commit」ボタンを押すと、現在のファイルの状態がGitで管理されるようになる。

これで、GitXでRepositoryのあるフォルダを閲覧すると、Gitで管理されたファイルと違う部分があるファイルは「Unsteged Changes」に表示されるようになる。

これで「バージョンを管理しておきたい」というところで「Unsteged Changes」に表示されたファイルをダブルクリックして「Steged Changes」に登録、「Commit」させることでいつでもバージョン管理ができるようになる。

こんな感じで使い始めたんですが、とりあえず、GitはSubversionに比べるとインストールが楽だし、アプリにDiffも標準であったりして、なかなか便利な気がします。
GUIのGitアプリがあれば、結構扱いが簡単なので、一人バージョン管理には良いな、と改めて思います。

しばらく使ったら、面倒くさくなるかもしれないんですけどね(大汗



ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ  




「HTML5入門」絶賛発売中!


「DreamweaverではじめるWebサイト構築」という本を書きました。
現在絶賛販売中!

楽天市場


FaceBook
記事検索
訪問者数

    livedoor プロフィール

    ブログランキング・にほんブログ村へ

    人気ブログランキングへ

    • ライブドアブログ