CSS Index

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:28:53 | 最終更新:2023-05-30 (火) 9:42:10


CSS も、色々と奥が深い。
ましてや、CSS3 が出てからはわけわけらんチーン。。。 🙄

丸っきりの書きかけ項目は Not found になる。

基本
プロパティ
擬似クラス

 

Tips
未分類

 

参考

w3c:Cascading Style Sheets
w3c:日本語訳ページ
MITSUE-LINKS:Web標準仕様 日本語訳一覧:CSS
MDN:CSS

その他各参考サイトについては、各エントリーにて。

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:28:53 | 最終更新:2023-05-30 (火) 9:42:10

レイヤースタイル -> ライブラリ

Posted by muchag | Photoshop |
初回投稿:2015-02-11 (水) 13:09:26 | 最終更新:2015-02-11 (水) 13:09:26


ライブラリ集。

テキスト
Metal

2015-02-11_Style_goldenstyles_previewROSA:10 Golden Photoshop Styles for Christmas
Golden_styles_Divena.zip
Divena_golden_styles.asl

 
2015-02-11_Style_metal_pack_layer_style_text_fx_by_giallo86-d34m88rDEVIANT ART:Metal pack layer style text fx
metal_pack_layer_style_text_fx_by_giallo86-d34m88r.zip
ALL_shiny_metal_styles.asl
big_metal_styles.asl
medium_metal_styles.asl
small_metal_styles.asl

 

パネル

2015-02-11_Style_Revnart_Styles_by_revn89DEVIANT ART:Revnart Styles
Revnart_Styles_by_revn89.asl

 

リンク集

また見てみたいリンク集。
 
clipping:透明感のあるPhotoshopレイヤースタイル37セット
coliss:美しい半透明のパネルを簡単に作成できるPhotoshopのスタイルのまとめ

Posted by muchag | Photoshop |
初回投稿:2015-02-11 (水) 13:09:26 | 最終更新:2015-02-11 (水) 13:09:26

レイヤースタイル(スタイル)

Posted by muchag | Photoshop |
初回投稿:2015-02-11 (水) 12:01:00 | 最終更新:2015-02-11 (水) 12:01:00


「レイヤー効果」と「レイヤースタイル」の言葉の違いがピンとこなかったので
レイヤー効果 レイヤースタイル
にまとめてみた。

【環境】
Windows:7 Home Premium SP1
Photoshop:CS6
適用
  1. 当該レイヤーを選択
  2. [スタイル] ウィンドウのスタイルをクリック

 
これで、スタイルを適用できる。
 

保存
  1. レイヤー効果ダイアログを開く
  2. [新規スタイル] をクリック
  3. スタイル名称を決める

 

読込
  1. [スタイル] ウィンドウのオプションメニュー
  2. [プリセットマネージャー] をクリック
  3. 開いたダイアログで [読み込み] をクリック
  4. 当該 .asl ファイルを選択
  5. [完了]

.asl ファイルの場所

(Photoshop)\Presets\Styles

 

ライブラリ

.asl ファイルがあれば、他人が作成したスタイルも利用できる。
Google 先生に質問すれば、フリーのものもいっぱいある。

デフォルトの外部 .asl ファイルの保存場所
(ユーザディレクトリ)\AppData\Roaming\Adobe\Adobe Photoshop CS6\Presets\Styles
まぁ、実際はどこでもいいんだけどw
 

削除
1つ
  1. [スタイル] ウィンドウの当該スタイルを右クリック
  2. [スタイルを削除] をクリック

 

複数
  1. [スタイル] ウィンドウのオプションメニュー
  2. [プリセットマネージャー] をクリック
  3. 開いたダイアログで当該スタイルを選択(複数選択可能)
  4. [削除](削除自体はこの時点で完了している)
  5. [完了]
Posted by muchag | Photoshop |
初回投稿:2015-02-11 (水) 12:01:00 | 最終更新:2015-02-11 (水) 12:01:00

レイヤー効果 レイヤースタイル

Posted by muchag | Photoshop |
初回投稿:2015-02-11 (水) 11:38:55 | 最終更新:2015-02-11 (水) 11:45:19


レイヤー効果とレイヤースタイル。

【環境】
Photoshop:CS6
用語
レイヤー効果

レイヤーに与える、与えられた効果。
効果を与える行為や効果1つ1つを指す、と捉えればいいのかな~。
 
[当該レイヤーを右クリック]-[レイヤー効果] で、自由に使える。
 

レイヤースタイル

1つのレイヤーに与えられた効果全部をまとめたもの。
 
パッケージ化して保存したり、
他のレイヤーに同じスタイル(効果群)を与えることができる。
 
[スタイル] ウィンドウは、保存してあるレイヤースタイルの一覧。
 

  1. 当該レイヤーを選択
  2. スタイルウィンドウのスタイルをクリック

これで、スタイルを適用できる。

Posted by muchag | Photoshop |
初回投稿:2015-02-11 (水) 11:38:55 | 最終更新:2015-02-11 (水) 11:45:19

Crayon Syntax Highlighter

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-02-10 (火) 12:32:38 | 最終更新:2015-02-10 (火) 20:35:18

長年愛用してきた iG:Syntax Hiliter とおさらばする日がやってきた。寂しい><

Crayon 導入中止

せっかく記事を書いたけど、Crayon の導入を中止した。

な~ぜか!
as, vb のショートタグに無反応 😯

さよなら Crayon 短い付き合いだったね。。。

ここまで

 

【環境】
WordPress:4.1
Crayon Syntax Highlighter:2.6.9
iG:Syntax Hiliter:4.3
お別れの理由

iG:Syntax Hiliter では、知らないうちに、php や javascript など、お作法のある言語では、
その記述が必須になっていた。
 
このように記述しなければならず

  1. <?php
  2. echo 'Hello World!';
  3. ?>

これでは、ハイライトされない。

  1. echo 'Hello World!';

 
これはこれで大切なことなのかもしれないけれど、JavaScript のときは、特に鬱陶しくなってしまう。

  1. jQuery()
  2.  
  3. $()
  1. <script type="text/javascript">
  2. jQuery()
  3.  
  4. $()
  5. </script>

 
ね!

jQuery の書式 こちらの記事を書いていて、どうにも我慢できなくなり、
iG:Syntax Hiliter とお別れする決心をしました。
 

選んだ理由
選択肢

そもそも選択肢が少ないね~。
前に iG:Syntax Hiliter を導入したとき も選択肢が少なかったけど
今でもあまりないみたい。
需要は高そうなのにね~。
 

決め手

乗り換えるにあたって、最大の決め手はもちろん!
今までの記事を書き直さなくて良いこと。
 
その点、Crayon Syntax Highlighter は、iG:Syntax Hiliter で利用していたショートタグ
[php]hogehoge[/php] を解釈してくれるので、いいね! 🙂

言語混在

後、嬉しい機能として言語の混在でもOK。
 

必要とする仕様・機能

その他、私が必要とする機能が一通り揃っていたのでOK。

  • 仕様
    • 1行毎に背景色を変える
    • 行番号を表示できる
    • QuickTag から使える(入力が楽)
  • 機能
    • 強調行を設定できる
    • 開始行番号を設定できる

 

設定

下記は私が変更した設定。
 

一般設定
テーマ

リストからお好みのを探して [Duplicate] とすると、
テーマがコピーされ編集できる状態になるので [Edit]  
すると編集画面が起動するので、画面右側でカスタマイズ。
 

ツールバー
[ツールバーの表示]-[常に表示] [ソース言語を表示]-[常に表示]  

コード

常にスクロールバーを表示する
チェックを入れる。
 

タグ

Crayonsとして[php][/php]のようなミニタグをキャプチャします。
チェックを入れる。

これで、古い記事のショートタグを認識してくれる。
 
但し、[php num=”3″ highlint=”5″] のように属性つきのものは、このままだと無効になってしまうので
Crayon Syntax Highlighter に拾ってもらえる文言に変更。

  1. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " num=", " start-line=");
  2. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " firstline=", " start-line=");
  3. UPDATE `wp_posts` SET `post_content` = REPLACE(`post_content`, " highlight=", " mark=");

これで無事に Crayon に拾ってもらえた。

また、逆に [php] という文字列を表示したいときは、$[php] のように前に $ を付けてやることで、
Crayon をエスケープできる。
 

その他

アニメーションを無効にする
プログラム実行時の統計を無効にする
重くなりそうなので、チェックをつけた。
 

デバッグ
エラー

個々設置(Crayon)のエラーを記録
システム全体のエラーを記録
カスタムエラーメッセージを表示する
重くなりそうなので、ひとまず全てのチェックを外した。

Posted by muchag | Library & PlugIn & AddIn,WordPress |
初回投稿:2015-02-10 (火) 12:32:38 | 最終更新:2015-02-10 (火) 20:35:18

書式

Posted by muchag | jQuery |
初回投稿:2015-02-10 (火) 11:14:07 | 最終更新:2016-04-17 (日) 17:07:06

色々なサイトを見て勉強させていただいているが、書式がバラバラで混乱してきたので、メモ。

jQuery フレームワークの利用

下記、どちらでも同じこと。

  1. jQuery()
  2.  
  3. $()

 
なので

  1. $.isNumeric( arg );
  2.  
  3. jQuery.isNumeric( arg );

これも同じこと。
jQuery 本体のメソッドを使ってるということ。
 

jQuery オブジェクト

下記の3タイプがある。

  1. $( selector [, context ] )
  2.  
  3. $( html [, ownerDocument ] )
  4.  
  5. $( callback )

 

$( selector [, context ] )

いっぱいあるけど、代表は CSS セレクタ(とその属性)。
Category: Selectors

わかりやすくいえば、タグ、id、class など、CSS で直接指定できるもの。

  1. $( 'body' ) // タグ <body>~</body>
  2.  
  3. $( '#hoge' ) // id <div id="hoge">~</div>
  4.  
  5. $( '.moge' ) // class <a class="moge">~</a>
  6.  
  7. $( '*' ) // ユニバーサルセレクタ(全称セレクタ)

これで、それぞれに 該当する DOM 要素を捕まえる ことができる。
 

属性まで含める場合
  1. // id が hoge で、name 属性が・・・
  2.  
  3. $( '#hoge[name="sun"]' ) // sun のもの
  4.  
  5. $( '#hoge[name!="sun"]' ) // sun でないもの
  6.  
  7. $( '#hoge[name^="sun"]' ) // sun で始まるもの
  8.  
  9. $( '#hoge[name$="sun"]' ) // sun で終わるもの
  10.  
  11. $( '#hoge[name*="sun"]' ) // sun を含むもの
  12.  
  13. $( '#hoge[name~="sun"]' ) // sun という「単語」が入っているもの
  1. // name 属性を持っているもの
  2. $( '#hoge[name]' )
  3.  
  4. // hreflang 属性が en であるもの
  5. $( '#hoge[hreflang|="en"]' )
  6.  
  7. // name 属性を持っていて、value 属性が man で終わるもの
  8. $( '#hoge[name][value$="man"]' )

 

$( html [, ownerDocument ] )

DOM 要素そのもの。
DOM 要素 生成中 に割り込む。

  1. $( '<p>jQuery の可能性はすごいね~</p>' )

 

$( callback )

特別なお方。(要は私にはよくわからない) 🙄
DOM 要素を 読み込み終えたとき に発動。

  1. $( document )

特別なので、クォーテーションで括らない
 

メソッド or イベント

オブジェクトを捕まえたら、後はそのメソッドやらイベントやらを繋げていくだけ。

  1. // id が hoge のオブジェクトの text の
  2.  
  3. $( '#hoge' ).text() // getter
  4.  
  5. $( '#hoge' ).text( arg ) // setter
  6.  
  7. $( '#hoge' ).click() // イベントリスナー

 

イベント
  1. .click( handler )
  2.  
  3. .on( "click", handler )

どちらも同意。
と思ったけど、違うらしい。
前者は、読込時に定義してしまうので、動的に変化をさせたものには対応できない。
後者は、イベント発生時に都度調査をするので、動的な変化に耐えられる。
 

onメソッドはイベントが発生するごとにhtmlの構成をチェックします。

jQuery 入門:イベント(2)

マニュアルの上っ面だけを読んでいると危ないにゃ。。。 🙄
 

.trigger
  1. .trigger( "click" )

これは、イベントを発動させる。
 

事前定義

どれも同意。

  1. $( document ).ready( handler )
  2.  
  3. $().ready( handler ) ←非推奨
  4.  
  5. $( handler )
  6.  
  7. $(document).on( "ready", handler ) ←これもあるけど、1.8で廃止予定? てか、上の3つの後になるのでダメ?

 
確かによく見るのは下記2種。
DOM 要素の読み込みを完了したら呼ばれる。

  1. $( document ).ready(function() {
  2. // Handler for .ready() called.
  3. });
  4.  
  5. $(function() {
  6. // Handler for .ready() called.
  7. });

 

this
  1. $( this )
  2.  
  3. this

これも何気に困ってた。
 

$( this ):jQuery オブジェクト
this:DOM 要素(jQuery とは関係ない)

と書いてもすぐにはピンとこないよね~。

例えば、id を取得したかったら、下記のような表記の差が出る。

  1. $( this ).attr( 'id' )
  2.  
  3. this.id
Posted by muchag | jQuery |
初回投稿:2015-02-10 (火) 11:14:07 | 最終更新:2016-04-17 (日) 17:07:06

INSERT…ON DUPLICATE KEY UPDATE

Posted by muchag | MySQL |
初回投稿:2015-02-09 (月) 16:07:51 | 最終更新:2015-02-09 (月) 20:11:46

ON DUPLICATE KEY UPDATE という、すごく便利な命令を随分前に知って使っていたけど、まだまだ奥が深かったので、メモ。

【環境】
[MySQL] 5.5.27
基本
  1. INSERT INTO table_name (id, name)
  2.     VALUES (val1, val2)
  3.     ON DUPLICATE KEY UPDATE name = val2;

これで
・新しいレコードを挿入してね
・値は、id が val1 で、name は val2 でお願いね
・でももし val1 という値が id に既にあったら、そのレコードの name を val2 で上書きしてね
というお願いになる。
便利だよね~。
事前に存在を確認して、あれば UPDATE、なければ INSERT を発行する、という手間がなくなった。
 

DUPLICATE KEY

ここで「でももし val1 という値が id に既にあったら」この部分について。

特定のキーとは、Uniqueキーとして登録してあるか、Primary Keyとして登録してある必要がありますが、1つのカラムに限らず、複数のカラムでも一つの Uniqueキー(Primary Key)の設定を行うことで対応が可能です。
 
ただ、Uniqueキーの設定が必要ですので、設定するカラムで複数レコードが存在するような仕組みの場合は利用することはできません。

— snip —

「Unique」は、nullは重複しないと見なします。
「Primary Key」は、nullは重複するとみなすため、nullを入れようとするとエラーになります。

有限会社 エス技研:Insert On Duplicate Key Update構文の使い方

ふむふむ。キー周りの知識が怪しいので、ひとまずはこれにて。
 

式も入れられる

参考サイトを読み取っただけで、実証していない。

  1. INSERT INTO table_name (id, name, point)
  2.     VALUES (val1, val2, val3)
  3.     ON DUPLICATE KEY UPDATE name = val2, point = val3;

このとき

  1. INSERT INTO table_name (id, name, point)
  2.     VALUES (val1, val2, val3)
  3.     ON DUPLICATE KEY UPDATE name = val2, point = point + VALUES(val3);

このようにすることで、id が被った場合は、point に val3 を上書きするのではなく、元の値に val3 を加算して上書きする。

  1. INSERT INTO table_name (id, name, point)
  2.     VALUES (val1, val2, val3)
  3.     ON DUPLICATE KEY UPDATE name = val2, point = point + 10;

こうすると、元の値に 10 を加算して上書きする。(新しい値 val3 は無視)
すごい。。。でも、少し複雑になってきた。
 

条件式

CASE や IF も使えるらしい・・・。
すぐにはわからないので、丸コピー。

DUPLICATE KEY UPDATE にはCASEやIFが使えるので、フィールド毎に更新条件を設定できる。
デフォルト値を使って値を更新されないようにもできる。

Qiita:MySQL: INSERT…ON DUPLICATE KEY UPDATEまとめ

  1. INSERT INTO
  2.        table (user_id, fb_like, tweet, updated)
  3.    VALUES
  4.        (1, 12, 10, NOW()), (2, 8, 9, NOW())...()...,(1000, 42, 30, NOW())
  5.    ON DUPLICATE KEY UPDATE
  6.        fb_like = IF(fb_like > VALUES(fb_like), fb_like, VALUES(fb_like))
  7.        , tweet = IF(tweet > VALUES(tweet), tweet, VALUES(tweet))
  8.         , updated = NOW()

 

プリペアドステートメント

プリペアドステートメントを利用する場合は、下記のように記述。

  1. INSERT INTO table_name (id, name, point)
  2.     VALUES (?,?,?)
  3.     ON DUPLICATE KEY UPDATE name = VALUES(name), point = VALUES(point);

 

REPLACE

同じ結果を得られるものとして、REPLACE 文がある。
両者の違いは、下記の通りらしい。

ON DUPLICATE KEY UPDATE:UPDATE
Replace:DELETE & INSERT

 

参考サイト

Qiita:MySQL: INSERT…ON DUPLICATE KEY UPDATEまとめ
極上の人生:MySQL でプレースホルダを使ったINSERT … ON DUPLICATE KEY UPDATE 文を書く
有限会社 エス技研:Insert On Duplicate Key Update構文の使い方

Posted by muchag | MySQL |
初回投稿:2015-02-09 (月) 16:07:51 | 最終更新:2015-02-09 (月) 20:11:46

INSERT

Posted by muchag | MySQL |
初回投稿:2015-02-09 (月) 15:39:31 | 最終更新:2015-02-12 (木) 0:10:46

勘違い。。。
そのうち書くことができたら書く。

Posted by muchag | MySQL |
初回投稿:2015-02-09 (月) 15:39:31 | 最終更新:2015-02-12 (木) 0:10:46

MySQL Index

Posted by muchag | MySQL |
初回投稿:2015-02-09 (月) 15:27:39 | 最終更新:2019-11-23 (土) 13:29:30

ずぅっとお世話になりっ放しの MySQL さん。
今更だけど、目次を追加。

丸っきりの書きかけ項目は Not found になる。

基本

 

SQL 構文(Statement)
複合(Compound)
  • フロー制御(Flow Control)
句(clause)
関数(function)
phpMyAdmin
最適化
mysqldump
Workbench
CLI
Tips
がい~ん!(はまったこと)
参考

MySQL 日本公式
公式ドキュメント
MySQL演算子・関数

Posted by muchag | MySQL |
初回投稿:2015-02-09 (月) 15:27:39 | 最終更新:2019-11-23 (土) 13:29:30

split

Posted by muchag | PHP |
初回投稿:2015-02-09 (月) 12:47:48 | 最終更新:2015-02-09 (月) 18:02:16

split は、文字列を指定文字で分割して、配列にして返してくれる関数。
 
PHP マニュアル:split

2015-02-09 追記

警告
この関数は PHP 5.3.0 で 非推奨となりました。 この機能を使用しないことを強く推奨します。

— snip —

ヒント
split() は PHP 5.3.0 以降で非推奨になりました。この関数のかわりに preg_split() を使うことを推奨します。 正規表現の威力が必要ないのであれば、explode() を使用するほうがより高速です。これは正規表現エンジンの オーバーヘッドを受けません。

PHP マニュアル:split

あw
代わりは・・・explode っと。

ここまで

 

【環境】
[ PHP ] 5.4.7
書式

array split ( string $pattern , string $string [, int $limit = -1 ] )

string を、正規表現によって配列に分割します。

第1引数:大文字小文字を区別する正規表現
第2引数:入力文字列
第3引数:limit が指定された場合、返される配列には 最大 limit の要素が含まれます。この場合、 最後の要素には string の残りの部分が全て 入っています。省略可
返り値文字列の配列
 

返り値

これまで、split を利用するときは、配列で受け取ることしかしてなかったけど、list で受け取ることができることを今日知った。

  1. // デリミタはスラッシュ、ドット、ハイフンのどれかです。
  2. $date = "04/30/1973";
  3. list($month, $day, $year) = split('[/.-]', $date);
  4. echo "Month: $month; Day: $day; Year: $year<br />\n";

戻り値の意味がよくわかる。これは便利。
マニュアルはちゃんと読まないとね。。。

Posted by muchag | PHP |
初回投稿:2015-02-09 (月) 12:47:48 | 最終更新:2015-02-09 (月) 18:02:16
« 前ページへ次ページへ »