jquery スクロールするとニュルっと出てくるこのページのトップへリンク

後でコピペする用に。

 

html

だいたい bodyにid=”top”つけてます。

<div class=”pagetop”>~</div>は </body>タグ直前あたりに

SCSS

CSS

 

jQuery

 

 

node.js のインストール nodebrewで OSX Yosemite

OSX Yosemite でnode.js をインストールした覚え書き。

nodebrew はmac用バージョン管理ツール

nodebrewをインストールする

こちらを参考にターミナルにコピペ

node.js 入れるなら nodebrew が超簡単
http://tacamy.hatenablog.com/entry/2013/02/10/141434

環境設定ファイルにパスを通す

nodebrewがインストールされたか確認する

node.js をインストールする

nodebrewでインストールできるバージョンを確認する

バージョンを指定してインストール
今回はv0.12.8をインストール

インストールしたバージョンの一覧を確認

どのバージョンのnode.jsを使うか指定

無事インストールできました!

Adobe Creative Cloudのインストール・アップデートでエラー U44M1I210

Adobe CCでインストール時のエラー対処について。
環境はOSX Yosemiteです。

スクリーンショット 2015-11-16 0.15.32

CreatveCloud Installerをダウンロードしてから、通常通りインストールしますが、なぜかインストールが41%とかでそのまま進まない。

キャンセルして再度インストールしようとしても同じ現象。

アドビサイトからインストールするといいみたいなことを聞いたのでその手を使ってみたら、インストールはできたけれど、エラーが。

ダウンロードしたファイルを抽出できません U44M1I210

スクリーンショット 2015-11-10 9.29.15

アップデートしなくても、特に問題ないのでそのままでもよかったんですがなんか気持ち悪いので一度すべてアンインストールして、

以下のページを参考にAdobeCreativeCloudCleanerTool.dmgをダウンロードして実行しました。

Creative Cloud Cleaner Tool を使用してインストールに関する問題を解決する
https://helpx.adobe.com/jp/creative-cloud/kb/cc-cleaner-tool-installation-problems.html

それで再度、インストールしてみたけれど、同じエラーが。

さらにググってみると、セーフモードでインストールするといいよという記事を見つけました。

OSXをセーフモードで起動するのは、Shiftを押しながら、電源オンするだけ。

セーフモードで起動後、インストール実行したところ、エラーなしでいけました!

ひとまずこれでスッキリ。

 

ちなみにインストールした各アプリをアンインストールするには、

アプリーケーションフォルダ内の各アプリにuninstallerがあります。

スクリーンショット 2015-11-14 9.12.59

OSX Yosemite にSass,Compassのインストールとエラー対処

長年愛用してきたmacbookpro(2008 early)に別れを告げるべく、ついに新型MJLT2J/Aを購入しました。
appleサイトでは、15.4インチ 2.5GHzは、282,800円(税別) 2015年10月20日現在。
Applecare protectionを付けたら、税込35万近くなります–;

この辺に円安の影響がでてるんでしょうか。痛いですね~
これを購入しようかと思いましたが、結局秋葉原のWinkさんで購入しました。

APPLE Mac ノート
MacBook Pro Retinaディスプレイ 2500/15.4 MJLT2J/A MJLT2J/A
https://www.winkdigital.com/item/index.jsp?pid=156292&stid=1

ヤマトの3年間延長保証もつけてみました。
過去に壊れた経験があるので。
そのときはヨドバシの延長保証で10万近くのものカバーしてもらいました。
アップル製品iphone以外は延長保証は3年までしかつけられないようです。
ここは残念だけど

昨日、無事商品が届き、現在セットアップ中^^

OSの起動の速さにびっくりしてます。
多分、電源押してから、1分かかってないんじゃないかと。
今までのmacbookproも愛着がありますが、新しいモデルってスゴイですね。

で、いろいろアプリをインストールしたりしていて、sass,compassをインストールするところでちょっとつまづき。

osxには、rubyはすでにインストールされていますので
一応、updateを。

環境によってはsudoつけないとパーミッションエラーになります。

Sassをインストール

バージョン確認

 

続いて同様に

すると、

 

のようなエラーメッセージが。
調べると、Command Line Developer Toolsをインストールする必要があるみたいでした。

すでにXcodeをインストールしていたので、Xcodeを起動し
Open Developer Tool->More Developer Tools

xcode

するとAppleDeveloperサイトのDownloads for Apple Developerページが開くので(要AppleIDログイン)
Command Line Toolsをインストール

command line toolインストール

スクリーンショット 2015-10-21 7.13.30

 

こちらのサイトを参考にさせていただきました

http://koukitips.net/mac_terminal_sass_compass/

MavericksでCommand Line Tools for Xcodeをインストールする
http://qiita.com/3yatsu/items/47470091277d46f3fde2

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