グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

photoshopでレイアウトする際、地味に手間がかかるガイドを引く作業。
こちらのエクステンションを使えば簡単に作成できます！


GuideGuide
上下左右のマージンに中心線など、細かく設定できて、
１クリックでガイドが引けてしまうので、とっても便利です！

続いて、
「サイト作るときに便利なPhotoShop JSX、ショートカット、アクション」
という記事で紹介されていました。
かゆいところに手が届く、スクリプト詰め合わせです。
自作されたそうです。感謝です！

個人的には、一度書いた角丸のを数値指定で変更できる「角丸具合変更」と
複数選択したテキスト、シェイプを一度で変更できる「カラーピッカー」は、
便利ですばらしいです！

そして、
CS6からシェイプツールでドキュメントをクリックすると、ダイアログが表示され、
任意のサイズでシェイプを書く事ができるようになってました。

■ClockMaker Labs
http://clockmaker.jp/labs/

Flash Stage3Dを使用したサンプルを多数紹介されているサイトです。

サイトそのものがかなり素敵で、こういう動かしてるだけで
気持ちいいようなサイトを久々に見たような気がします。
（といっても最近できたサイトではありませんが）

紹介されているサンプルもどれもクオリティが高く、
どちらかというとギャラリーサイトみたいな感覚で眺められます。

実際、内容は全然理解できていないですが・・
見ているだけでもインスピレーションが刺激されると思いますので是非。

tableを使用したwebページの表の中身をコピーして、エクセルの表やcsvを作成したい。というシーンがあるかと思います。
膨大な表となると、コピーするのも一苦労・・・そんな時に役立つブラウザのアドオンがあります。

●table2clipboard - Firefox

＜使用方法＞
アドオンを追加した状態で、コピーしたいテーブル上で右クリック

　
table2clipboard　→　表全体をコピー
（クリップボードに保存されます）

　
エクセルにペースト

　
この通り、結合セルや画像も再現され非常に便利！
しかし、Firefoxなんて使いたくない！！という方もいるかと思います・・
そんな方にはコチラ。
　
●Table Capture - Chrome

＜使用方法＞
アドオンを追加した状態で、アドレスバーに現れる赤いマークをクリック

　
「Copy to Clipboard」をクリック

　
エクセルにペースト

　
table2clipboardと違い、結合セルや画像は再現できないようですが、十分使えます。

※14/10/8　追記
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。

ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。


よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。

ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
});

上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
  'scrolling' : 'no',
  'onComplete' : function() {
    $('#fancybox-frame').load(function() {
      $('#fancybox-content').height($(this).contents().find('body').height());
      $('#fancybox-overlay').height($(document).height());
    });
  }
});

これで高さが自動調整されます。
google chromeだとローカルでは動きません。

※12/7/11　追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。

不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。

また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。

ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・

時間があるときにいじってみたいです。

普段はそんなに使わないものの、ふとしたタイミングで必要になると
作るのは結構大変、そんなローディングアニメ（自分はそういうイメージ）ですが、
そのローディングアニメgifを簡単に作成できるジェネレーターがありました。

■Load Info - gif generator
http://loadinfo.net/


使い方は

（1）予め用意されているデザイン（132種類！）から選ぶ
（2）メインと背景の色を決める
（3）サイズを決める

これだけでサッと作成できます。
シンプルで素晴らしい！

【作ってみたサンプル】
　　　 　　　

JavaScriptから、引数を渡しつつPHPを実行する方法です。
jQueryが必要ですが、かなり簡単に実現することができます！

■Fの視点
JavascriptからPHPを実行したい


処理にはAJAXを使用します。

$.ajax({
type: "POST",
url: "sample.php",
data: "sampleVal1=test&sampleVal2=hoge",
success: function(html){
alert(html);
}
});

dataにPHPに渡す引数を指定。&繋ぎで複数指定できます。
PHP側で $_POST['sampleVal1'] と書くことで値を取得できます。

successはPHP実行後に行う処理です。
上記の場合はPHPで出力した値がhtmlに格納されます。

以上。
過去これができなかったために、
同じようなPHPを複数用意したこともあったのでとても助かりました。

テキストエディタといえば、自分はこれまでWindowsの「秀丸エディタ」を愛用してきましたが、Macに引っ越した際に「mi」というテキストエディタを使い始めました。
若干勝手が違う部分もありますが、この「mi」も秀丸に負けず劣らず様々な機能を持っています。
その中でも自分が特に便利だと思っている【自作ショートカット】を二つ紹介します。


＜設定手順＞

【1】メニューバー「mi」　→　「モード設定」

【2】「キーバインド」タブを選択

【3】「動作なし」となっている、空いているキーを選択（Shift、Control等のキーとの組み合わせも可能）
※おすすめは同時押しキーなしのF1〜F12キー

【4】同ウィンドウ下部の「動作」のプルダウンから「文字列挿入」を選択

【5】すぐ下の「文字列挿入」の入力エリアに、下記の記述を入力

【6】該当するキーを押して使用！



■行末に<br />をつけ、キャレットを一段下へ移動

<<<MOVECARET-ENDOFLINE
>>><><<<MOVECARET-LEFT
>>>br<<<SPACE
>>>/<<<MOVECARET-DOWN
>>>



■行末の改行を削除

<<<MOVECARET-DOWN
>>><<<MOVECARET-STARTOFLINE
>>><<<DELETE-PREV
>>><<<MOVECARET-STARTOFLINE
>>>



※注意
上記のコードは、ウィンドウ幅、文字数等のテキスト折り返し設定オフ時を想定している設定です。
テキストを折り返ししているテキストでは、正常に動作しない場合がありますので、長い文章には折り返しを解除してご使用下さい。

自分は折り返しオフ派なのでこのように使っていますが、普段折り返しして使用する人にとっては、この手間のせいでショートカットにならないかもしれません......

素材サイトなどで配布されている、モノクロ素材の色を変える方法です。



Photoshopでの手順になります。

1.「イメージ」→「モード」がRGBやCMYKになっていることを確認

2.「イメージ」→「色調補正」→「色相・彩度」を選択

3.「色彩の統一」にチェックを入れ、彩度を上げる




また、モノクロの状態でブラシに登録し、希望の描画色を選択して塗るという方法もあります。
すでに使う色が決まっているなら、数値で指定できるこちらが良いかもしれません。

アンカーリンクを使って特定のIDまでスクロールさせるのは簡単に出来ますが、
この場合、リンク元で指定しなければなりません。

リンク元で指定できない場合でも、アクセス時に自動で移動する必要があり探しました。
検索では「window.scrollTo」などがよく出てきますが、
数値で指定するため移動させたい位置の上にテキストなどがあると使用できません。

なんとかCLASSやIDで指定できないか探して見つけました。
すごく簡単で使いやすいです。
下記の記事を参考にしています。
>リンク先ページの指定位置にスクロールで移動

---------------

<script type="text/javascript">
$(function() {
	var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
	var p = $("移動させたいIDまたはCLASS").offset().top;
	$('html,body').animate({ scrollTop: p }, 'slow');
	return false;
});
</script>

---------------

青字部分を移動させたい位置のIDまたはCLASSを指定すれば完了です。

すべての画像が読み込まれた後にスクリプトを実行する場合は
前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、
指定した画像が読み込まれたときに実行する場合や、
後から画像を読み込む場合には不十分です。


画像ありのRSSを読み込もうと思い、

--------------------------------------------------------------------
$("#rssList img").load(function(){
  // 処理
});
--------------------------------------------------------------------

と書いたのですがブラウザによっては上手くいかず。。

↓こちらのサイトでぴったりのことが記事にされていましたので
参考にさせていただきました。

jqueryで画像のロード完了後に実行 - downstairs lab
http://www.stairsdesign.jp/blog/2011/07/jquery.html


■方法
imagesLoadedというプラグインを使用します。

https://gist.github.com/268257

こちらのサイトからJSファイルをダウンロードして<head>内で読み込み、
--------------------------------------------------------------------

<script type="text/javascript" src="js/imagesLoaded.js"></script>

--------------------------------------------------------------------

loadをimagesLoadedに書き換えれば完了です。
※2013/10/2 $(function(){}); を追加しました。
--------------------------------------------------------------------
$(function(){
  $("#rssList img").imagesLoaded(function(){
    // 処理
  });
});
--------------------------------------------------------------------