ホーム > ブログ [果報は寝て待て]

ブログ [果報は寝て待て]|Blog

RSS

ようやくリニューアルできました…。

2012年5月1日 00:14

こんばんは。
最近、ウォーキングやらバンドやらを始めて、珍しくアクティブな掛尾です。

いやぁ…ようやく自社サイトのリニューアルが終わりました。
実はもう随分前にモノはできあがっていたのですが、一緒にサーバーを移転しようと考えていて、しかし旧サーバーではお客様の確認用のモノも置いてあったりして、お仕事が一段落するまで・・・って言ってる間にものすごい時間が経ってしまってたいう感じなんです(汗

そしてそして、リニューアルもさることながら、月額定額の新サービスを開始させていただきました!

このサービスの主旨としては、まだまだよく解らないとおっしゃられる方や、興味や知識はお持ちでもなかなか時間を作ることができない方をしっかりサポートさせていただけたらというものです。

また、作っておしまい!ではなく、お客様と末永くおつきあいさせていただき、微力ながらも運用のアドバイスやサポートもさせていただけたらというものでもあります。

ひとことで表すとすれば・・・ “あなたのお店(会社)のWeb担当者!” ・・・という感じでしょうか♪

今後もさまざまなサービスや特典もご提案させていただこうと思いますので、何卒よろしくお願いいたします。
ぜひ一度内容をご覧いただき、ご質問などがございましたらお気軽にご連絡いただければと思います。

jQuery フェードエフェクト画像ロールオーバー

2012年2月27日 19:14

こんにちは。 最近はjQueryでWebサイト上のほとんどの動きが実現できるようになってきましたね。 そこでナビゲーションとかでよく使う画像ロールオーバーにフェード機能をと考えていろいろ検索してみました。

個人的にCSSで-9999とかってやるのが嫌なので(あちこちで可否が言われてますけど、グレーなのには間違いないと思ってるので…)、オーバー時とアウト時の画像を2枚用意するバージョンです。

jQueryで簡単実装!フェードエフェクト付き画像ロールオーバー』 を参考にさせていただき、画像ボタン(inputタグ)にも対応できるように改造してみました。

以下、コード。

/**
* jquery.faderollover.js
*
* @author    shape DESIGN <info@shape-design.jp>
* @link      http://shape-design.jp/
*/
 
(function(){
  $.faderollover = function( option ){
    var settings = $.extend({
      target: 'img,input',
      out_suffix: '_off',
      over_suffix: '_on',
      in_duration: 300,
      out_duration: 200
    }, option );
   
    var objTarget = $(settings.target);
    objTarget.each(function(){
     
      if( $(this).attr('src') != undefined ){
       
        if( $(this).attr('src').match( new RegExp( '.+'+settings.out_suffix+'\..+$' ) ) ){
         
          this.objOverElm = $(this).clone();
         
          this.objOverElm.attr('src', function(){
            return $(this).attr('src').replace( settings.out_suffix, settings.over_suffix );
          });
         
          this.objOverElm.css({ position: 'absolute', opacity: 0 });
          $(this).before( this.objOverElm );
         
          $(this.objOverElm).hover(function(){
            $(this).stop().animate({ opacity: 1 }, { duration: settings.in_duration, queue: false });
          },
          function(){
            $(this).stop().animate({ opacity: 0 }, { duration: settings.out_duration, queue: false });
          });
        }
      }
    });
  }
})(jQuery);

使うときはこんな感じです。

$(function(){
  $.faderollover({in_duration: 400,out_duration: 400});
});

■Options
target: 要素名(imgとかinputとか)
out_suffix: アウト時の画像ファイル名のサフィックス
over_suffix: オーバー時の画像ファイル名のサフィックス
in_duration: オーバー時のフェードスピード
out_duration: アウト時のフェードスピード

Firefoxでしか試していませんので、使っていただくのはご自由ですが、自己責任でお願いいたします。

手帳

2012年2月10日 22:42

こんばんは。
まだ暖かくならないのかと、毎日待ちわびている基本寒いのも暑いのも嫌いな掛尾です。(単なるわがまま)

少し前に、愛用している手帳『フランクリンプランナー』のリフィルを新しくしたんですが、前々から考えていることではあるんですが、なぜこれだけスマートフォンやタブレット端末が普及してきているにも関わらず、アプリがでないのかと…。

確かに、『書く』という行為はとてもいいことだと聞きますが、書いた情報を転記するという作業はどうしても大変に感じてしまいます。
この転記するっていう作業で『7つの習慣』で言われている『効果』が倍増するということなのだろうか…とも思ったりしたのですが、その効果ってなんだろう・・・。

何度も書くことで心や自分の意識に深く刻み込まれるって考え方もできなくはないですけども。

『フランクリンプランナー』自体はとても良くできた手帳だと思うので、アプリを待望している方は少なくはないと思うのですけど。

でも・・・と、ちょっと考えて・・・というかよくよく思い出してみました。

『フランクリンプランナー』と同じような使い方をすれば、普通の手帳でも構わない。

そんな言葉を見た記憶が!

…というわけで、ないならそれに近いものを作れればな〜とかぼんやり考えてる最中です。

ようするに、自分の価値観を明確にして、目指す自分に少しでも近づけられれば、ツールはなんでもいいわけですね。

毎朝起きて、iPhoneやMacで自分のミッションステータスを見て、カレンダーやタスクリストから今日のスケジュールを決める。
今後も必要な情報があれば、ノートブックみたいな形で別の場所へまとめておく。
タスクの重要度(これ大事!『優先事項を明確にする』)や先送りなんかもできるといいですね。
どこからでも見たいから、やっぱりウェブベースがいいのかな…。ログインすれば見られる・・・みたいな。
iPhoneのアプリは頑張れば作れそうな気はしなくもないですけど。

・・・とまぁ、こんなことを妄想してました(笑

できるかできないかはまだ分からないけど、面白そうなのでやってみる価値はあるかも♪
ちょっと時間をとって真面目に考えてみよう。

ひとつのこと(物)にこだわるのは思考を停止させるだけなので、そういうものを全て取り払って、目的を達成する手段をいろいろ考えるのは大事。
道は一つじゃないことの方が断然多いから。

はっ!これは・・・『第3の案』ってやつですね(笑

そんな感じで、今日は僕の妄想劇でした(汗

preg_match でバックスラッシュをマッチング

2012年2月4日 14:30

こんにちは。
久しぶりにPHP関数でハマってあたふたしてた掛尾です(汗

先日、とあるところでバックスラッシュをマッチングさせようと preg_match を使用した時のこと…。

<?php
$subject = 'test\test.test';
preg_match( '/([^\\]*)\\([^\\]*)$/', $subject, $matches );
 
var_dump( $matches );
?>

こんな感じのコードを書いたんですが…。
期待してた結果は

array(3) {
  [0]=>
  string(14) "test\test.test"
  [1]=>
  string(4) "test"
  [2]=>
  string(9) "test.test"
}

これだったんですが、なんと・・・エラーでたじゃないですかっ!

Warning: preg_match() [function.preg-match]: Compilation failed: missing terminating ] for character class at offset 16

結果は『NULL』。

何故なんだろう…と思って検索、検索・・・。 ありました。

PHPマニュアル - エスケープシーケンス

注意: シングルクォートあるいはダブルクォートで囲まれた PHP の 文字列 の中では、バックスラッシュは特別な意味を表します。 そのため、正規表現 \\ を使用して \ とマッチさせたい場合は PHP のコード内では "\\\\" あるいは '\\\\' と記述する必要があります。

なるほど・・・。
正規表現の『\\』を文字列としての『\\』にマッチさせる的な考え方なんだろうか…。
なんか考え出すと頭がパニックになりそうだったので、マニュアル通りにしてみました。

<?php
$subject = 'test\test.test';
preg_match( '/([^\\\\]*)\\\\([^\\\\]*)$/', $subject, $matches );
 
var_dump( $matches );
?>

これで期待通りの結果が得られました。

ちなみに、正規表現パターン内のバックスラッシュを、全部3つずつにしても正しい結果が得られたんですが・・・何故なんでしょうか・・・。
なんか不思議な迷路に迷い込みそうなので、またの機会に考えることにしましょう(苦笑

機能とデザイン

2012年1月29日 18:05

こんにちは。
最近、いろいろ考え事をしていてとてもワクワクな気分の掛尾です。
何か新しい事を考えたり、先の事を思ったりするこのワクワクってとっても大切だと思います♪

今回はあまりにも唐突ですが(笑)タイトルにもあるとおり『機能』と『デザイン』について思ったことなどつらつらと書いてみようかと思います。

機能とデザインといえば『形態は機能に従う』という有名な言葉がありますが、よい機能であればよいデザインになるのだろうか…。
建築の事は詳しく分かりませんし、この言葉を残した方の事もよく知りません。真意もはっきりとわかりませんので、この言葉について議論するつもりもありません(汗)

しかしながら、自分自身の仕事において(WEBデザインやWEBシステム)、機能ありきで作った場合は大体うまくいかない感じがします。
僕の中では『機能』と『デザイン』って相乗的な関係で、どちらかが従うものではないんじゃないのかなって思います。
いくら機能的であってもデザインが酷いのもどうかとおもいますし、どんなに素晴らしいデザインであっても機能が伴わなければ価値がない(WEBサイトなら見づらいとか使いにくいとか)ですし。
機能とデザインがうまく作用しあうからこそ、美しいデザインであり、機能的なんじゃないのかなと思ったりします。

話は変わりますが、僕は他の方が書いたPHPのソースを見る機会も多いわけですけど、そこにもやっぱり機能とデザイン(機能っていうのはちょっと変ですけど)があるような気がします。
どんなにすごいロジック(機能)を書いていても見づらい、読みづらい(デザイン)のはやはりどうかと思うわけです。
まあ、基本的にそういった裏の部分は見られることはほとんどないのでどうでもいいといえばどうでもいいのですが(汗)
WEBデザインの場合は、目に触れる事も多いですしこれよりももっと分かりやすいですよね。

つらつらと書き連ねてるだけなので何を書きたいのかだいぶ分からなくなってきましたが…。

また、WEBサイトをCMSでという形でお仕事させていただく事が多いですが、先に書いたような事をさらにマクロな視点で考えたりするわけです。
WEBサイトと管理ページのデザインや機能、それらを美しく機能的につなぎ合わせるということを追究していくことがこれから先も課題となっていくのかなと思います。

デザインや機能というのは最終的には見る人使う人によって好みやそれまでの環境に左右される部分も大いにあるはずですよね。
仕事をご依頼いただいたお客様、そのお客様のお客様…それだけでも感じ方は数えられない程になると思います。

機能とデザイン…わかりきったことかもですが、改めて奥が深いですね。

他の方のご意見とかも聞ければ嬉しいです♪

≪ 前へ 1 2 3 4 5 ... 7 次へ ≫ (33件中 6 - 10件を表示)

shape DESIGN - シェイプデザイン, 徳島県徳島市名東町, tel/fax 088-635-5859, 営業時間 平日10:00〜18:00

まずはお気軽にお問い合わせください
お問い合わせ・お見積り・ご相談はこちら
お気軽にご相談ください

徳島県徳島市名東町
tel/fax 088-635-5859
営業時間 平日 10:00〜18:00

※打ち合わせ等で不在の場合は、お電話でのお問い合わせに対応できない場合がありますので、ご了承ください。

フォームからのお問い合わせ

徳島・香川・愛媛・高知および大阪・京都を中心にご依頼を承ります。その他の地域でも、メール・お電話・FAX・Skype等での作業が可能であれば柔軟に対応いたします。

  • Become our fan on Facebook, facebook.com/shape.design