構想雑文

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

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デザインへ  



jQueryとCSSで<div>全体のどこをクリックしても、その内部にある<a>で指定したリンク先に移動する仕掛けを作る

記事の項目のどこでもいいからクリックすると、詳細ページに移動するものを作ることが立て続けにあったのでまとめ。

以下のような<div>で囲まれた部分全体をマウスクリックの対象になるように仕掛けを作るときはjQueryで作る事が多いと思います。

作ったのは、こういう状態のものが
51)

マウスを重ねると以下のようになって、クリックすると<a>で設定したURLに移動するものです。
01)


実際の動作は下記のデモを参考にしてください。


表示部分のHTMLはサンプルでは以下のように記述しています。
<div class="block1">
<h1>タイトル</h1>
<p>隣の猫はよくゴロゴロと庭でころがって、くつろいでいる</p>
<p class="more"><a href="http://www.yahoo.co.jp/">続きはこちら</a></p>
</div>

jQueryは、下記のようなコードを記述しています。
$(".block1").on(
{'click':function(){
window.location=$(this).find(".more a").attr("href");
return false;
}
});

これだけでOKですが、このままでは、マウスを重ねてもマウスカーソルのカタチが変わりません。
そこでマウスカーソルが<div>に重なったら 背景色を変え、マウスカーソルもクリックを表すものに変更したいときは以下のソースに変更します。

jQueryの部分は下記のように変更。
先ほどのソースにmouseoverとmouseoutを付け加えた。
$(".block1").on(
{'mouseover':function(){
$(this).addClass("onmouse");
},
'mouseout':function(){
$(this).removeClass("onmouse");
},
'click':function(){
window.location=$(this).find(".more a").attr("href");
return false;
}
});

そして、CSSの設定で以下の記述を加えました。
.onmouse{
background-color: #ffe6f9;
cursor: pointer;
}

これで<div>のどこをクリックしても、<div>の中にある<a>のリンク先に移動できるようになります。

めでたし、めでたし...。で終われば良かったんですが

とある仕事で、JavaScriptを使ちゃダメ、jQueryもダメといわれて途方にくれたときに
HTMLのコーディングの変更はOK、CSSで実装せざる得ないという何ともなケースに最近遭遇。

素直にJavaScript使おうよ...、ねぇ...?

色々考えて、作成した、そのときのソースコードは以下です。まずデモのページを確認してください。


先ほどのものから、HTMLコーディングを変更します。
<a>要素をもう一カ所、タイトルに追加していまいます。
※赤い部分はさっきのHTMLと違う部分。

<div class="block1">
<h1 class="more"><a href="http://www.yahoo.co.jp/">タイトル</a></h1>
<p>隣の猫はよくゴロゴロと庭でころがって、くつろいでいる</p>
<p><a href="http://www.yahoo.co.jp/">続きはこちら</a></p>
</div>

その上で、CSSの設定は以下のようにします。

.block1{
border:solid 1px #000;
width: 200px;
padding-top: 24px;
position: relative;
}
.more a{
display:block;
position:absolute;
left:0;
bottom:0;
height:100%;
width:100%;
overflow:hidden;
text-decoration: none;
}
.block1:hover{
background-color: #ffe6f9;
}

jQuery版との違いは、HTMLでは<div>の内部に、<a>で同じリンク先を指定している箇所が2カ所あることです。<h1>の要素の<a>のURLが<div>全体のリンク先のアドレスになるように、コードを設定します。

マウスが重なったときの背景色の変更は、CSSの「.block:hover」で行っています。
「.block:hover」はIEの古いバージョンでは反応しないので、まぁ気休め程度のものと思ってください。
実際「.block:hover」を使えない場合はもうちょっとワケがわからないCSSの設定をする必要があると思うんですが、今回はこんな感じにコーディングしてみた次第です。

 
まぁ 自分のデザインの表示に近いコーディングができるなら、JavaScriptで書こうが、CSSで書こうがどっちでもいいかもしれません。
まぁ、ご参考までに。


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

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


「HTML5入門」絶賛発売中!


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

楽天市場


FaceBook
記事検索
訪問者数

    livedoor プロフィール

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

    人気ブログランキングへ

    • ライブドアブログ