カテゴリー: 分類はまだない

以前の方法がmac OS 10.12でやりにくくなってしまったため、新しい方法を試してみました。

こちらのexport_diff_zip.shを改善してみました。
フォルダは一個上の階層に出力されます。

SourceTreeの使い方 | コミット間の差分ファイルの抽出 (カスタム操作を使う方法)

#!/bin/sh
if [ "$2" = "" ]; then
    git archive --format=zip --prefix=archive/ HEAD `git diff --diff-filter=d --name-only $1 HEAD` -o ../$1_HEAD_diff.zip
else
    git archive --format=zip --prefix=archive/ $1 `git diff --diff-filter=d --name-only $2 $1` -o ../$2_$1_diff.zip
fi

余談
Windows10では、こちらに掲載の情報でうまくいきました。

SourceTree（Windows環境）でコミット間の差分ファイルを出力する

Googleスプレッドシートをcronのように使いSlackに投稿する
http://developer.hatenastaff.com/entry/2016/01/15/170000

から、mentionを飛ばすに当たり、普通に書いただけでは動かなかったので、メモ。

コードを修正

https://github.com/motemen/gas-cronsheet-slack/blob/master/app.js

こちらのコードの27行目あたりに、
LinkNames: 1,
と追加する

var msg = new SlackMessage({
    username: SLACK_USERNAME,
    icon_emoji: SLACK_ICON_EMOJI,
    LinkNames: 1,
    header: '<' + sheet.getParent().getUrl() + '|' + sheet.getParent().getName() + '> @' + now
});

mentionを呼び出す箇所を書き直し

@bob
としたい場合
<@U024BE7LH|bob>
とする。
@U024BE7LH
はユーザーID。

ユーザーIDはこちらの方法で調べられる。
http://yatta47.hateblo.jp/entry/2016/02/02/215933

参考ページ

Slack API でユーザ・チャンネルの名前がリンクされないときの対処法 (あるいは takosan を試した件)
http://qiita.com/yuya_takeyama/items/e6fb25ec70b4d9618890

Message Formatting | Slack
https://api.slack.com/docs/formatting#control_sequences

git リポジトリから差分を取り出すスクリプト
を使えるようにするとき手こずったのでメモ。

リンク先の手順の通りにまずはセット。
それから、shellwords.rbというファイルを探す。
Mac10.10では
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/shellwords.rb
にあった。

ファイルの先頭に

Encoding.default_external = Encoding::UTF_8

の記述をしてセーブ。

これでほぼ動くようになる。

参考ページ

http://blog.44uk.net/2013/08/13/git-export-tools-for-sourcetre/
http://qiita.com/lab3-34/items/e69ab8d0c51c9b64fe02

styledoccoを使えるようにしてみたのだけど、
試行錯誤してて時間がかかったのでメモ。
2014年9月現在のお話なのでご注意ください。
作業環境はwindows8.1。

Node.jsをインストール

バージョン管理の必要性もあるという説もあるのですが、とりあえずインストーラでインストール。
http://nodejs.org/download/

参考サイト様
http://www.tam-tam.co.jp/tipsnote/javascript/post3479.html
http://dev.classmethod.jp/server-side/language/coffeescript-and-typescript-install-designer/

コマンドプロンプトを立ち上げる

Windowsのコマンドプロンプトなる黒い画面を立ち上げる。
普段使わないのでどきどきする。

gruntとstyledoccoをインストール

作業が自動化できるので、gruntとともにインストール。
自動化できると楽なのです。
参考サイト様
http://dev.classmethod.jp/etc/grunt-styledocco/

おまけ。gruntをもっと使いたい

gruntを使いこなすと便利そうなので、メモ。
http://isee-web.net/?p=510

ヘッダーに
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
  appId: '508723992516876',　//アプリID
  status: true,
  cookie: true,
  xfbml: true
});
 
window.fbAsyncInit = function() {
  FB.Canvas.setAutoGrow();
}
function sizeChangeCallback() {
  FB.Canvas.setAutoGrow();
}
</script>

</body>の直前に
<script>
 FB.Canvas.setAutoGrow({ width: 810, height: 2300 });
</script>

cssもだいじ。

html,body{
	height:auto;
}

html {
	overflow-y : hidden;
	overflow-x : hidden;
}

以下Araxis Mergeを使う
http://www.agtech.co.jp/products/araxismerge/

1.CSSファイルを統合する
　文字コードを逐一UTF8Nに設定しておくこと。

2.HTMLファイルを統合する
　手動のほうが早いかも？

以下DFを使う
http://freesoft-100.com/review/df.php
3.jsファイルを統合するorコピーしてくる

4.画像ファイルをコピーしてくる

Dreamweaverは
ソース内の”charset”を読み取り
ファイル自身の文字コードは無視し
頼んでもないのに
charsetに記述した文字コードで
ファイルを開いてくれちゃう

【文字コード統一の正しい手順】
①Dreamweaverで、charsetを Shift-JIS -> UTF-8 に置換（ローカルサイトを全て一括置換）
②そのまま上書き保存。（ここで、charsetとファイル自身の文字コードにはまだ矛盾がある）
③ツールを使ってShift-JIS -> UTF-8に文字コードを”本当に”変換。

■動画の形式について

H.264(mp4)と Ogg Theora(ogv)を抑えておけば全ブラウザで表示できる。
Google等によるWebM(webm)押しの状況を見ているとやはり三つ対応しておくのが無難かもしれない。

参考
http://www.aoharu-b.com/cgi/sk/2011/09/html55video.html

その際、MIMEタイプの記述も忘れずに。

■記述方法について

最新ブラウザではvideoタグが使えるが、まだまだ対応していないブラウザも多い。（IE8以前など）
プラグインを使い、videoタグに対応しないブラウザではflashで再生させる仕様にしたほうがいい。

mediaelementjs
http://mediaelementjs.com/

日本語での紹介いろいろ
http://blog.alt-scape.com/archives/415
http://news.mynavi.jp/articles/2010/09/28/html5-video-and-mediaelementjs/index.html
http://www.inazumatv.com/contents/archives/6181
http://www.advertimes.com/adobata/article/7281/tadashiku.jp/2012/05/14/html5-video%E3%82%BF%E3%82%B0%E3%82%92%E6%B4%BB%E3%81%8B%E3%81%97%E3%81%9F%E3%80%81%E3%83%95%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%81%AE%E5%8B%95%E7%94%BB%E5%86%8D%E7%94%9F%E3%82%B5/

これを使えば、mp4しか用意していなくても多くのブラウザでの再生が可能になる。
以下記述例

<video id="movie" width="410" height="270" poster="img/movie_thumb_big.png" preload="auto" controls="controls">
<source src="movie/cm30pc.mp4" type='video/mp4'>
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="410" height="270" type="application/x-shockwave-flash" data="build/flashmediaelement.swf">
	<param name="movie" value="build/flashmediaelement.swf" />
	<param name="flashvars" value="controls=true&poster=img/movie_thumb_big.png&file=movie/cm30pc.mp4" />
	<!-- Image as a last resort -->
	<img src="img/movie_thumb_big.png" width="410" height="270" title="No video playback capabilities" />
</object>

<script>
	// using jQuery
	$('video').mediaelementplayer({
		// useful for <audio> player loops
		features: ['playpause','progress','volume','postroll']
	});
</script>

■テストブラウザ（Windws7にて）
IE6(IEtester)＞＞Flashでの再生ＯＫ
IE7,8 (開発者ツール)＞＞Flashでの再生ＯＫ
IE9＞＞videoタグでの再生ＯＫ
firefox(18.0.2)＞＞videoタグでの再生ＯＫ
chorome(24.0.1312.57 m)＞＞videoタグでの再生ＯＫ
safari(5.1.7)videoタグでの再生ＯＫ

■不都合？
IE9の一部の環境で不都合報告がある。大丈夫かな。
http://d.hatena.ne.jp/ke_takahashi/20120810/1344593098