「WEB」カテゴリーアーカイブ

webに関する記事をまとめています。phpやwordpressが主。htmlやcssもやってます。

簡単画像公開! 自前のレンタルサーバーに「gyazo」を設置しよう!

gyazo、知ってますか? むっちゃ便利なんですよ、gyazo。

デスクトップに実行ファイルを置き、起動してスクリーンショットを取りたいところをドラッグすると画像がアップロード出来ちゃうのです。その後はtwitterで使うなり、ブログで利用するなり色々と活用できちゃいます。

今見てる自分の画面を他人に見せるのは、以外と手間がかかるものです。それにしては良くそういった場面に出くわすもの。このサービスはそんな私たちにとってまさに救世主ですよ。

ただ、他人のスペースにそのような画像を置くのって怖いし、自分のスペースに置きたいものですよね。gyazoはオープンソースで色々な人が手を入れております。解説記事も沢山ありますので設置は簡単ですよ! さくっと設置して軽快gyazoライフを堪能しましょう!

今回は「さくらインターネット|サーバーホスティングサービス」さんで設置した私の例で紹介しますよ。プランはスタンダードプラン。月々500円で軽快にwordpressも動作するのに初めてのサイト作成にはとってもお勧めですよ!

さくらのレンタルサーバでもGyazoる | おふろめ

ほとんどここを参考にさせてもらいました!ありがとうございます!

記事の通りupload.cgiをダウンロードしてきたら、内容を少し変更します。

File.open("data/#{hash}.png","w").print(imagedata)
↓
File.open("../#{hash}.png","w").print(imagedata)

と変更します。cgiファイルがある場所から一つ上の階層に保存するようになるわけですね。

「upload.cgi」が「cgi_bin」に入っていた場合は画像がこのように保存されていくようになります。好みで変更してください。

cgi.out(headers){"http://gyazo.com/#{hash}.png"} 
↓
cgi.out(headers){"http://hogehoge.com/#{hash}.png"}

あとは帰ってくるアドレスgyazoの物から自分のレンタルスペースのアドレスに変更してやるだけです。簡単!あとはこのcgiファイルをレンタルスペースにアップロードするだけです。ちなみにcgiファイルのパーミッションは700とかにしておきましょう。

[browser-shot width=”450″ url=”http://exe.tyo.ro/2012/02/gyazowingyazowin.html”]

gyazowin+を最新のgyazowinのソースとマージした – tyoro.exe

サーバー側の準備が終わったので次はクライアントを用意しますよ。さくっとzipファイルをダウンロードして解凍しましょう。

iniファイルの設定を変更していきますよ。

[gyazowin+]
upload_server=gyazo.com
upload_path=/upload.cgi

use_ssl=no
ssl_check_cert=yes

use_auth=no
auth_id=
auth_pw=

up_dialog=yes
copy_url=yes
copy_dialog=yes
open_browser=no

use_clipboard_base=no

内容はこんな感じ。うん、シンプル。

「upload_server」はアップロードするサーバーですね。今回の場合は自分のレンタルサーバの物に変更します。

「pload_path」はcgiファイルまでのパスですね。「gyazo」の中の、さらに「cgi_bin」の中に入っていたりしたら「/gyazo/cgi_bin/upload.cgi」とかになりますよ。

残りはとりあえずそのままで大丈夫です。保存してexeファイルを起動して適当な場所でドラッグしてみましょう!

こんな感じでスクリーンショットが取れちゃえばOKです! レッツgyazoライフ! イエーイ!

 

php – amazon_assie – アマゾンAPI利用アフェリエイトコード

コード

amazon_assieにアクセスキー、シークレットアクセスキー、アソシエイトID、検索キーワードを入れると正方形にして中心に向かってズームインした形の画像リンク配列を返す。

PHP:アマゾンAPI (AWS)で検索結果を表示 その3 – アダルトを除く | マイヤーの開発ブログさんのコードを拝借。ありがとうございます。

動作は艦これ画像まとめたった~のサイドバーを確認のこと。

//RFC3986形式でURLエンコードする関数
function urlencode_rfc3986($str) {
  return str_replace('%7E', '~', rawurlencode($str));
}

function amazon_assie($access, $secret, $Tag, $ama_keywords) {
  $access_key_id     = $access;
  $secret_access_key = $secret;
  $AssociateTag      = $Tag;
  for($i = 1; $i <= 3; $i++) { //2ページ取得、ItemSearchの最大値は10まで
    $baseurl                  = 'http://ecs.amazonaws.jp/onca/xml';
    $params                   = array();
    $params['Service']        = 'AWSECommerceService';
    $params['AWSAccessKeyId'] = $access_key_id;
    $params['Version']        = '2011-08-01';
    $params['Operation']      = 'ItemSearch'; //商品名や著者名でキーワード検索
    $params['SearchIndex']    = 'All';
    $params['Keywords']       = $ama_keywords; //検索ワードを指定
    $params['AssociateTag']   = $AssociateTag;
    $params['ResponseGroup']  = 'Medium';
    $params['Condition']      = 'All'; //中古品も含める
    $params['ItemPage']       = $i; //何ページ目か
    //Timestamp パラメータを追加します
    //-時間の表記は ISO8601 形式、タイムゾーンは UTC(GMT)
    $params['Timestamp'] = gmdate('Y-m-dTH:i:sZ');
    //パラメータの順序を昇順に並び替えます
    ksort($params);
    //canonical string を作成します
    $canonical_string = '';
    foreach($params as $k => $v) {
      $canonical_string .= '&' . urlencode_rfc3986($k) . '=' . urlencode_rfc3986($v);
    }
    $canonical_string = substr($canonical_string, 1);
    //署名を作成します
    //-規定の文字列フォーマットを作成
    //-HMAC-SHA256を計算
    //-BASE64エンコード
    $parsed_url     = parse_url($baseurl);
    $string_to_sign = "GETn{$parsed_url['host']}n{$parsed_url['path']}n{$canonical_string}";
    $signature      = base64_encode(hash_hmac('sha256', $string_to_sign, $secret_access_key, true));
    //URLを作成します
    //-リクエストの末尾に署名を追加
    $url        = $baseurl . '?' . $canonical_string . '&Signature=' . urlencode_rfc3986($signature);
    $amazon_xml = simplexml_load_string(@file_get_contents($url));
    //  print_r($amazon_xml);
    foreach((object)$amazon_xml->Items->Item as $item_a => $item) {
      //アダルト対策
      $adult_dvd = $item->ItemAttributes->Format; //「アダルト」の文字
      $adult_toy = $item->ItemAttributes->IsAdultProduct; //アダルトなら「1」
      if(strpos($adult_dvd, 'アダルト') !== false) {
        continue;
      } elseif(strpos($adult_toy, '1') !== false) {
        continue;
      } elseif($item->LargeImage->URL == "") {
        continue;
      } else {
        $detail  = $item->DetailPageURL; //商品のURL
        $image_w = $item->LargeImage->Width; //画像の幅
        $image_h = $item->LargeImage->Height; //画像の高さ
        if($image_h > 250) {
          $image_h_p = $image_w / $image_h;
          $image_h_e = floor((($image_h_p * $image_h) - 250) / 2);
        }
        $image       = str_replace(".jpg", "._SX260_CR5,{$image_h_e},250,250_.jpg", $item->LargeImage->URL); //画像のURL
        $aferi_box[] = '<div class="amazonbox"><a href="' . $detail . '" target="_blank"><img src="' . $image . '" align="left" /></a></div><br />';
      }
    }

    //  print_r($aferi_box);";
    return $aferi_box;
  }
}

css – Text-Shadowによる文字デザインのカスタマイズ記事まとめ part1

CSSカスタマイズによる文字装飾の記事は各所で上がりますが、後々探すのが大変なので自分のためにもよく使わせて貰う記事をまとめます。


Using CSS Text-Shadow to Create Cool Text Effects

Using CSS Text-Shadow to Create Cool Text Effects
he CSS3 text-shadow property has been around for some time now and is commonly used to recreate Phot …


css3のtext-shadowによるテキスト装飾のサンプル集 – かちびと.net

css3のtext-shadowによるテキスト装飾のサンプル集 – かちびと.net
たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピッ …


自由自在!CSS3のtext-shadowを使ってをロゴ作ってみる|Webpark

自由自在!CSS3のtext-shadowを使ってをロゴ作ってみる|Webpark
CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。 text-shadowの基本的な使い方はこのようになります。 …


text-shadowサンプル – unpco

[CSS3]text-shadowサンプル – unpco
今回はよく使うCSS3のtext-shadowの小技を紹介しますよ。 気に入ったのをコピペで使ってください。 IEは適応外なので、この内容は他のブラウザで見てください。IE10は採用されるらしいです …


コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス

[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス
画像は無し、数行のスタイルシートを加えるだけでテキストにさまざまなスタイルを与えるデモを紹介します。 …


エレガントからレトロまで、text-shadowを使った美しいエフェクト集 | コリス

[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集 | コリス
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 …

一太郎で改ページを行うショートカットキー

絶賛一太郎おさわり中です。サー。

他のエディタでは割と簡単に行える改ページですが、一太郎ではパット見分からないのでメモしておきますね!

こんな感じですね。

通常操作ではメニューから

挿入(I)>記号/リーダ/スペース(K)>改ページ(P)

で行います。結構奥にあります。

ショートカットキーは、

Ctrl+Y

です。

簡単改ページ!

一太郎で三段組み文章を作成する方法

わたくし、一太郎大好きです。文章の「ゆらぎ」や「誤字」なども的確に指摘してくれるしストレスフリーで文章に集中できるのが素敵!

今回はそんな一太郎さんで三段組み文章を作成する方法をまとめますわですわ。

バージョンは10ですが、基本的には同じ操作になるかと思います。

初期文章作成ではこんな感じ。普通ですね。

次に上部のメニューから、書式>段組>設定 とクリックします。

三段を選択すると、

無事三段組みが設定されました。

ただ、これでは三段それぞれの合間が近すぎる気もしますね。

さっきと同じように、、書式>段組>オプションとすると、

こんな感じの画面になります。あとはなんとなくわかると思います。

あとは簡単にスタイルを設定してこんな感じのレイアウトになりました! 是非とも色々とカスタマイズしてみてくださいな。

IEの対応なんてハナっからする気なし!「ie-owakon」で楽々と他ブラウザへ誘導

コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました | SANOGRAPHIX

IE向けにページを組むのは結構大変です! IE7までCSSがまともに使えない上に未だにIE6がうようよいやがるぜ!!!

とまあ、今ではtwitterですらちょっと前のIEで閲覧すると表示が崩れます。そろそろIEから乗り換えちゃいなよべいべー!! という感じで、IEの対応を最初からする気がないページを私もいくつか作ってきました。

さすがにこのブログではやっておりませんが、aoringo toolsで取り扱っているwebツールではIE8以下で閲覧すると警告が出たりします。

その警告の元が上記サイト様。オワコンちゃんかわいい!! イラストをそのまま載せるのはなんとなくはばかられたので置いてませんが、かわいいんだよね、オワコンちゃん。

デモページは↓

IEはオワコン!

IE以外のブラウザで見るとただの文字列ですが、IEで見ると、

オワコンちゃんが出てきます! かわいい!

ソースはリンク先で配布されていますが、IE10では「 <!–[if IE]>」が仕様変更でただのコメントとして扱われるようになりまともに動作しません。

なのでメタタグに

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

を追加する事によってIE9のシミュレーションをして表示させることができます。

IE10はCSSとかもある程度できるのでIE10までオワコンする必要はないと思うのですけれど、皿まで憎い人はやっぱりいるわけですよね!!

ちなみに私は特に気にせず実装しちゃう畑なんでわりとどうでもいいです!

プロの描く背景がフリーで利用できる「Manga-Website 漫画街 マンガ工房」

完全無料WEBマンガサイト[漫画街]オリジナルマンガ続々配信中!!

::::::Manga-Website 漫画街::::::にて配布されております。

かなり緻密に描写されている風景は「自作の漫画作成」に限られていますがフリーで利用する事ができます。汎用性も高く、この背景素材だけで漫画一本補えそうです。

CSSでサイトの印刷範囲を指定する

後で印刷して自分で読んだりする場合。余計な部分がついてきて無駄に紙を使うのは勿体ないし、そんな不便を万が一見ている人にさせるのは忍びない。

というわけでCSSでささっと掃除します。

今の状況はこんな感じ。

ツイートボタンとかがまあ、邪魔ですが、印刷する分にはこれぐらいどうってことない・・・んですが、ページをめくっていくと。

こうなっているわけですよ。邪魔ですよね。ページ、嵩みますよね。

印刷範囲を指定するcssを以下の通り。

@media print{
  #head{display:none;}
}

印刷する場合のそれぞれのCSS要素をここで指定してあげれば、かなりキレイになります。

すっきりかっちり。

/*印刷範囲指定*/
@media print{
  #zenback_loady{display:none;}
  #zenback{display:none;}
  #comments{display:none;}
  #site-description{display:none;}
  .menu{display:none;}
  .googlead{display:none;}
  #breadcrumb{display:none;}
  #side{display:none;}
  .social4i{display:none;}
  #main{width:100%; float:none;}
}

最終的な形はこういう感じになりました。コメント欄や、広告の表示を消して、メインを全体的に表示できるように。

これで印刷するときも気をつけなくても良くなりましたね。やったぜ!