投稿日:

複数のバージョンのXCodeを共存させる方法

Xcode

今回はXCode4.4.1とXcode4.5.1を共存させる方法について書きます。（4.3以降でしたら同様のやり方でやれるそうです。）

簡単に手順をまとめると既存のXCodeをリネーム→appledeveloperからXcode4.5.1のdmgをダウンロード→dmgを解凍→解凍したXcodeをアプリケーション内にドラッグアンドドロップという感じです。

それでは詳しく見ていきましょう。

まずはファインダーでアプリケーションにアクセスします。そこでXCodeを右クリックして、情報をみる->名前と拡張子でXCode4.4.1などお好きな名前にリネームします。

次にappledeveloperのサイトhttps://developer.apple.com/downloads/index.actionにアクセスしてログインします。そしてXCode4.5.1のdmgファイルをダウンロードします。

ダウンロードをしたものを解凍すると新しいウィンドウでXCodeが出現すると思うのでそのXCodeをアプリケーション内にドラッグアンドドロップします。

しばらく待つとインストールが完了するのでクリックして開きます。これで共存ができました！！！

またプロジェクトファイルをダブルクリックしたときにデフォルトで開くXCodeのバージョンを指定したい場合は、なんでもよいのでプロジェクトファイルを右クリックして情報を見るのこのアプリケーションで開くでお好きなバージョンを選び、その下の同じ種類の書類はすべてこのアプリケーションで開きます。の下のすべてを変更を適用すると指定できます。
このときの注意としてはXcodeをすべて閉じてから設定の変更を行いましょう。さもばくば設定の変更がうまく行われません。

  • OS10.8.5です。こちらを参考に複数のXcodeを共存させておりましたが、ソフトウェア・アップデート…が全てのXcodeを最新版に更新しようとします。うっかりアップデートを実行したら全部Xcode5.0になってしまいました。(泣)アップデート対象外にする方法はないものでしょうか？ — T.N {2013-10-03 (木) 16:19:33}
投稿日:

背景が動画で全画面のページの作り方

Webサイト作成 TIPS

背景が動画で全画面のページの作り方　サンプルコード

最近ちらほら見かけますね。背景が動画で、モニターの全部に広がっているやつです。

例）
http://www.theqcamera.com/

今年はこれがはやるのでは、と言われています。

ちょいちょいいろんなサイトを拝見しながら、私なりにわかりやすいサンプルコードを作りましたので、載せておきます。

Firefox, Chrome, IE11で大丈夫です。

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>背景が動画で全画面のサンプルサイト</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
 <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
 <style>
 div.dotpattern {
 	width:100%;
 	height:100%;
 	background-image:url(images/dot.gif);
 	position:fixed;
 	top:0;
 	left:0;
 	z-index:2;
 }
 video#sample-video {
 	position:absolute;
 	left: 0;
 	top: 0;
 	z-index:1;
 }
 .message {
 	position:absolute;
 	left:200px;
 	top:100px;
 	color:white;
 	z-index:3;
 	font-size:72px;
 	font-family: 'Oxygen', sans-serif;
 	font-weight:bold;
 }
 .message_small {
 	position:absolute;
 	left:200px;
 	top:200px;
 	color:white;
 	z-index:3;
 	font-size:14px;
 	font-family: 'Oxygen', sans-serif;
 }
 </style>
 <script>
 $(function(){
 
  var h = screen.height * 1.1;
 
  $("video#sample-video").attr("height", h);
 
  });
 </script>
 </head>
 <body>
 <div class="dotpattern"></div>
 <video id="sample-video" autoplay>
   <source src='sea.ogv' type='video/ogg; codecs="theora, vorbis"'>
   <source src='sea.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
 </video>
 <div class="message"> Nice sea shore! </div>
 <div class="message_small"> They are very funny and dangerous guys.<br />
  So one of them is buried.<br />
 </div>
 </body>
 </html>

実物のページはこちら。
もっとましなサンプル動画はなかったのか！というつっこみもありそうですね。。。
http://onlineconsultant.tv/test/movie_bg_test/

ちなみに、私がはまったポイントは、HTMLでもCSSでもなかったです。

動画の上下に黒い帯が入ってしまっていたんですが、Any Video Converter Ultimateというソフトでmp4やoggの形式にコンバートする時に、縦横比がおかしかったので、その分黒い帯が入ってしまっていたんですね。

投稿日:

画面表示をキャプチャする方法

Windows 便利な使い方

画面表示をキャプチャする方法

1.キーボード上の「Print Screen」キーを押します。
2.現在の画面イメージがクリップボードに保存されます。
3.〔スタート〕ボタンをクリックし、〔プログラム〕、〔アクセサリ〕の順にマウスポインタを合わせ、〔ペイント〕をクリックします。
4.ペイントが起動したら、〔編集〕メニューの〔貼り付け〕をクリックします。
5.「Print Screen」キーを押したときの画面のイメージが、ペイント編集画面に貼り付けられます。
6.印刷したい場合は、〔ファイル〕メニューの〔印刷〕をクリックします。
7.保存したい場合は、〔ファイル〕メニューの〔名前を付けて保存〕をクリックします。

※「ALT」+「Print Screen」キーで、アクティブになっているウインドウ（一番上のウインドウ）のみハードコピーができます。
※画面のハードコピーするには、「アクセサリ」の中の「ペイント」を使用すると便利です。
FrontPage

投稿日:

画像のすき間が空いてしまう

Webサイト作成 トラブル
css

ホームページ作成時、画像と画像をつめて表示したいのに、すきまが空いてしまう。

Web作成

 <img>タグと次の<img>タグの間にスペースや改行が入っていませんか？
 それらを消してみましょう。

　InternetExplolerだとすき間無く表示されるのに、他のブラウザ（FireFoxなど）だと空いてしまう。

Photoshopなどの画像ソフトなどでWebを作る時、画像ソフトがHTMLを出力してくれる便利な機能がありますが、Table（表形式）で出力されると、IE以外だと画像とtableの間にすき間が空いてしまうことがあります。
次の二つの方法で治りますが、最良の方法かどうか分かりません。

  • imgのスタイルをdesplay:block;などとして、ブロック要素に指定する
  • スタイルのvertical-align:bottomなどで、下詰めにする
  • DOCTYPEの宣言を互換モードに変えてしまう。（逃げ？）

また、全角のスペースなどが入っていることもあります。
Dreamweaverだと発見できないので、このせいだと発見が遅れてしまいますね。テキストエディタなどでHTMLソースを見てみましょう。

  • Photoshopから画像とHTMLを作成したところ、IE7だけ画像の間に隙間があいてしまい、困ってました。imgのスタイルをdesplay:block;にして確かに治りました。 — 名無し {2008-03-16 (日) 17:01:01}