OSX 写真で取り込んだ画像の場所

OSX 写真で取り込んだ画像はどこにあるのか。

一見するとjpgとかで見えません。

ユーザーのピクチャの中に、「写真ライブラリ.photolibrary」というファイルがあります。

写真1

それを右クリック。

写真2

パッケージの内容を表示を選択。

写真3

Mastarsのフォルダをたどっていきます。

 

写真4

そうすると、jpgデータがあります。

閲覧しているページが利用しているCMSやソフトウェアがわかるアドオン(google chrome,firefox)

昔から使っているサイト分析に活躍するブラウザの拡張機能。
すぐに名前を忘れてしまうのでメモとして残しておきます。

今見ているサイトはどんなCMSで作られているのか(Wordpress,
durupal,..)などが一目瞭然でわかるのですごく便利です。

こんな感じ
Appspector

Google Chrome 拡張機能
Appspector
https://chrome.google.com/webstore/detail/appspector/homgcnaoacgigpkkljjjekpignblkeae

Firefox アドオン
Wappalyzer
https://addons.mozilla.org/ja/firefox/addon/wappalyzer/

youtube動画のサムネを取得する

Youtubeで動画をアップすると自動でサムネが生成されていると思いますが、

このサムネを別サイトで使いたい場合、以下の方法で取得できました。

http://i.ytimg.com/vi/動画ID/画像サイズ.jpg

動画IDは、

なら、 watch?v=以下の部分

サムネのサイズ

デフォルト:120x90

サムネ1:120x90

サムネ2:120×90

サムネ3:120×90

サムネ4:320×180

サムネ5:480×360

サムネ6:640×480

サムネ7:1280×720

 

思った以上にカンタン。さすがGoogleです。

参考サイト

YouTube動画のサムネイル画像を取得する

YouTubeの動画のサムネイル取得が思った以上に簡単だった件

robots.txtとクロール最適化 まとめ

robots.txtの役割

クローラーにインデックスしてほしくないページやディレクトリを知らせるためのもの。サイトマップ(sitemap.xml)を知らせる

クローラーがアクセスしてきた時に最初にrobots.txtを探し、見つかれば
その記述に設定されているそうです。(※例外もあり)

記述方法

1)制限したいクローラーを記述

すべてのクローラーが対象

Googlebotが対象

2)制限対象のディレクトリ又はファイル名

Disallow: ファイルorディレクトリ

backupというディレクトリを指定

wp-adminディレクトリ

.phpファイルを拒否

特に制限しない場合

3)サイトマップのURL

sitemap.xmlのURLを1行あけて記述

サンプル

User-Agent: *
Disallow: /

http://example.com/sitemap.xml

robots.txtの注意事項

いくつかのサイトにも記載されていましたが、

robots.txtは全てのWebクローラーに対して厳密に動作するわけではありません。

robots.txtに強制力はなく、お願いする程度の効果しか無いということ。

また、robots.txtはだれでもURLを直接たたけば閲覧可能なので、見られたく無いディレクトリが一目瞭然になります。
なので、プログラムの管理ページや個人情報を管理しているフォルダなどにはユーザー認証、SSL暗号化などの対策が必須です。

 

参考サイト

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

サブディレクトリにインストールしたwordpressをルートに表示させる

いろんなところで書かれていますが、自分用のメモです。

管理画面、設定>一般設定

「サイトのアドレス」をルートディレクトリに変更

修正前) http://www.radia.jp/wp

修正後) http://www.radia.jp

wordpressインストールディレクトリ直下にある
.htaccess,index.php
をルート・ディレクトリにコピーする

ルートにコピーしたindex.phpを編集

修正前)
require(‘./wp-blog-header.php’);

修正後)
require(‘./wp/wp-blog-header.php’);

管理画面、設定>パーマリンク設定
なにも変更せずに更新。
※.htaccess が書き込み可能な状態に。

Google Map API V3 1ページに複数マップを表示する(レスポンシブで)

会社案内やショップ案内のページで、グーグルマップを2つ設置することになった時の
備忘録。

参考にしたサイトはこちら
[Google Map V3]地図を複数同時に表示する
ページ内に二つのGoogle Mapを設置する!

地図上にマーカーを表示させて、吹き出しに説明を出す

Google Map をレスポンシブ対応に

Googlemap apiの読み込み

 

bodyに加える

 

 

HTML
1カ所目

 

2カ所目

 

CSS

 

 

wordpressでカテゴリごと記事一覧取得など

wordpressでカテゴリごとに記事を表示するとか、特定のカテゴリの記事一覧を表示するというのはよくあるので、下記サイトを参考に備忘録。

WordPressでカテゴリー別記事一覧を表示する方法
[解決済み] [閉] 特定のカテゴリーの記事一覧を表示したい。

特定のカテゴリの記事一覧

 

カテゴリーある分だけ記事一覧

 

カテゴリーIDと順番を指定して記事一覧

 

センタリング(中央揃え)のまとめ

テキストや要素をセンタリングするのにちょっくら迷ったのでこの機会にまとめておくことに。

text-align:centerを使う

最もカンタンと思われる方法。
但し、インライン要素にしか効かない。
なんで効かないんだろうと思ったらdisplay:blockをしてされていたってことが。。。

marginを使う

横幅が決まっている要素ならコレでも良い。
margin:0 auto;

positionを使う

これも(縦横)中央揃えする要素のサイズが決まっている時に有効です。
width:200px height:100pxの要素をセンタリングするには

* position:fixedでもいけます。

要素のサイズがわからない場合

擬似要素を使う。

 

[CSS]サイズが分からない要素を真ん中に配置するテクニック
http://coliss.com/articles/build-websites/operation/css/css-centering-in-the-unknown-by-css-tricks.html

floatさせた要素をセンタリングする

listを使ったナビゲーションをセンタリングしたいときなどに。

リスト全体(ul)を右に50%ずらし、各リスト(li)をネガディブマージンで左に50%戻す。

センタリング DEMO

floatで並べたリストのセンタリング
http://hail2u.net/blog/webdesign/centering-floated-list.html

中央揃えでもいろいろなテクニックがありますね。

:first-child の使い方を勘違いした

:first-child擬似クラスは、IE7から対応しているためよく使われる擬似クラスですよね、何度も使っていたにもかかわらず勘違いしたので戒めとして書き記しておきます。

:first-child擬似クラスは、親要素の一番最初の直下の子要素に適用されます。

正しくない例1

css

articleの最初の子要素は「h2」なので適用されません。

【解決方法1】 隣接セレクタを使う

DEMO

【解決方法2】 :first-of-typeを使う

:first-of-type疑似クラスとは、指定した種類の最初の要素に適用される。
対応しているのはIE9以降なのでそこ注意

css

DEMO

間違った例:2

これは全くの勘違い。親要素に:first-childをつっくければ、その最初の子要素に自動的にスタイルが適用されると思っていたという恥ずかしい話。

間違ったcss

正しくは

DEMO

Rubygem コマンド

sass を使うことになって初めて知ったrubygem。
ruby用のパッケージ管理システムだそうです。

初心者が知っておきたいコマンドのまとめというか自分のメモ。

インストール

$ gem install 名前

$ gem install 名前 -v

アンインストール

$ gem uninstall 名前

インストールしたgemをリストアップ

$gem list キーワード

アップデート

$ gem update 名前

$ gem update
#名前を指定しないとインストール済みのgemすべて更新

アップデートする必要がするgem一覧

$ gem outdated