"

windows7でAirplayをしよう!

MISSION:iPhoneの画面をPCで表示させる

今回はAppleTVで有名なiPhoneの画面をPC上で表示させたり、音楽をPC上で再生できるようにするソフトを探していきます。

  1. Airplayのイメージ解説
  2. 有名有料ソフト:AirServer
  3. 有名有料ソフト:Reflector
  4. ???5kplayer
  5. KODI(旧XBMC)

Airplayのイメージ

インターネットと言われてるものは実は、世界(WAN)とローカル(LAN)に分かれていまして、NTTの機械を見てみるとほぼ必ずWANとLANの指し口があると思います。

普通、自宅に何台もPCがあってもネットサーフィンというか、検索や動画の閲覧のときにはLANを意識しないで各PCとWANでやりとりしているんですが、

AirplayはそのLANの中で動画や音声のデータのやりとりをします。

基本的には無線ルータを使ってwi-fi(ワイファイ)の環境があり、そのルータとPCがつながっている(有線無線問わず)のが原則です。

ルータによっては無線→有線しかやり取りできないものや、そもそもやりとりができないものもあるので注意が必要です。

保護中: YOUTUBEゲーム実況埋め込みページ pwd:0000

このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。

YOUTUBE動画のアップロードにかかる時間について

動画を作成したときに、どうも時間のかかる設定やファイルサイズが大きくてもサクッとアップできる動画があったりということがあったので調べました。

アップロード時間の短縮方法について

動画のアップロードに時間がかかる、またはアップロード処理が進まないときのヒント

ということで、

1.ファイル形式とサイズ
2.インターネットが遅い
3.YOUTUBEが混雑してる

ということが一般的にあるようで、3はもうスルーします。

2.インターネットが遅い

これに関しては、解決法ではなくてチェックポイントだけを羅列していきますね。

  • 回線自体がもともと遅い
  • 無線LANのスピードが遅い
  • Wi-fiのスピードがもともと遅い・速度制限がかかっている
  • PCの本体のLANが古くて遅いLANである
  • PCの処理が重すぎてファイルを送信するのが遅い

こんなところでしょうか。マンションタイプなどでは混雑したりすることもあるなんて噂もきいてます。wi-fiに関してはその先が4Gだと光ファイバーより遅くて当たり前ですし。自宅の環境を調べてみてください。

1.ファイル形式とサイズ

こちらが今回のメインのお話です。

推奨のエンコード設定というものがあります。

動画って実は全世界で作られたのか、ものすごく細かいところがいろいろあって、特に「mp4・mpeg4」というやつはざっくりとまとめられただけで、中身的にはかなり細かい分類があります。

が、ややこしい説明はいらないと思いますので、2015.08.09現在の推奨設定をまとめていきます。

  1. ファイル名(拡張子) : 「.mp4」がベスト
  2. 音声の種類 : 「AAC-LC」完全一致しないときは「AAC」を選べば大丈夫でしょう。
  3. ステレオ・サンプルレート : 5.1chまでのステレオで、レートは48kHz(48000Hz)とありますがCDが44.1kHz(44100Hz)なのでそれでいいと思います。
  4. ビットレート(音声) : 256kbpsでいいと思うけど、推奨は384kbps
  5. 動画コーデック : 「H.264」意味はさっぱりわかりません
  6. フレームレート : 「29.7fps」「30fps」「60fps」が一般的。「30fps」で十分なめらかでいいと思います。
  7. ビットレート(映像) :1秒間のビットの数(解像度だと思えばいいですかね)なので、動画の縦横のサイズによって変わります。
    1080p(縦が1080pxの動画):8,000bps~12,000bps
    720p(縦が720pxの動画):5,000bps~7,500bps
    480p(縦が480opxの動画):2,500bps~4,000bps
  8. アスペクト比 : 16:9を推奨

こんなところでしょうか。

一旦、動画をドラッグしてアップロードを始めると、「アップロ-ドが終わるまではこのページを閉じないでください」というようなアナウンスが出て、PCを落としたりができなくなってしまうので、なるべくYOUTUBE側で処理が楽なようなファイルにするのをオススメします。

スタイルシートの便利なセレクタ :nthシリーズ!

MISSION:CSSの便利なセレクタを3紹介すること

いつからかは調べてないのでわかりませんが、とても便利なセレクタがありましたのでご紹介します。
ちなみにセレクタというのは、

section#sukinanamae h1 {
   font-size:30px;
   border-bottom:1px solid #cccccc;
   padding:16px 20px;
}

「section#sukinanamae h1」の部分です。今回は以下の3つだけ紹介します。

  1. :first-child
  2. :nth-child(n)
  3. :nth-of-type(n)
例文
<div>
  <p>オススメの画像</p>
  <img src="画像1">
  <p>オススメの画像2</p>
  <img src="画像2">
  <img src="画像3">
  <img src="画像4">
  <img src="画像5">
</div>

:first-child

div img:first-child {border-color:blue;}

直訳:divの中のimgの1つめ、ボーダーを青にしてください。

:nth-child(n)

div img:nth-child(2n+1){ border-color:red;}

直訳:divの中のimgの奇数番目、ボーダーを赤にしてください。
nth-child(1)とfirst-childは同じものを指しますね。

:nth-of-type(n)

div img:nth-of-type(2n+1){ border-color:black;}

直訳:divの中のimgの奇数番目、ボーダーを黒にしてください。
ちなみに、2n+1が奇数で2nが偶数というのは中学か高校で習っていると思いますので…

さて、あれ?おかしいな?と思っていただけたでしょうか!というわけで次で説明しますね。

nth-childとnth-of-typeの違い

この二つの違いは、

何番目なのかを数えるときに自分と違うものを含んで数えるかどうか

なんです。つまりは、さっきの例文でいきますと、

どちらもimgの奇数番目を対象にしていますので、画像1は確実に色が変わります。

nth-childはタイプの指定をしていないものになるので、
子要素はすべてカウントします。この場合はpをカウントして画像2と画像4の色が変わるはずです。

nth-of-typeはその名の通りタイプ(=img)を指定しているので、画像3と画像5の色が変わるはず。という感じです。

最後に

以前のCSSでは、表の色分けなどで最初の行のmargin-topなど用のクラス、奇数行用のクラス、偶数用のクラス、最終行のmargin-bottom用のクラスというように無駄な記述をして、更新の際もコピペして変なマージンが入るなど、意図しない挙動をさせて余計な手間がかかってましたが、今回紹介したようなセレクタを利用すれば、作成も更新も両方が簡単かつわかりやすいものにできるようになりました。

first-childに対してlast-childなどもありますし。少し調べるのもいいと思います。

また、最後の2つは紛らわしいのでそういう2種類の指定があるということだけ覚えておいて、使う時に調べるのもいいかと思います!

フレキシブルボックスを使おう!

jQueryを使わずにCSSだけで、横並びの要素を表示させていきたい。

今回は見た目的にもスタンダードになっているフレキシブルボックスの使い方とハマリについて書いていきます。

MISSION:display:flex;の使い方を5つに分けて書くこと。

まだ微妙に書くブラウザが対応しきれていないこのCSSはデザイン的にはとっくにスタンダードになっていまして。

以前に書きました「WordPressでグリッドレイアウトデザイン!」の記事でやったようなjQueryを使って表現することが多かったのですが、ようやく標準っぽく使えるようになったので紹介します。以前の情報は詳しく調べたわけではないので、ニュアンスで読んでくださいませ。

  1. いままでの表現方法
  2. display:flex;になるまでの簡単な流れ
  3. 基本的な使い方
  4. iOSのサファリで動かない!
  5. 最後に

1.いままでの表現方法

とりあえず、いままで横並びにするために散々苦労してきた歴史があるのでご紹介。そして、それを利用しているサイトは技術的にそこまで新しいものでは「ない!」ということに気付いていただきたい。(以前に作ってリニューアルあれてないものはそりゃしかたないですよね)

その1 float:left;

こいつの使いづらさは半端じゃありませんでした(笑)
clear:both;と書かれた要素に辿りつくまでひたすら横に並べ続け、width,height,margin,paddingすべてがブラウザによって挙動が分かれ・・・改行のポイントがぐちゃぐちゃになり・・・悪夢です。二度と使いたくありません。

その2 display:inline-block;

こちらはまぁ、最近追加された方のCSSですね。良いところもいっぱいあります。inline要素とblock要素(この2つの言葉はもう使わないですが)のいいとこどりでした。

一番嬉しいのはinlineの要素にwidthやheightの指定ができるのに基本的にblock要素のような改行はしない。というところでした。

この2つを経てflexが誕生した様子。

2.display:flex;になるまでの簡単な流れ

flexという言葉になる前に同じ効果を得るためのCSSが浮かんでは消え・・・という流れがありました。いまでも古いブラウザに対応するために応用する必要があるかもしれません。

その1 display:box;

たしか、前述のinline-blockと同時期ぐらいにあった気がするのですが、未対応ブラウザが多かったため当時は調べもしませんでした。

その2 display:flexbox;

気を取り直して作られたのがこれだと思います。基本的に-webkit-などのベンダープレックスが邪魔に見えてたのと、inline-blockが安心便利だったので使いませんでした。

この2つを経てdisplay:flexが出てきた感じです。

3.基本的な使い方

基本的な使い方はものすごく簡単です。メニューを横に並べたいときを例にしてみます。

HTML5の内容 -----
<header>
  <h1>タイトル</h1>
  <ul class="yokonarabe">
    <li>HOME</li>
    <li>PROFILE</li>
    <li>CONTACT</li>
  </ul>
</header>

CSSの内容 -----
.yokonarabe {
  display:flex;
  flex-wrap:wrap;
}
(さらに任意で)
.yokonarabe li {
 width:90px; 
}

こんな感じのHTML&CSSを書いたらほぼすべてのブラウザで横並びのメニューが表現できたと思います。

display:flex;を横に並べたいliの親につけるのがポイントです。
このflexは設定した要素の子すべてに対して適用されますので、思ったように動かないときは何に設定したのかを最初に確認したら良いと思います。

flex-wrap:wrap;は折り返しの設定です。ulをはみ出してでも表示するのか、改行して表示するのか。レスポンシブデザインなら間違いなくwrapかなと思います。

li {width:90px;}としてメニューの各項目の長さを指定しましたが、ここでは書かないプロパティなどを指定するとwidthを自動で調整してくれたりします。

まだまだ、flexには設定できる項目がたくさんあるので、いろいろと調べてみてください。

4.iOSのサファリで動かない!

さて、恒例のハマりのコーナーですが、ちょっとびっくりして調べました。

IEやアンドロイドで動かないことがあるのではと思っていましたが(完全に偏見ですが)まさかのiPhoneで正常動作しませんでした。このページで画像をフレキシブルに表現したかったんですが・・・

調べたところ、iPhoneではまったくもって対応してないとのことで画像がただひたすら縦にならんでおりました。

.yokonarabe {
  display:-webkit-flex; ←この1行を追加
  display:flex;
  flex-wrap:wrap;
}

これで、いけると思ったら横には並んだが、今度は横幅に1行で納まるように重なりまくっておりました。

flex-wrapも無視。もちろんliにつけてたwidthも無視されておりました(笑)

.yokonarabe {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-flow:row wrap; ←さらにこの1行を追加
  flex-wrap:wrap;
}

これで、ようやくPCと同じ並びになりました。めでたしめでたし。

5.最後に

display: flex;はいままでに紆余曲折あったせいか、まだちょっと捻くれている感じがあります。
しかし、現状の表現ではデファクトスタンダードとしてしっかり使い方を覚えたほうが良いと思います。

また、ネット上にある説明やここと同じように解説をしているところがたくさんありますが、いつ書かれた記事なのかが命運を分けてきます。
必ず、いつの情報なのかを確認してくださいませ。

ちなみにこの記事は2015年4月18日の情報です。

Unity5を起動する!

Unity5 Personal Editionの初回起動の軌跡を書いていきます。

スマートフォンやiPhone用のアプリが作れてしまうツール:Unity5のインストールは前回やりましたが、

今回はその初回起動の流れを追ってみます。

MISSION:最初の起動を記録すること。

今回はすべてのページを表示する方向で進みます。

第1節:ライセンスの確認

WS000003

ここでは有料か無料かきいてくる感じですね。焦らずに「Personal Edition」にチェックをした後、I Agree的なところにもチェックして「OK」です。

第2節:eMailとpwdの入力、もしくは新規アカウントの作成

WS000004

アカウントを持っている人はメールアドレスとパスワードを入力してOK

持っていない人は「Create Account」をクリックします。

第3節:新規Unityアカウントの作成

WS000005

名前・メールアドレス・パスワード・パスワードの確認の4項目を入力し

チェックボックスにチェックを入れてプライバシーポリシー等に同意してOKをクリック

すると、第2節の画面に戻ります。

パスワードは3つの制約があるようす。

  1. 英語の大文字と小文字の両方を入れる
  2. 数字を入れる
  3. 文字数の長さ

第4節:確認のeMailをチェックしてアカウントを有効化

WS000006

 

メールに気付かずにアカウント情報を入力するとエラーで「確認メールを見てクリックするように」と催促されます。

第5節:Unityを利用する趣旨などのアンケートに返答

WS000007

 

和約はフィーリングなので気をつけてください(笑)

  1. Country of residence : Japan
  2. In what capacity do you primarily use Unity? : どんなとき使うの?
    ・仕事で
    ・趣味で
    ・学生なんで授業で
    ・先生なんで授業で
  3. How would you categorize yourself? : あなたはどの分類の人なの?
    ・アーティスト
    ・デザイナー
    ・プログラマー
    ・サウンド デザイナー
    ・プロデューサーとかプロダクトマネージャーとか会社系
    ・その他
  4. How would you rate your Unity skills? : Unity使える人?
    ・いままでUnityに触れたことないよ
    ・初心者だよ
    ・中級者だよ
    ・上級者だよ
  5. What is the team size for most of your projects (numbers only)? : 何人でやってんの?
    数字のみの記述です。
  6. Platforms of interest : 何用に使うの?
    ここは省略
  7. What type of content do you primarily plan to develop with Unity? : 何を作る予定なの?
    ・Games : ゲーム
    ・Architectural visualizations : 建築系
    ・CAD/technical visualizations : CAD
    ・Medical simulations : 医療のシミュレーション
    ・Military simulations : 軍事シミュレーション
    ・Research projects : 研究プロジェクト
    ・Content for use in teaching/training : 教育やトレーニングで使うコンテンツ
    ・Educational content/tutorials : チュートリアルや教育のコンテンツ
    ・Media production/movies : 映画やメディアの製作
    ・Projects for the advertising industry :広告業界
    ・Art installations : 美術的利用
    ・Gambling applications  : ギャンブルアプリ

第6節:完了→さぁ、はじめましょうか

WS000008

 

「Start using Unity」をクリックしてスタートです。

WS000009

スタート画面になりました。

Unity5のインストール!for Windows7

今回は突然ですがiPhone&アンドロイドアプリが作れるUnity5をインストールしてみます。

MISSION:Unity5無料版をダウンロード&インストールすること。

Unity5とは、アプリの統合開発環境ということしか知らない現在。

そして、アプリを作るのにいろいろな言語を利用できるが、フリーのソフトからiPhoneとAndoroidの両方に吐き出せるのは種類が少ないとのこと。

またUNITY4では有償だった機能の一部もUNITY5無料版で使えるとのこと。

UNITY5 Personal Edition(無料版)のダウンロード・インストール方法

http://unity3d.com/jp/get-unity/download?ref=personal このURLからダウンロードします。

WS000002

  1. 「インストーラをダウンロード」をクリックすると「UnityDownloadAssistant.exe」がダウンロードされましたので即実行。
    WS000003
  2. 「NEXT→I Agree」という感じで進むと、「コンポーネント選んでよ」って言われるのでデフォルトで「NEXT」
    WS000004
  3. 次はさらにわかりませんが、上段はデバッグに使う一時ファイルの場所で、下段がソフトのインストール場所かと思います。またデフォルトのままで「Install」します。
    WS000006
  4. しばし待ちます。(4GB超えるので重いですね)
    WS000007
  5. 「Finish」で完了です。超簡単でした。
    WS000009

 

PageSpeed Insightsを使ってサイトのパフォーマンスを軽く!

面倒なのは嫌だけど、サイトパフォーマンスを上げればGoogleさんの評価も上がるはず。

サイトの広告主である「Google AdSense」さんから「サイトのパフォーマンスが悪い」とのご指摘がありました。

MISSION:簡単かつ手軽にサイトのパフォーマンスを上げること。

今回は以下の3つに分けて書いていきます。

  1. PageSpeed Insightsとは
  2. サイトパフォーマンスの改善点の確認
  3. gzip圧縮の利用方法

PageSpeed Insightsとは

ご指摘の内容を確認しようとすると下記の「PageSpeed Insights」のサイトに飛ばされて、勝手にトップページの検証が始まりました。以下の画像のリンク先で直接URLを入力してもチェックができます。

このサイトはスピードチェックではなくて、サイトのソースそのものを細かくチェックして改善点を指摘してくれます。

もちろん実現不可能なものも表示されます(笑)

サイトパフォーマンスの改善点の確認

結果はモバイルとPCの2種類のタブで区切られて表示されていました。

WS000001

 

なかなか良い点が取れてます(笑)

しかし、これに辿りつくまでには低い点数から改善点をよく読んで地道に解決するしかなかったです。

速度・ユーザビリティ(ユーザーエクスペリエンス)などの観点から評価してくれて、それぞれ提案・修正が必要なもの・どのソースをどう改善するとどのくらい良くなるのかをサクッと表示してくれます。

ワードプレスを使っているとどうしても修正しづらい「テーマ」の中のjQueryや、CSSを改善せよ!とか画像のサイズを小さくせよ!とか言ってきますが、面倒です。

そんな中で見つけたのが次の項目「サーバ側でソースを圧縮したらいいよ」です。

gzip圧縮の利用方法

まず、gzipってなんぞや?

ってところは省略します。zipって文字が入ってるし圧縮後のファイル名なんだなーってところでおさえてください。サーバ関連ではよく聞く拡張子です。

htmlやcssの圧縮とはなんぞや?

まず結果は圧縮なのでファイルサイズが小さくなるのは明白です。

イメージでは、余分なスペース、改行を削除、<div>は「d」に変換して文字数も減らすみたいなことをやるんでしょうかね。詳しくはわかりません。というか調べません(笑)

htmlからgzipへの圧縮・変換方法

フリーウェアなどで自分のPC上で変換することはできそうだ。

とは思いますが、ファイルを作るたびにそんな手間をかけるのは嫌だし、サーバでよく聞く言葉ということはサーバ側でうまいことできないだろうかとしらべましたところ、ありました。

サーバーの命令文を書く「.htaccess」(ドットエイチティーアクセス)に記述してサーバーにアップするだけ。

うちはさくらインターネットを利用しているので、この記事でクリアできました。

自分のサイトのルートに「.htaccess」ファイルを作成して以下の記述をします。

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnv force-gzip

2行目:画像ファイルはgzip圧縮を行わない設定
3行目:さくらインターネット用

こんな感じです。ちなみに「/」が反対を向いてるやつは「バックスラッシュ」といってwindowsでは(半角の)¥マークになります。

これで、ファイルサイズは軽くなって、サイトのパフォーマンスは大幅に改善されました。めでたしめでたし。

サーバーサイドでgzip圧縮の最後に

ただし、サーバー側で何かさせる以上、サーバーに負荷をかけていることになります。

そのためレンタルサーバーの仕様や料金プランによっては利用できない場合もありそうです。
mod_deflate」モジュールとかいう設定や、実際にgzipを使うしかないところもあるかもしれませんので、要確認です。

さくらインターネットでも非公式だけど今のところ使えるとのことで助かりました。

border-radiusで簡単!角丸四角形

今回はとても簡単だけど、昔からのサイトを知ってる人はびっくりするborder-radiusというCSSを使った角丸四角形の作り方を紹介します。

MISSON:角丸四角形のプロパティを覚えて設定する。

手順は必要ありません。今回は各記事のh1が含まれてる<header class=”entry-header”>に適用したいと思います。うちの環境では背景色も一緒に指定しています。

.entry-header {
 background:#fcdddd;
 padding:16px;
 border-radius:14px;
}

これだけです。

border-radiusの設定内容

border-radiusは4つの角の曲がり具合をpxで指定します。
今回の「14px」というのは省略形で本当の形は・・・

border-radius:14px 14px 14px 14px;

となります。4つの数字は他のCSSと同じく時計回りになっていて「左上 右上 右下 左下」になっています。この順序は試せばすぐにわかるので、無理に覚える必要はないと思われます。

「CSSは基本的には時計回り」だけ覚えておけば十分でしょ。

border-radiusの適用される範囲

範囲という日本語は微妙ですが・・・

その名前の通り、borderです。つまり枠線です。が、背景は枠線の中に塗られるのでborderを指定しなくても背景が嬉しくなるくらい角丸になります。

borderの値を指定して背景なしで枠線だけで囲むことももちろんできます。

角丸をかっこよく見せるコツ

これは、ズバリpaddingだと思います。角丸の曲がり具合も大事ですが、中身とのスペース=paddingが大事です。

慣れなのか、デザインに対する目が鍛えられてかどちらかで良いものがつくれるはず。

いろいろ試してみてピン!とくるものを見つけてくださいませ。

 

 

 

WinShotでシステムリソースが足りない!スクリーンショットが撮れない!!

今回はスクリーンショットが撮れなかった事象とその解決方法を書きます。

MISSION:スクリーンショットが撮れないことに気付いたところから、撮れるようになったところまで、3つのポイントに分けて書く。

  1. いつの間にかキーボードのスクリーンショットボタンが反応しない
  2. Winshotを導入することにした
  3. 「システムリソースが足りません」のエラーが出てスクリーンショットが撮れない

いつの頃からかわからないが、スクリーンショットを押しても反応がない・・・ペーストしてもなにも出てこない・・・

「スクリーンショット 撮れない」などで調べるとすぐに怪しい答えに辿りつきました。

どうやらTVなどの著作権がありそうなものをPCで見れる機能があるとプリントスクリーンを拒否される様子。
他にも現象が出ることがあるようだが、PCにはTVのソフトが入っているので「これだ!」となりまして、

「スクリーンショット フリーソフト」などで検索した結果

WinShotを導入することにした

そして、WinShotというソフトが簡単でよろしいと書いてあったので、うのみにして探しました。

上記の「窓の社」からダウンロードした.exeファイルをすぐさま実行すると、変なソフトのインストールもなく、3回ぐらいOKするとすんなり簡単にインストール完了。 しかし。

WinShotの使い方がわからない。

というわけで、右下のアイコントレイから起動するとこの画面がでました。
win

1.基本設定で画像の保存先を変える(うちではすぐに捨てるのでデスクトップ)

2.ホット・キーのタブから使うであろう操作方法を学ぶ

ctrl+shift+F5:選択しているウィンドウをクリップボードにコピーする。

ctrl+shift+F9:選択しているウィンドウをjpeg画像として保存する。

あたりが良く使うと思います。以上・・・のはずだった。なのにエラーで撮影できない。

WinShotで「システムリソースが足りません」のエラーが出る

「winshot システムリソースが足りません」で調べまくりました。

すごく簡単な話で、マルチディスプレイ環境(画面・ディスプレイが一つ以上ある環境)ではメインのディスプレイでしか撮影できないとのこと。

メイン以外のディスプレイの上にあるウィンドウやディスプレイ全体を撮影しようとするとエラーが出ます。

それでも、メインのディスプレイにドラッグしてから撮影すれば問題ないし、それ以上の機能は求めないことにしました。

メインディスプレイの切り替え(windows7の場合)

メインディスプレイの切り替えも5回クリックするだけで簡単だし載せておきます。

  1. デスクトップの何もないところで右クリック
  2. 「画面の解像度」をクリック
  3. メインにしたいディスプレイの画像をクリック
  4. 「これをメインディスプレイにする(K)」にチェックを入れる
  5. 「OK」をクリックする

いかがでしょうか。

WordPressでグリッドレイアウトデザイン!

ワードプレスをjQueryプラグインを使ってグリッドレイアウトデザインに変更したいときの方法

いろいろワードプレス専用プラグインも探しましたが、特定ページだけグリッドレイアウトにする記事に辿りつけなかったので、Masonryという有名なjQueryプラグインを使うことにしました。

MISSION:カテゴリーページをグリッドレイアウトで表示して、見たい記事に辿りつきやすくすること。

難しいと身構えてたのに、5つの手順で設定・利用できることがわかりました!

  1. 本家のjQueryとMasonryを<head>内でリンクさせるように書く!
  2. グリッドレイアウトにする対象を選んで書く!
  3. content.phpを編集して、1度に見れる文字数を決める!
  4. CSSでデザイン(主に横幅)を設定する!
  5. head内で直接<script>を書く!

以上です。では、早速。

1.本家のjQueryとMasonryへのリンクを<head>内でリンクさせるように書く!

この記事の最初の画像がMasonryの公式サイトへのリンクになってますので、現在では右側の「Download masonry.​pkgd.​min.js」をクリックして表示されたURLをコピーします。

基本的には外観→テーマの編集→使用しているテーマを選択→head.phpで何やら長いプログラムが表示されるので、</head>の手前に追記します。※1

実際に記述したコードはこちら↓
<script src=”//cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js”></script>

本家へのリンクは「jQuery Updater」というプラグインをワードプレス内で検索して有効化します。※2

※1 Masonryのサイトに直接リンクしているので、そのサイトのページがなくなった瞬間に機能しなくなるので注意してください。
※2 jQuery Updaterを利用して、今後も最新のjQueryが出てきた場合もリンクは大丈夫ですが、バージョンが変わったことでMasonryがうまく機能しなくなることがあるので注意してください。

2.グリッドレイアウトにする対象を選んで書く!

Masonryは指定したidの中の指定したclassのものを横並びにするjQueryプラグインということですので、
どのカタマリで横並びにするのか考えておく必要があります。

自分の場合は<article>で記事全体とカテゴリーなどのリンクが囲まれていたので、<article class=”任意の名前”>としても良かったのですが、面倒なのでclassではなく<article>をそのまま指定することにしました。

idの方は、指定する場所探しに若干時間がかかりました。

テーマによって違いますが、category(-なんとか).phpがあればその中、なければarchive.phpを触ることになると思います。

うちの環境だとarchive.phpだけがあったので、その中の

<?php
① if ( is_category() || is_tag() || is_author() || is_day() || is_month() || is_year() ) :
?>
② <div id="gridcot">
  <?php while ( have_posts() ) : the_post(); ?>
③   <?php get_template_part( 'content-cat', get_post_format() ); ?>
  <?php endwhile; ?>
 </div>
<?php
 endif;
?>

こんなコードを複製して対応しました。

①のところの直訳は、「if←もし (カテゴリーページ() ||←もしくは タグページ() || 製作者ごとのページ() || 日付() || 月一覧() || 年一覧() ) :だったら」次のことをしてください。という感じです。

②結局、付け加えたのは<div id=”gridcot”>と</div>になります。この中に含まれる全部の<article>をグリッドレイアウトの対象にするつもりです。

③のところの直訳は、記事の数だけ「content-cat.php」を繰り返して(本文/記事を)表示してください。って感じです。

3.content.phpを編集して、1度に見れる文字数を決める!

「content-cat.php」という「content.php」を複製したものをカテゴリー表示用に作って、そちらを指定しました。(上記の③の中の’content-cat’の部分です)

だいたいは「entry-content」のすぐ下にあるんじゃないでしょうか。

本来はthe_content()で本文を表示させているようですが、本文全文だと長すぎるので一部を表示するプログラムに差し替えました。

the_content(); を削除して echo mb_substr(get_the_excerpt(),0,100);

直訳は、全角で本文の0~100文字目を抜き出して表示するって感じです。

4.CSSでデザイン(主に横幅)を設定する!

#gridcot article {
 width:43%;
 border:none;
 background:#dfe0de;
 margin:12px 6px 12px 9px;
 padding:10px 8px 18px 12px;
}

さっき指定した<div id=”gridcot”>の中の<article>に横幅の指定とかを入れたCSSです。

外観→テーマの編集の一番下の「style.css」の中の1番下に入れれば動くと思います。

これだけだと、細くなった記事が縦長に連続して表示されるだけになると思います。

(width:43%はうちの場合の数字で2カラムにしようとしたときの値です。自分で試してちょうどよい数値を探してください。)

5.head内で直接<script>を書く!

横並びにするためのMasonryを使うタイミングと何のidなどに対して使うのか指定します。

「header.php」の</head>の直前の行に次のを入力します

<script>
 $(function(){
  $('#gridcot').masonry({
   itemSelector: 'article',
   isFitWidth: true,
   isAnimated: true
  });
 });
</script>

直訳は$(function() : このページが読み込まれたら、
$(‘#gridcot’).masonry : id=”gridcot”の中身をmasonryの対象にして、
itemselector:’article’ : gridcotの中にある<article>を横並びにしてください。
isFitWidth : true : 横幅可変で、
isAnimated : true : ぬるっと動いてください。

という感じです。

isFitWidth:trueにしていたら挙動不審になりましたので、うちでは「false」にして機能をOFFにしています。

最後に、

途中で画面が真っ白になったり、エラーメッセージだけが表示されているときはPHPのエラーです。<>”””のつけ忘れや閉じ忘れ、<?php(ここからPHP)、?>(ここまでPHP)の順番が狂ったりしてるときも多いです。

それがなくて動かないときは、MasonryやjQueryへのリンクが間違っていたり、6.で書いたidやclassがスペルミスなどで存在しなかったりが原因の場合が多いです。

いずれにしろ、1時間かけてわからなかったときは、最初からやり直すのがBESTな気がします。

大丈夫。できますよ。

セクショニングコンテンツ! ‐ HTML5で使用するタグの一覧とざっくり説明その2 ‐

セクショニングコンテンツについて

HTML5になって、機械がサイトのデザインを見ないでソースコードだけを見ても「その一文の重要度」や、「見出しと文章・文節の区別」などを理解できるようにいろいろなタグや考え方が増えました。その中のひとつに「セクション・セクショニングコンテンツ」というのがありまして、

どこからどこまでが文章なのか、どこまでがひとかたまりなのかを表現するタグたちを「セクショニングコンテンツ」といいます。

MISSION:セクショニングコンテンツに含まれるタグと含まれそうで含まれないタグを整理すること。

1.セクショニングコンテンツに分類される4つのタグで、以下の制約(ルール)があります。

  1. セクショニングコンテンツには基本的に見出し(<h1>など)の項目が必要
  2. セクショニングコンテンツでも<nav>と<aside>は内容的に見出しが付けれないときは無理につけなくてよし。
  3. 中に何か入ってないとエラー(減点)

<article>

記事を表すタグ。ブログの記事の一覧画面やコメントの投稿など、すべての文章がひとつのことを書いてるのではなく、個別で書いてあるものはこれになる。

<aside>

本文の流れとは直接関係ない、注釈や別記のような扱いをするもの。広告も含む。
内容によっては見出しがないものも意味あい上は仕方ないと思われる。

<nav>

メインナビゲーション=メインメニューのタグ、1ページに何個もあるのは推奨されない。他のナビにはrole=”navigation”で対応するらしい。

<section>

章・節などに使われるタグ。記事(article)の中に節(section)が入れ子になったり、章(section)ごとにコメント(article)が入れ子になったりすることはありそう。

2.日本語的にはセクションかと思ってしまうけど、フローコンテンツに分類されるタグ

<h1>~<h6>

見出し(や題名)タグ。見出しがあることで、暗黙的にセクションが始まる意味をかもし出すのでセクションの区切りとしても使えてしまう。

<header>

ヘッダータグ。現在の標準では、ページ全体のヘッダーはbodyの直下にあって、中にページタイトル(h1)とメインメニュー(nav)が来ることが多い。
sectionやarticleの中で使うと(ページ全体のヘッダーではなく)そのsectionやarticleのヘッダーとして日付や作成者を内蔵する機能になる。

<footer>

フッタータグ。headerと同じ使い方。現在の標準ではページ全体の連絡先やコピーライト、フッターメニューなどを内蔵することが多い。
個別のarticleやsectionの連絡先などを内臓するために使われる。

3.ちょっと使い方が特殊なタグ

<address>

アドレスタグは住所・電話番号・メールアドレス・製作者に近い内容のみに使える。このページで紹介したすべてのタグを中に入れてはいけない。不思議なタグ。
フッター内でしか使えないと思って問題ない気がします。

というわけで、今回はセクショニングコンテンツとそれに似ているタグを整理しました。

ところが、これを覚えるよりも使って慣れる方が大事という真実もありますので(略)

しかし、1つの<section>に<article>(記事)が2つある場合や、<article>自体が複数の<section>でできている場合などもあると思います。

日本語的意味合いだけで考えると入れ子が非常に複雑になりそうな気もするので、ほどほどに使用するタグを絞った方がわかりやすい気もします。今後のブラウザの問題もあるかもしれませんが、時代の中で変わっていくかもしれないので新しいバージョンのHTMLなどが出た時は(他のタグもそうですが)内容の変化に要注目です。

Emmetの公式チートシート!

Emmetの公式チートシートがあったので、確実に備忘録入りです。

チートシートって言葉は初耳なんですが、ショートカットの一覧のページ(ただし英語)です。短縮形がわからないときに見ます。

MISSION:短縮コードでよく使うものを記すこと。

HTML5

随時更新

CSS

随時更新

aptanaStudio3 のPHPプレビュー機能が使えない!できない!

aptanaStudio3でPHPのプレビューボタンが押せないので困った。

↑参照元

PHPはサーバー上で動くので、プレビューするためにはサーバーの設定が必要なんですよね。

MISSION:aptanaStudio3でPHPのプレビューボタンを使えるようにすること。

今回は次の3つの順で紹介します。

  1. まずはHTMLの方のプレビューボタン!
  2. XAMPPを使う!
  3. フォルダ構成に合わせて、サーバーの設定をする!

まずはHTMLの方のプレビューボタン!

HTMLでは最初からプレビューボタン(目玉アイコン)が押せるようなので問題ないです。

あとはタブを右側にドラッグすると、編集中とプレビューのウィンドウが二つ並ぶので使いやすそう。

あまり、プレビューを信用し過ぎても駄目ですが、全然ないよりマシです。

XAMMPを使う!

PCの中だけでサーバーを動かすソフトで超有名なのが「XAMPP」です。
※勝手な読み方はザンプ(絶対違うと思います)です。

このソフトを使うと「http://localhost」というURLをブラウザに入力すると、PCの中にあるフォルダでホームページが実際に動くようになります。(他のPCからは見れません)

これでPHPを含めたWEBのテスト環境がつくれます。
(でも実は中で動いてるのはapache(アパッチ)というレンタルサーバーなどで提供されているような本気のサーバーです。)

フォルダ構成に合わせて、サーバーの設定をする!

デフォルトの設定で決められたフォルダの中でWEBの製作をすればいままでの部分で問題なく動作するのですが、

何個もサイトを持って編集・更新をする場合は、「localhost」ひとつだけだと非常に不便になるのでサーバーの設定をいじることにして方法を調べたところ3つ見つけました。

1.ドキュメントルートってやつを、作業するフォルダに設定する

これが一番一般的で、基本的にフォルダは1個になるので却下、しかし自分のサイトひとつだけならこれでいいかもしれません。

2.ヴァーチャルドメインで設定する

これも一般的に別に問題ないものですが、サーバーの設定+PCの普段触らないファイルを触って「localhostはこのフォルダのことですよ」って設定を入れることになり、忘れたら思い出すのに大変そうなので却下

3.エイリアスを切る

(たしか「切る」であってるはず)自分的に一番近い言葉はRPGの鏡とかで使われる「ワープ」です。
設定の内容は「/word/って書いたらこのフォルダだよ」って感じです。

例えると  Cドライブ/ドキュメント/フォルダ1/フォルダ2/フォルダ3/index.html という構成があって「http://localhost」って打つとCドライブのすぐ下を見にいくとします。
するとCドライブのすぐ下には「ドキュメント」しかないので「なんにもないよ」って感じのエラーが」でます。

では「http://localhost/ドキュメント/フォルダ1/フォルダ2/フォルダ3/index.html」と打つと、index.htmlの中身が出てくるわけです。

でもURLが長すぎて気持ち悪いじゃないですか。

そこでサーバーに「/word/」って打ったら「/ドキュメント/フォルダ1/フォルダ2/フォルダ3/」と同じ意味だよ

って設定します。その設定がエイリアスです。

(さらに余談ですがMacではよくデスクトップにつくるWindowsで言うところの「ショートカットアイコン」のことを「エイリアス」と言います。)

すると「http://localhost/word/index.html」と「http://localhost/ドキュメント/フォルダ1/フォルダ2/フォルダ3/index.html」が同じ意味になるんです。

まさに魔法です。ワープです。便利ですよね。

というわけで設定内容(うちはEドライブにHP関係のフォルダ全部はいってますのでこんな感じです)

httpd.confの中で

<IfModule alias_module>
  この部分に
</IfModule>
Alias /word "E:/HP/word" を入力します。

</IfModule>のすぐあとに

<Directory "E:/HP">
 AllowOverride All
 Options None
 Require all granted
</Directory>

サーバーが起動しなくなった!

記述にミスがあるとサーバーが起動せずにすぐにSTOPしてしまいます。

なにでミスったかというと、

<Directory>を<IfModule>の中に書くという大失態。

そして、エラーを起こすとサーバー自体は起動しないので、非常につらかったです。

headを知る!使用できるタグとmeta要素 ‐ HTML5で使用するタグの一覧とざっくり説明その1 ‐

以前の記事でhtmlファイルはheadとbodyの部分の2つでできているとかきましたが(書いてなかったらすいません)今回はこのサイトを参考にして、head部分(表示されない設定の部分)をざっくりまとめてみます。

MISSION:head部分の内容を3つにまとめて整理すること

今回は、1.ページに必要になる最低限のタグと2.メタ情報(meta要素)と言われる設定系タグと3.それ以外の特殊なタグの3つに分けてまとめてみます。

ページに必要になる最低限のタグ

ドックタイプ宣言 htmlファイルのバージョンを最初に宣言する決まりになってます。

 <!DOCTYPE html>(和訳:このファイルはHTML5で書かれてますよー)

<html></html> ここからHTMLがはじまりますよってタグ。HTML5ではlang属性をつけて2行目に書くのが一般的

<html lang="ja">(和訳:このhtmlファイルは日本語のファイルですよー)

<head></head> ここから設定系ですよってタグ

以下のタグはすべてこのタグの中に書きます。

<title> ページ自体のタイトルを入力するタグ

<title>ページタイトル</title>

ブックマークするときに表示されたり、タブの中に表示されているものです。長すぎるものは好まれません。

<link> CSSなどの外部ファイルのURLを入力して、このhtmlと指定したファイルがつながっていますよってタグ

<link rel='stylesheet' href="CSSのURL" type='text/css' media='all'>
和訳:このページはすべてのブラウザや印刷のときなど「CSSのURL」にあるCSSファイルとリンクされてデザインを表示してますよ。

 <meta> メタ情報と言われるいろいろな設定を書くタグで、中身がいろいろあります。

charset 文字エンコードを指定する。 HTML5では

<meta charset="UTF-8">
和訳:このファイルの文字コードは「UTF-8」ですよー
(※最近は日本語の扱いなどもすべてUTF-8が主流です)

ちなみに<http-equiv="content-type" content="text/html; charset=utf-8">と同じですので、二重に書かないようにしましょう。

keywords そのページの重要ワードを指定できます。

<meta name="keywords" content="HTML5,head,タグ,ざっくり">
 という感じです。グーグルさんはページによって内容が違うのだから、別のページで全く同じにはならないと言ってますので、全部のページをコピペで作らないように注意です。

description そのページの概要です。

keywordsを含んだ日本語の文章にするのが一般的でkeywordsと同じく全ページ個別の内容になるのが望ましいです。また、検索結果に表示される文章になることもあります。

<meta name="description" content="html5のhead内のタグをざっくり説明" >

robots 検索エンジンのデータ収集ロボット「クローラー」に指示を出します。

値はindex/noindexとfollow/nofollowの2項目×2パターンになります。普通は検索結果に出したいので

<meta name="robots" content="index,follow">になります。

default-style 優先するスタイルシートを指定できます。

<meta http-equiv="default-style" content="style_main.css">
和訳:「style_main.css」というスタイルシートを優先して読み込んでください

まぁ、あまり使わないですね

refresh 再読み込みを指定するもの

<meta http-equiv="refresh" content="○秒" URL="飛ばしたいURL">
和訳:○秒後にURLにジャンプしてください

ただし、ブラウザによって対応していなかったり、怪しい挙動としてジャンプを止められたり、警告が出たりと中々安心して使えない気がします。

<head>でも<body>でも使える特殊なタグ

<style> headやbodyの中に直接CSSを書くときに使うタグ。

できれば<link>を使って外部のファイルにしたいので使いたくない。

<script> headやbodyの中に主にJavaScriptを書くときに使うタグ。

<style>と同じく外部ファイルにしたいところだが、直接入れないと使うのが難しくなるようなものもあるので、仕方なくそのまま使う。

<noscript> JavaScriptが見れない(使えない)環境のときに表示するコンテンツのタグ。

最近はjavascriptが見れない環境自体はかなり減ってきているし、今後もへっていくと思われるので使用しなくても別にいいのかなーと思います。

EmmetをaptanaStudio3にインストール!

タグやCSSの入力スピードを格段に上げる魔法のソフトがあるという噂を聞きつけて調べました。

↑旧Zen-codingこと本家Emmetサイト

aptanaStudio3でコード入力補助機能「スニペット」とは別にEmmetをインストールします。

Emmetは<div></div>を打ちたいときにdivとだけ打ってctrl+Eを押すと<div></div>に展開してくれるという魔法のプラグインです。

とても感動したのでわたしも使って慣れていこうという魂胆です。

MISSION:Emmetのインストール手順を9つに分けて示すこと。

  1. ヘルプ→新規ソフトウェアのインストール
  2. 作業対象のところに「http://emmet.io/eclipse/updates/」と入力して追加
  3. 任意の名前をつけてOK
  4. 最初の画面に「任意の名前」が表示されるので、チェックボックスにチェックを入れて「次へ」をクリック
  5. 確認画面が出るので「次へ」をクリック
  6. 規約の同意画面が出るので、同意して完了する
  7. インストール開始
  8. インストール中はとても長い間、辛抱強く待ちましょう。
  9. インストール後にaptanaStudio3を再起動すると最上部のメニューに「Emmet」が追加されるのでインストール完了!

今回のインストールの手順ですが、参考元サイトはこちら

HTML5とは 初心者にもわかる使い方をざっくりすぎる位で書きます

とりあえず、HTML5のタグに触れてみよう

ざっくりいきます。

HTML5というのはマークアップ言語と言われるやつで、本文に「ここは見出し」とか「ここは他のページへのリンク」とか印をつけるものです。

本文の他にそのページがどんなページなのか、何語で書かれているのかなども書いていきますそのあたりはヘッダー(<head>タグ)になるので後述にします。

本文というのは何かというと、「ページに表示されているすべての言葉」です

つまり、ブログなどでいうと記事の中身だけでなく、サイトのタイトルやメニュー、広告なんかも含みます。

たとえばその文章がメニュー(ナビゲーション)なら、<nav>と</nav>で囲む
サイトのタイトルや記事のタイトルなどセクションのタイトルなら<h1></h1>や<h2></h2>などで囲む。
というようにジャンジャン囲んでいきます。

それ以外にもページの一番重要なところ全体を<main></main>で囲むなんてこともして、見る人だけでなく本文を読まなくても「ここが大事なんだな」とPCや機械に対してわかりやすく書いていくのがhtmlです。

一番基本的なページのHTMLのつくりとは

では、実際によく使うタグを書いていきます。

<html>
  <head>
  </head>

  <body>
    <header>
    <h1></h1>
    <nav>
      <ul>
        <li><a></a></li>
        <li><a></a></li>
      </ul>
    </nav>
  </headr>

  <main>
    <section>
      <h2></h2>
      <p></p>
      <div>
        <img>
        <p></p>
      </div>
    </section>
  </main>

  <section>
    <h2></h2>
    <p></p>
    <div>
      <img>
      <p></p>
    </div>
  </section>

  <footer>
    <small></small>
  </footer>
 </body>
</html>

こんな感じでできるはずです。さっぱりわかりませんよね。

では、実際に使う最低限のHTMLタグとは

ここで使ったものが一番よく使うもので、使わないサイトはほぼないと思います。

  1. html:htmlで書いてますよって宣言
  2. head:本文以外のデータの部分(後述)
  3. body:ここから本文ですよ、表示する部分ですよって宣言
  4. header:ページのヘッダーですよって宣言 いろんなページにいっても共通の部分を囲むことが多い。
  5. h1:見出し/タイトルだよって宣言 宣言の強さに合わせてh1~h6まであるが、h3くらいまでしか使わない
    h1は1ページに1個というのが暗黙の了解
  6. nav:ナビゲーションだよって宣言 サイト内の他のページへのリンクメニューですよっていう意味
    これも1ページに1個というのが暗黙の了解で、ページ最下部にある奴はnavにしない場合が多い
  7. ul:ここからリストがはじまるよっていう宣言 olにすると1から数字をつけてくれる
  8. li:リストの一項目だよって宣言
  9. a:リンクだよって宣言 <a href=”飛ばしたいURL”>という感じでリンクをつける
  10. main:表示されてるページの本題の部分 これも1ぺーじに1個
  11. p:段落だよって宣言 普通の文章/内容の部分に使う
  12. div:日本語的な意味は全くない。デザインを調整するときに必要になるグループを作るタグ
    たとえばこのdivの部分だけ枠線をつけて、背景色も変えたいよという時に枠組みとして使う
  13. section:セクションの宣言 使い方はmainと同じだが1ぺーじに何個あっても良い このタグだけでは重要さは伝わらない要素
    また、セクションの中には必ず見出し(h1~h6が必要で毎回h1から始めるべきという噂もある)
  14. footer:ページの最下層/フッターですよって宣言 いろんなページにいっても共通の部分を囲むことが多い。
  15. small:コピーライトを書くときによく使われる

HTML5のタグに関して最後に

他にもタグはたくさんあるので、必要になった時に調べましょう。しかし、正式勧告の前と後でWEBのクリエイターたちそれぞれのタグへの解釈があったりしますので、書かれた日付に注意してください。

このWEBの世界は「ドッグイヤー」なんて言われてます。1年で進歩する量が非常に大きいのです。

もし、サイトを短いスパンで変更したりしていきたいのなら、迷わずにプロに任せるべきです。

aptana Studio3で既存のフォルダをプロジェクトにする方法

↑参照元

すでにあるフォルダをプロジェクトにする設定。

1.プロジェクトエクスプローラーの「ローカルファイルシステム」の中からプロジェクトにしたいフォルダを探す

2.フォルダを右クリックして「promote to project」をクリック

3.普通の新規プロジェクトと同じような画面が出るので設定してOK

以上で、プロジェクトが作成されるので、あとはFTPの設定なんかをすればOK

aptana StudioでFTP接続(リモート接続)の設定方法:さくらインターネットの場合

今回はさくらインターネット(レンタルサーバーサービス)のサーバーにaptanaStudioからFTP接続する方法

いろいろ手順はあると思いますが。

  1. ウィンドウ」→「ビューを表示」→「リモート」から左側にリモートタブを表示する。

    WS000000

  2. タブ内で右クリック→新規FTPサイト または リモートタブの「ト」のすぐ下の地球っぽいアイコンをクリック

    WS000001

  3. 入力するFTPの設定項目と内容

    サイト名 : リモートの一覧で表示される任意の文字列
    プロトコル : FTPのまま
    サーバー : 「http://」のあとの自分のサイトURL
    ユーザ名 : 自分のサイトの「・・・.sakura.ne.jp」の「・・・」部分
    パスワード : サーバパスワード(初期の登録完了メールに記載されてるはず。サーバコントロールパネルで変更可能)
    リモート・パス : 接続先のパス「/home/ユーザ名/www/」がさくらインターネットの初期値と思われる
    —–  その他のオプション —-
    Connect Mode : パッシブ
    ポート : 21
    エンコード : UTF-8
    タイムゾーン : Japan

  4. ユーザ名とパスワードまで入力して「テスト」をクリックして

    「・・・に接続成功」と表示されればOK
    「incorrect」と表示されたときはユーザ名かパスワードが間違っています。

次にプロジェクトとFTPの設定をリンクさせる

プロジェクトとFTPの設定があって、それらをリンクさせないと使えないという状態です。

1.プロジェクトタブ内のプロジェクトをクリックして地球マークの「接続」を表示。さらに右クリックして「Add New Connection」をクリック

WS000003

この状態から右クリックでAddNewConnectionを選択すると、別ウィンドウで「Connection Manager」が表示される

2.左の枠内の「新規接続」を選んで内容を入力していく

ここでは、名前とソースとFTP接続をひとつずつ選んでいきます。

  • 名前 : このリンク設定につける名前
  • ソース : 使おうとしているプロジェクト(もしくはファイルのフォルダ)
  • 宛先 : 先程設定したFTP接続
    WS000004

3.設定完了

WS000005

画像はプロジェクト内にもリモートにもファイルがある状態を表示してます。

プロジェクトタグ内の上から3行目の「web.paranoias」プロジェクトの中のファイルの一覧の中に混ざって「接続」があり、その中にさっき指定したFTP接続先(リモート接続先)のファイルの一覧があります。

これでアップロードしたいファイルを選んでタブ内の最上部の上矢印アイコンでアップロード、下矢印アイコンでダウンロードができるわけです。

設定が終わると非常に簡単です。

ちなみに例で登場しているサイトはこちらです(笑)

aptana Studio3(日本語)をインストールしてみる

先日、統合制作環境(IDE)の使用にチャレンジするためにNetBeansをインストールして試用しましたが、リモートファイルのダウンロードが手間になるということで自分の仕事のスタンスに合わないのがわかりました。

めげずに次にいきます。無料版のDreamWeaverと噂されるaptana Studio3に挑戦します。

aptana Studio3インストール手順

↑こちらの公式ページからダウンロードします。

インストールの場所なんかを指定するとひどく簡単にインストールが終わりました。

次は↑こちらのページの「Pleiades プラグイン・ダウンロード」から最新版をクリックして、「pleiades.zip」をダウンロードします

ちなみにうちの環境だとLhacaで解凍失敗したので7zipで解凍しました。

解凍後のプロセスはあと2つ。

解凍したフォルダの中の↓この二つのフォルダをまるまる先にインストールした「aptana Studio」のフォルダにペーストして上書きします。

aptana-3

次にaptanaStudio3.iniファイルをテキストエディタで開いて最終行に「pleiades.jar」へのパスを追記します。

-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

これを最終行へペースト。

これでaptana Studio3日本語インストール手順は完了

起動すれば日本語になっているはず。

なぜかまた一筋縄ではいかず。ハメられました。

上記の作業をする前はちゃんと起動したaptanaStudio3がこの変更をしたあとは起動しない。
デスクトップにできたアイコンをダブルクリックしても何の反応も何のエラーもでない。

調べたところ、パスを指定した.jarファイルが空だった。

解凍に失敗して最後までちゃんとファイルができてなかったんです。
7zipで解凍し直して、ファイルの上書きもし直してなんとか完了しました。

NetBeans導入後の感想

NetBeansをインストールして、少し試してみた

ちょっと触ってみたんですが、なかなか難しいですね。

もともと以前の会社ではDW(Adobe社SreamWeaver)も触っていたのでIDEに抵抗はないはずなんですが。
使いこみが足りないのはもちろんですが、英語が多いせいなのか、専門用語が多いからなのか、直感的に操作はできませんでした。

IDEは慣れれば大丈夫!とは思うものの。自分の活動には使いづらい。

なぜかというと、仕事の内容が、新規作成と管理・更新の2種類であること。
新規作成はPCからしかできませんが、更新や管理は外出先からiPhoneなどで行うことも多いです。

iPhoneからは直接リモートファイルを編集し、PCではダウンロードしてから編集する

いままでは下のFTPソフト(FileZilla)+サクラエディタ+GoogleChromeですべてをこなしてました。

WS000000

この流れが高速もしくはスムーズにできないと、新規作成はIDE、編集は上のような流れになってしまって、

新規作成の頻度はもちろん低いのでIDEを使いこなせない

って状況になる気がします。ここで一回NetBeansの検証を止めて次にいきます。

iPhoneフロントパネルを自分で交換修理できるようす。


iPhone5だとこんな感じ(↑クリックすればちゃんと見れます)

1.専用工具 極細星型ドライバー
2.吸盤
3.絶縁系のゴムヘラ
4.交換するガラス
って感じでなんとかなる様子。

改造になると思うのでメーカー保証が全くなくなるのがデメリットでしょうね。

sass導入に関して

今回は、cssを複数サイトで使用するときに便利なSASSサースを導入していきたい

IDE html5+css3+php+jQueryの開発環境を整える

NetBeans

こいつらはIDE:統合開発環境と言われるやつでホームページをより簡単につくるためのツールです。(だけでなくプログラムや難しいやつもできます)

聞いたことあるのはホームページビルダー、Dreamweaverが多いと思いますが、そういうソフトを買うのは費用対効果が高くてもどうしてもハードルが高いです。必要ない場合も多いですし(わたしは現在、サクラエディタのみで作成しています)

基本的に無料で愛好家が多いようなのでピックアップしました。

条件は「無料」「エラーチェック」「jQuery対応」「PHP対応」

実はjQueryとPHPのエラーチェックが大変なんですよ。基本的にエラーのときに「どこがどうおかしい」っていうのを正確には教えてくれないのに、見た目でもぜんぜんわからない。という状況になるからです。

地道にやればもちろん見つけられるのですが、時間とモチベーションが削られます。非常にもったいない。

結論:IDEを頑張って導入していきたい。

 

下も試してみたいやつです。クラウド上で動くIDE.

Cloud9

browser-shotプラグインのテスト

ワードプレスのプラグイン「browser-shot」

なんて便利なプラグインなんでしょうか。

ワードプレス以外のサイトでも今のところ使えてますし、すごい探していたんですよね。

「サムネイル サイト」「プレビュー サイト」「サムネイル ホームページ」「プレビュー ホームページ」「スクリーンショット サイト」「スクリーンショット ホームページ」とか、
「サイト スクリーンショット 自動」「サイト スクリーンショット クーロン」とかでも探しましたね。
あとは・・・「サイト スクリーンショット 画像変換」とか「サイト プレビュー API」とか

全然見つからなくて。

見つけたと思っても、重くて使いものにならないとかたくさんありまして。

もう見つからないし「ワードプレスのプラグイン」でもいいからそれをこじらせて使おうと思ったら出会いました。

自動で指定したURLのサイトのプレビュー・スクリーンショットを取得する使い方

browser-shot url=”http://からはじまるURL” width=”240″ height=”240″
を[]で挟みます。

すると読み込み画面が出た後に更新するとプレビュー・スクリーンショットを自動で取得して表示してくれるわけです。下はすべてそれでできてますので、ソースコードから見たら出来上がりがわかります。

自動で指定したURLのサイトのプレビュー・スクリーンショットを普通のサイトで取得する使い方

実際にこのページのソースを見るとわかりますが、http://s.wordpress.com/mshots/v1/http%3A%2F%2F表示したいURL?w=240&h=240″

で表示させることができます。感動。

下の画像でテストしたところ、1週間ほどで画像が自動で更新されてました。

これは非常にありがたいですね。ぜひ使ってみてくださいませ。

 

 

 

 

 

 

 

 

サイト・ホームページ作成のざっくり基本 その2

最近のホームページの構成について

(細かい歴史などが気になるときはwiki参照)

最近のホームページの構成です。ホームページはいくつかの言語で作られたファイルをリンクしてひとつのページとして表示されています。

1.HTML5(.htmlファイル)

基本的には本文が入っているところで、このあとに出てくるcssやjQueryなんかのファイルとリンクする設定(head)部分や、本文の変更箇所にニックネーム(classやid)をつけるものです。画像ファイルを指定して画像を表示させたり、画像が見れなかったときに表示する「代わりの文章」なんかも入力したりします。

2.CSS3(.cssファイル)

ざっくりだと、本文の色や大きさ、背景の設定、メニューや画像の配置・レイアウトなど本文以外の表示に関する設定を入力するファイルです。
ブログなどはこれだけが自分でカスタマイズできる部分のものもあります。

ウィンドウが開くなどの激しい動き以外はこの2つだけで結構作れます。

3.jQuery(javascript .jsファイル)

初心者には応用する難易度が高めの言語で、画像のスライドショーやクリックするとにゅっとでてくるメニューなど激しく動いたり、
不思議な動きをさせているのはだいたいこいつです。

最近は「jQueryのプラグイン」という形でそのままコピペでつかえるなど、いろいろと導入しやすくなっていますが、ハマると死にます。

4.PHP,CGI,(.php,.cgi)

そんなに使いやすくなっているものはないです。
メールフォームが一番身近にあるプログラムかなと思います。

WORDPRESS(ワードプレス)などはこの.phpでつくられていますのでワードプレスのブログを使っている人は少し触ることがあるかもしれません。
あとは、データベース(mySQLやPostgresqlなど)大量の人間をエクセルの表みたいに管理したい人は勉強がいるかもしれません。

なので、

最初はHTML5+CSSの本なんかを参考につくるといいかもしれません。

コツはもちろんありますが、最初の2つだけならハマって苦労すればすぐに覚えられます。根気でいけます。

jQueryも簡単なプラグインだけならコツだけでなんとかなるかもです。
何事もチャレンジですね。

YOUTUBEの動画アップロ-ドの際のプレミア的ソフトの設定について

動画を作るときのうちのソフトの設定です。細かい説明は省きます(笑)

newするときはファイルの場所以外は特に変更なし。

背景画像がメインの場合は、「HDV/HDV720p24」でOK

フェードインはvideoやaudio波形の左側の◆マークでキーフレームを入力し、波形上で上下にドラッグしてopacityやvolumeを調整できる。

 

人気ページを表示するプラグインWP-POSTVIEWSでランキングが数字にならない。

このサイトの右側に表示されている「人気のページ」というウィジットの話です。

もともとランキング機能のないこのプラグインですが、

プラグインの編集から「wp-postviews.php」を編集し、$temp = str_replaceが連続している行があり、

手順1 : その中の if($most_viewd){ と foreach($most_viewd as $post) の間に$rankingno=1; を追記

手順2 : $temp = の最後の行と$output .= $temp; の間に
$temp = str_replace(“%RANKING_NO%”,$rankingno,$temp); を追記

手順3 : $output .= $temp; と } の間に $rankingno++;

を追記するとランキング機能を追加できるが、この手順を実行する場所が同じファイルの中に4か所くらいあるので注意する。

この追記が抜けているときに数字で表示されるはずのところが「%RANKING_NO%」と表示される。

その後は「設定」→「postviews」の中のよくわからない文章を

<li><span>%RANKING_NO%位</span>  <a href=”%POST_URL%”  title=”%POST_TITLE%”>%POST_TITLE%  <span> %VIEW_COUNT% views</span></a></li>

に変更するとランキングが表示される。

YOUTUBEの動画アップロ-ドの際の画像サイズについて

たまにしかアップしないので、すぐに忘れる自分用プロパティをいくつか。

ファイルタイプ:mp4

動画コーデック: H.264
720p: 1280px x 720px
フレームレート:30fps

音声コーデック: AAC-LC
ステレオビットレート:256 kbps / 384 kbps

15分を越える動画はアカウントの確認が必要になるようす。

明朝体WEBフォントをCSSのfont-faceで設定しているのにできない。反映されない。とにかく表示できない。

試した内容

ttfファイルへの変換

ネット上からダウンロードする際などに、データが欠損して正常に動作するものなのかチェックするため、ダウンロードした.otfから変換したが失敗。

woffファイルへの変換

.ttfだとファイルサイズが大きすぎて、サーバー制限などの何か不都合が働きかけているかもしれないチェック失敗。

otfファイルへの逆変換

上記の変換したものをさらに変換してもとの.otfにして再設定するも失敗

ファイルの名前をすべて小文字へ変更

CSSなどでの小文字大文字の問題で何か起きてたら嫌なので保険を兼ねて変更。失敗。

クォーテーションの変更

CSSでフォントファイルのパスを指定するときにダブルコーテーション・シングルコーテーション・何もなしの3つを試すも失敗。

URL指定を絶対から相対へ

CSSでファイルのパスが間違っていたり、絶対パスで一度外を通ってからだとダメなのかと思い相対パスに変更

フォルダの名前変更

最初「@font-face」というCSSなので、わかりやすくフォルダ名を「font_face」にしていた。
CSSでは「-」はOKでも「_」は駄目だったということをいまさら思い出しました。

なので、特殊文字削除で成功。

しかし、その後BASIC認証をかけている状態で他のサイトに絶対参照でパスを指定しても無反応するということに気付き、すべて相対パスに変更。

長かった・・・・

サイト・ホームページ作成のざっくり基本 その1

さて、つくろう。ってなったときに、作成するための技術の前にとりあえず、準備がいるわけですが、今回はそのおはなし。

必要なのは、場所(スペース)と住所(URL)と中身とソフト

って感じです。

順番にざっくり説明します。

1.場所

サイトのデータ:ネット上のサイトの本文や画像を置いて置く場所です。
レンタルサーバーやブログなど。ブログなら広告付きで無料のものもあります。

2.住所

場所があってもURL(WEB上の住所)がないと誰もたどりつけません。
別の言葉では、ドメイン(独自ドメイン・サブドメインなど)といいます。
ドメインはレンタルサーバやブログに無料でついてきますが、長かったりかっこ悪かったり、無料なんだなってわかるものがついてきます。最初はそれで十分かもしれません。

3.中身

そのまま表示される内容のことです。
サイトの方向性・コンセプトなどもかっちり決めておくとあとで楽です。
これを先につくってから場所や住所を確保する方がいいです。

4.ソフト

ソフトとはいってもホームページを作るソフトではありません。
実際、毎日大量にいろいろなサイトを触る場合でなければ必要ないです。
基本的には、ページの中身をつくる「高性能メモ帳(サクラエディタなど)」と自分のPCとサイトの場所をつなぐ「FTPソフト(FileZillaなど)」(※ブログのときはなくても大丈夫かもしれない)があれば十分です。
高性能・高機能・高価格(もしくは低価格)のソフトはまったく必要ないです。特にブログのときはまったく必要ないし、技術がないとわけがわからなくなります。

物理的に必要なのはとりあえずこんなところでしょうか。

css inline-blockでできるスペース(空白)を消す方法

「display」っていうCSSに最近追加された「inline-block」ってのがありまして。

たとえば、
「画像+その下に解説文」っていうものをページ内にたーくさん並べたかったり、単純に2カラムのサイトを作りたかったりと、要素を横に並べたいときに使うんですが、
いままではblock要素に対して「float」ってやつを使ったり「display」を「inline」にしてこねくりまわしてたんですよ。(正式な使い方ですけどね)

しかし!floatは癖が強すぎていまいち思い通りに動かない。枠にはめて使ってみてもなんだかんだで、

ずれまくる。

inlineはまぁ、便利ではあるけど、blockからinlineに変更するからblockの良さが0になる。

そこで出てきたのが「inline-block」なんですよね。もっとこうしてほしいっていうのはあると思いますが、
inlineとblockのいいとこどり的な立場で。初めてみたときは本当に嬉しかった。本屋で立ち上がりました。((笑)

さて本題です。まぁ、そんなinline-blockですが、バグってるんですよね(笑)

基本的に改行され縦に並んでしまうものを横一列にするのが役目なのに、

改行コードか何かで空白ができるんです。

で、その回避方法なんですが、とりあえず3つあります。

1.ソースコードで改行しない
改行コードが空白の素ならそりゃ解決しますが、完成してからならまだしもねぇ・・・

2.CSSでなんとかする
バグ処理って感じで、1度letter-spacingか何かをマイナスの値にして、実際に使うときだけ0にするって感じでした。これも、今後のブラウザ対応のときとかに突然気持ち悪い動きとかされたら嫌なので、敬遠したい。

3.コメントアウト!
ソースコードでコメントアウトします。<!– 中身 –>これですね。
不思議なことに、入れ子になっていても「inline-block」の直前の行をコメントアウトするだけでOKです。

<p インラインブロック>なんたらかんたら</p>
</div><!–
–><p インラインブロック>なんたらかんたら</p>

これで、OKですた。不思議だけどこれでOK.これは忘れてはいけないです。

サイトのマウスオーバーで画像を差し替えるメモ(転載)

簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

http://www.nxworld.net/tips/button-mouseover-event.html

あと、パクリたいプログラムのサイト(笑)

http://kurache.com/blog/

CSSとは

CSSとはカスケーディングスタイルシートとかいうものの略。
ウェブで表示されるデザイン部分を調整する言語。

文字の大きさや色だけでなく、画像や線の幅、リンクの色や背景の指定がメインになると思われるが、他にも影をつけたりいろいろできる。

触っていると、セミコロンをつけ忘れたりして思うように表示できずに2時間くらい悩んだり、1か所修正しようとして全体のレイアウトなどが崩れて大変なことになったりする。

ブルートゥースキーボードの落とし穴

iPhone用のbluetoothキーボードが先日届きました

早速使ってみたんですけどもー

設定も簡単だし、大きさもばっちり。完璧だったんですけど、1個だけ。

カフェで意気揚々と使おうと思ったときのこと・・・テーブルの上に広げてさっそくコネクト。

HTML5の編集をしてみたところ、なんか変だ。

・・・家のキーボードのように力強く打ったところ・・・一度のタッチで2度打たれるのです・・・

これでは使えない。

ゆっくり打つと大丈夫。利用はできる。もしかしたら充電が残り少なかったのかもしれない・・・要検証ですね。

天井ぶら下げ型照明用リモコンを購入しました。

部屋のぶら下がり電球の照明があるんですけど、わたしの部屋は2部屋が縦につながってまして。

照明を一度につけたり消したりしたい。ベッドで横になってから消灯したい。

これ専用の受信機が別に売ってまして、それと併せて購入しました。

・・・今気づいたんですけど、リモコンとセットの奴を買って、部屋の入口と寝室にリモコンを1個ずつ置いて使えばよかったのでは・・・

ミスりました・・・

ちなみにこの商品だけ送料がかかってます。探すのが面倒で途中であきらめましたwww

照明屋さんが多いから送料無料にするために高い照明を買うのも変な話ですしね。

今日の検索ワード「照明用リモコン」

セミダブルのベッドを買わせていただきました。

セミダブルベッド結局買いました。

これなんですけど。
条件は・・・

  1. セミダブル
  2. 収納つき(引き出しを左右どちらか選んでつけれること)
  3. ポケットコイルマットレスつき
  4. 楽天Edyで買える(上限5万円なので、送料込みでそれ以下)
  5. ダークブラウン
  6. コンセントとものが置けるスペースがある
  7. スーパーポイントはできるだけ高いやつ
  8. 送料はなるべく安い奴

という感じでかなりわがままな条件ですが、全部満たしてくれました。

自分で組み立てるってところと、引き出しじゃない方にものを入れててもシケったりしないのかってところが心配ですけど。
まぁ、それはどんなベッドでも一緒ですよね。

ちなみにこのSillyのナチュラルな木のカラーでmonaってのもあるので、購入検討中の人はチェックしてみてくださいませ。

今日の検索ワード「セミダブルベッド 収納付 ダークブラウン」ってとこで。

楽天Edyもらえるモールを忘れてました。

完全に忘れてました。

楽天Edyもらえるモール

https://mall.rakuten-edy.co.jp/aff/105239/

 

このサイトを経由して買い物をするとその時点でポイントがもらえます。

で、購入金額の数%がもらえます。

すっかり忘れて買い物してました・・・泣

楽天市場なら1.5%とかつくようなので500円とか普通にロスしてました。がっかり。

楽天×幽霊対策←

楽天スーパーセールをひたすら歩きまわるってのは中々大変ですね。

画面を見ながら寝落ちすること数日なわたくしです。

さてさて、物騒なタイトルの今回ですが、一人暮らしを始めて3カ月の自分ですが、半透明な方々をいろんなところから連れてくるという癖がありまして←

いきなり部屋の感じがとてつもなく悪くなったんですよ。

職場の人とかから「粗塩を持ち歩け」とかいろいろ言われてたのを無視し続けてたんですが、もう無理。ということで

盛り塩に挑戦したんです。

1日目はすごく良かったんですが、効果が薄い。

んで、ちょっと調べたらですね。

盛り塩の原点は岩塩

ってところにたどりつきまして。

楽天で買っちゃいました。岩塩

探してたら、パウダーや顆粒になっているタイプは結構あったんですけど、インテリアにできるほど大きいものが見つからず。

実際に1粒50gですとか言われてもサイズは想像できないし・・・で、このサイトにたどり着きました。3~5cmの粒なら置きやすそうですよね。

これで、健やか安眠生活できる。しかも岩塩のお風呂にも入れる。これは素敵なことですよね。笑

全然スーパーセールじゃないような気もしましたけど、欲しいものは欲しい。ということで購入です。

もちろん楽天edy使って買いました。到着が楽しみです。

余談ですが、備忘録程度に

良くある盛り塩の方法

  1. 5cmくらいの無地の小皿を用意
  2. 基本的には2個セットで使う
  3. 玄関の扉の左右に1個ずつ置く
  4. 部屋の4隅に置く

ってのがいいみたいですね。盛り塩が線もしくは四角になるように置くのがポイントみたいです。いわゆる結界のはり方ですね。

盛り塩で結ばれた線の上を悪いものはまたげないって考えたらいいんでしょうかね。

玄関が鬼門、そのまま突き抜けて窓が裏鬼門っていううちのマンションでは、玄関と窓にあったらいいのかなーって思って、部屋の方には4隅において玄関には2個で置いています。

だいぶ静かになった感じなんですけど、この岩塩を使って早くもうちょっとレベルアップしたいです。では!

今回の検索ワードは「楽天 盛り塩 置き方」でしょうか。

楽天edyの落とし穴(注意点)

楽天市場でのお買い物100円につき1ポイントついてくる楽天edyなんですが、
さらりとした注意点がありました。
edyのページをちゃんと見れば(普通に見れば?)わかりますが。。。

わたくし、今の部屋ではシングルの折りたたみベッドを使っているのですが、ちょっと狭い感じがしてるのでセミダブルのベッドがいいなー。ほしいなー。なんて思ってたわけですよ。

んで、お気に入りのショップなんですが楽天市場内に「スクロール 生活雑貨」ってお店がありまして、見てみたところ・・・最近は収納付きベッドなんてものがたくさんあるってことに気付きまして。

これ欲しいって思ってたんですよ。

そしたらば、楽天edyの上限は50,000円!絶対買えない。

これなら買えるな・・・なんて思いながらまた思案中です。ということで、皆さんも気を付けてくださいませ。笑

今回の検索ワードは「楽天edy 注意点 上限」でしょうか。

楽天Edyのコンビニでの項目のポイント

image   iPhoneのスクショなんで、あれですけど。 最初は公共料金の支払いとかもいけちゃうのかなーなんて、淡い期待をしてましたけど、実際はNGでした。(笑) この表は楽天Edyの公式?サイトです。

http://www.rakuten-edy.co.jp/howto/card/point/

ローソンチケットはポイント対象になってるのはありがたいけど、いそのイベントが対象かどうかはどのタイミングでわかるんでしょうね(笑)

驚いたのは宅急便。普段、まじで使わないですけど、対象になってるんですね。

そして、ここで疑問。

コンビニで使ったポイントが反映されない。。。2日ぐらいちまちまと調べてたらようやく見つけました。。。

ポイント付与ルールhttps://point.rakuten.co.jp/guidance/rule/

こんなとこに書いてました。コンビニで買った金額は、月末に合算されて0.5%がポイントになるとのこと。

ということは一日1本のペットボトルで150円x30=4500円 22ポイントもらえますね。ドラッグストアで食材や消耗品なんて買っていたら月に1万円とかいくでしょうから(化粧品とかもあるじゃないですか)50ptくらいはさらりともらえちゃいますね。

あとはまとめ買いなんかも楽天市場を利用すれば100円につき1ポイントだし。これは中々いけますね。

今回の検索ワードは「楽天edy 公共料金 ポイント」ですかね。

楽天edyを始めました

これ、買いました。

これはセットですが、実はバラバラに。(笑)

正直、楽天のページは全然親切じゃないと感じました。全然使い方がわからなかった。
とりあえずわかってたのは、

  1. edyのチャージはコンビニでできること。
  2. 200円で1ポイント溜まること。
  3. コンビニ・TSUTAYA・近所のドラッグストアーがedyに対応してること。
  4. iPhone用のアプリがあること。
  5. 楽天市場で買い物に使えること。

ってなところです。毎朝コンビニで買い物してるからポイント溜まっていいかなと思って購入

なんといろんなところに注意点がありました。

まず、iPhoneのアプリ。
カード番号で認証していろいろ出来ると思いこんでたんですが違いました。

パソリ(iPhone用)が必須。

でも、これで出先とかでもedyでサクッと買い物できるなら買いますよ!と思ったらさらに落とし穴。

いろんな人のコメントで見たら、残高照会・チャージはできてもショッピングができないらしい・・・いらない・・・

では、PCからなら買い物できるのか!と調べたところ・・・

パソリ(PC用)が必要。
(ちなみにこのUSBフラッシュメモリっぽい形じゃないのもある模様・・・型番が新しいかは調べてません)

楽天市場で買い物をしていく予定なのでこちらは購入しました。

届いた次の日には別ページで書いた「iPhone用のキーボード」を買ったんですが、そのときも一苦労しました。

・・・・edyをどうやって支払いに選択するのかわからない・・・

なんか、コンビニ支払などなどという支払方法があり、その後メールが届いてそのメールからのリンクでedyを選択する。という形でした。

終わってみればどうということはないけれど、なかなか不安だらけでございました。

しかし、これで楽天スーパーポイントをドンドン貯めていけるはず!

今回の検索ワードは「楽天 ポイント edy 貯める」って感じですかね。

iPhoneをノートPCにする外付けキーボード

わたくし、いろんなアーティストのサイトを管理させていただいてるんですが、移動中や本職の間も「更新依頼」は来るわけです。

自宅にいないときは当然、外出したまま更新するわけなんですが、フリックで更新するには限界があるというか大変面倒なのです。

調べたら種類が結構あったんですけど、その中から選んだ基準ですが、

  1. バッファロー製・・・やっぱり安心かな・・・と。
  2. 折りたたみ型・・・スライド型だと何となく強度が不足してそうな気がしまして。
  3. 大きさ・・・大きめなんです。まだ届いてないけどテンキーなしの普通のキーボードとあまり変わらないイメージで打ちやすそう。
  4. バッテリー内臓・・・USBで充電できるようなので、iPhoneの充電器と併用できて便利。
  5. スタンドつき・・・角度の調整はできなさそうだけど、折りたたんで入れるケース自体がスタンドになるとのこと。スタンドを別に用意しなくていいので便利そう。
  6. 楽天edyで買えるのでポイントが32ptほどもらえる
  7. Bluetooth・・・無線で使えるので好きな角度で使えて便利。
  8. 安い・・・Joshinが最安値だったけど3,200円。めちゃめちゃ安い。

ってな感じでこれに決めました。

使用感などは後日商品が届いてからのお楽しみです。わくわく

今回の検索ワードは「iPhone5 折りたたみキーボード オススメ」ですかね。

HTML5プロフェッショナル認定試験の公式サイトを見てきました。

HTML5プロフェッショナル認定試験のサイト(http://html5exam.jp)を見てきました。

レベル1のテストの内容は

  1. Webの基礎知識
  2. CSS3
  3. 要素
  4. レスポンシブWebデザイン
  5. オフラインWebアプリケーション(概要とマニフェスト)

という感じになっている様子。ちなみにレベル2はまだ思案中みたいです。

せっかくなので掲載されていた例題を転載しますね。

<レスポンシブWebデザインの問題>

Luke Wroblewski氏が提唱した「Mobile First(モバイルファースト)」の説明として正しいものを選びなさい。
HTML5をモバイルデバイスで高速に動作させるために考えられたアーキテクチャである。
モバイルデバイスの種類や画面サイズに合わせて、それぞれ専用のWebコンテンツを作るという考え方である。
モバイルデバイスでの表示を考えて、サイズなどをピクセル数ではなく%などの可変サイズで指定をするレイアウト手法の事である。
クライアントのデバイスがPCなのかモバイルデバイスか判別が付かない場合に、モバイルデバイス用のページを表示させるという考え方である。
マルチデバイス対応サイトにおいて、制約が多いモバイルサイトでの利用を優先的に設計・制作という考え方である。

答えはEです。
雑誌などを読んでる人は当たり前だったでしょうか。

自分はマークアップエンジニア的な活動が多いので、きちんと勉強していない「Webの基礎知識」の部分は不安です。

今回の検索ワードは「HTML5プロフェッショナル認定試験 例題 テキスト」ってとこですかね。

HTML5プロフェッショナル認定試験

HTML5プロフェッショナル認定試験が始まったみたいで、気になってます。

認定試験の公式サイトはhttp://html5exam.jpです。今後調べたらまた追記しますが、

認定試験に併せてレベル1の教科書が販売されたみたいです。これもチェックしないといけないですね。。。

今回の検索ワードは「楽天 HTML5 参考書」ですかね。