git hub install

サインアップ画面。個人のアカウントを登録する。 

 publicかprivateかを選択。privateは有料。 

プランはいつでも変更が可能みたいです。その下のチェックボックスをクリックして、先に進みます。

自分のチームを作成する。

チームの名称と、請求書の送り先となるメールアドレスを入力する。（有料プラン利用の際に、、、）

 仕事用のアカウントと個人用のアカウントの関係は今の段階ではわかりません。

とにかく作ってみます。

これでアカウントは作ることができました。 

アカウントのページに入って、どんな具合か探検してみます。 

「setting」タブを開いてみます。

「organization」アカウントなので、メンバーのアクセス権限などを設定できるようです。メンバーに、「リポジトリの作成」「リポジトリの削除」「リポジトリの見た目（？）」などを変更する権限を与えるのかを設定できます。とりあえずすべてチェックボックスを外しておきました。

 一番下にあるデフォルトの権限を以下のように変更しました。

「people」タブを開いてみます。

 どうやら「organization」アカウントのオーナーになっているようです。

右上の緑色のボタンをクリックして、メンバーを招待できるようです。

「repositories」タブを開いてみます。 

 ここから新規のリポジトリを作成できそうです。リポジトリのオーナーを選択できます。「organization」アカウントにするのか「personal」アカウントにするのか選択できるのです。なるほど！これは便利ですね。

プルダウンメニューにある「git ignore」とは以下のようなものらしい。

基本.gitignoreを使うと無視する（Gitのトラッキングの対象外とする）ファイル or ディレクトリを指定できる。 .gitignoreは複数のディレクトリに置くことができる。 

「create repository」ボタンをクリックして、リポジトリを作成します。

「readme」ファイルを作成するにチェックしていたので、自動的にファーストコミットされて、readmeファイルが作成されています。 

 中段にある、「upload files」をクリックして、リポジトリにファイルをアップロードしようと思います。 

 一度にアップロードできなかったので、複数回に分けてアップしました。

クローンを作るには、右上の緑ボタンをクリックするみたいです。

 クローンを作るのに必要なURLが表示されています。 

リモートデスクトップ

faq3.dospara.co.jp

画像ファイル名だけの一覧を抽出する / indesign データ結合 その2

手順2　CSVのデータをindesignに流し込む

「ファイル」「新規作成」

 ドキュメントの設定をする。

 続いて「マージン」「段組み」を設定する。

indesignでオブジェクトを作るには必ず箱が必要になります。

画像を配置するときは「画像を入れる箱」

文字を配置するときは「文字を入れる箱」が必要。

というわけで、画像用のの箱を作る。 

 続いて、文字を入れる箱を作ります。

A4横使いで　３：２の写真を4枚レイアウトする。

A4に対して余白を均等に10mm付けて、画像のサイズを132mm*88mmにする。

写真と写真の間は13㎜になる。

縦は、210-10-10-88-88=14

テキスト用のボックスは高さ7mmにする。

 A４に４枚の写真をレイアウトするけれども、「箱」は一つ作ればよい。

そしていよいよデータを流し込む準備に入ります。

「ウィンドウ」「ユーティリティー」「データ結合」

この作業は「データ結合」です！

 データソースとなるCSVファイルを選択する。

 表示された項目を、作ったボックスにドラッグアンドドロップする。

この時点で、テキストのフォントや級数、左右揃えなどを指定しておく。

プレビューにチェックしておくと、下のようにプレビューが表示される。

 メニューを表示する。

右開き、左開き

右綴じ・右開きとは、本を読み進める際にページを右に開いていく形式のものを指します。表紙を表にした場合、右側が綴じられているものです。

日本語の縦書きでは、視線の進行方向が左に向かっていくため、右綴じは縦書きの書籍・雑誌などで多く採用されています。

日本の漫画雑誌や単行本などでは右綴じが採用されています。

インデザインのカタログデータから、WEB用の商品画像一括で作る

 新規ドキュメントを作って、ページの設定をする。

最終的に必要な商品画像のサイズを入力します。

ここでは800px*800pxに設定します。

四隅のマージンを指定します。

 それぞれの商品画像で、決められた位置にロゴや、商品コードなどを配置しなければいけないときは、予めそれらのためのスペースを指定しておく。

 商品数が多いときなどはページの外に送品コードを記載するスペースを作っておくと後で検索をかけたりすることができて非常に便利。

↓こんな感じ、、、

これでページができました。

あとは商品台帳を横に開いて、ドラッグアンドドロップしていきます。

最後に、「ファイル」「書き出し」でJPEGを書き出せば一括で商品画像が出来上がり！

画像ファイル名だけの一覧を抽出する / indesign データ結合 その１

目的　

indesignを使って、コンタクトシートを作る。

サイズはA４（横）。

３：２の画像を4枚配置する。

各々の画像の下にはファイル名（テキスト）を記載する。

1. 画像のファイル名（あるいはキャプションのようなテキスト）と画像のファイル名を列挙したCSVファイル（エクセルのシート）を用意する。ちなみに、、、CSVというは Comma Separated Valueの略で、Comma（カンマ）で Separated （区切った）Value（値）です。
2. インデザインを使って流し込む。

手順1　まずテキスト（ファイル名）の列と画像のファイル名の列を並べたエクセルのシートを作る。

「dir」表示形式を変更するオプションがいくつか用意されています

windowsのコマンド「dir」に「/b」オプションをつけると、

ファイル名またはディレクトリ名のみを表示します。

C:\ のディレクトリ

2016/03/15 09:58 <DIR> extensions
2017/01/13 22:12 <DIR> localserver
2016/02/13 22:10 <DIR> Logs
2006/10/06 15:42 2,853 pdiports64.inf
2016/07/16 20:47 <DIR> PerfLogs
2017/09/02 00:52 <DIR> Program Files
2017/07/12 22:27 <DIR> Program Files (x86)
2017/09/02 00:50 0 Recovery.txt
2017/05/20 20:45 <DIR> Ruby23-x64
2017/09/02 00:47 <DIR> Temp
2017/01/29 08:25 <DIR> Users
2017/09/10 15:34 <DIR> Windows
2017/01/15 00:27 <DIR> xampp
2 個のファイル 2,853 バイト
11 個のディレクトリ 83,555,377,152 バイトの空き領域

C:\>dir /b
extensions
localserver
Logs
pdiports64.inf
PerfLogs
Program Files
Program Files (x86)
Recovery.txt
Ruby23-x64
Temp
Users
Windows
xampp

ファイルに出力するには「 > [ファイル名]」を付け足します。
これはdirコマンドのオプションじゃなくて
DOSコマンドの標準的な出力命令です。

dir /b [ファイルが入っているフォルダのパス] > [書き出すファイルのパス]

 F:\>dir/B f:\jobPhoto\200827_yotubaFuji\200827_yotubaFuji\output\quickProofJPG > f:\jobPhoto\200827_yotubaFuji\200827_yotubaFuji\output\fileName.csv

excelでcsvファイルを作成する。

「A」列にはテキスト、今回は画像のファイル名を画像の下に記載したいのでファイルの名前にする。列の先頭は「file name」とする。「B」列には画像のファイル名を並べる。画像のファイル名であることを認識させるための記法があるのでそれに従い、「'@image」と入力する。

ちなみに「'」は文字列リテラル。「@image」と「文字列」で入力する。

basic認証を使ってみたい、、、

以下を参考にしてみます。

いまさらながら、Basic認証のつけかた - Qiita

まずは、IDとパスワードを作成する。

https://ssl11.secureserver.jp/~shtml/htaccess/make_htpasswd.html

以下のような画面が出てくる。

AuthUserfile /フルパス/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

 AuthUserfile /フルパス/.htpasswdサーバーのルートディレクトリからの.htpasswdへのパスを指定する。/usr/local/...とか/home/pass/...とかそういうの。

AuthGroupfile /dev/nullグループごとにアクセスを許可する、という指定。「/dev/null」とは、そのようなファイルは存在しないという意味。つまりグループごとでのアクセス制限はしないという意味。

AuthName "Please enter your ID and password"ダイアログに表示される文章を指定。日本語だと文字化けするようだ。

AuthType BasicAuthTypeを指定。「Basic（ベーシック認証）」と「Digest（ダイジェスト認証）」の2種類があって、Digestのほうが安全らしい。require valid-userユーザーが誰であろうと、入力したIDとパスワードが合っていればアクセスできるという意味。特定ユーザーだけにアクセスさせたい場合は「require user xxx」とかする。

.htpasswdIDとパスワードを書きこむファイル。.htpasswdというファイル名で作るらないといけないらしい。.htaccess用のパスワード作成ツールがネットにたくさん出回っているのでそこでコードを生成。例えばID/username,PASS/hogehogeとしたいとすると、username:us3HhKtHHqM0Uというコードを書けばよい。パーミッションパーミッションは604！これでだめなら644？その他注意事項ファイルの最後では改行したほうがいいかもしらんね。

.htpasswdのファイルは、DocumentRootより上に設置すること。

• それが無理な場合は.htaccessファイルに「AddHandler cgi-script htpasswd」の一行を加える。
• もしくは.htaccess ファイルに.htaccessと.htpasswdにアクセスできなくさせる下記のようなコードを書く。

.htaccess

<Files ~ "^\.ht">
    Order allow,deny
    Deny from all
    Satisfy All
</Files>

  500 Internal Server Error (T_T)

.htaccess ファイルに文法誤りがあると、500 Internal Server Error となる。再度チェックしてみること。

サーバーの設定によっては、.htaccessファイルの設定が無効になっていたり、設置場所が限定されていたり、ディレクティブの限定的な使用しか出来ない場合があって、その場合 500Internal Server Error が発生するとのこと。見たことないですが。そんなところは潔く諦めて他のサーバーを使うこと。

 Authorization Required (T_T)

ID・パスワードには、記号は使えないかもしれないと思っている。今のところ使えた経験無し。使わなかったらうまくいくこと多し。なので記号を使わないで数字と英字だけでやってみてください。それでもだめなら単に記述間違いではと思います。

  特定のIPからのみアクセスできるようにするには

下記を.htaccessに追加する。

.htaccess

Satisfy any

order deny,allow
allow from xx.xx.xx.xxx/xx.xx.xxx.xxx

deny from all

swiper slider

お役立ち記事は保存したい。

qiita.com

jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。

【使い方（Usage）】

1. GitHubから最新バージョンのSwiperをダウンロードする。 Swiper
2. 下記をHTMLに記載

.html

<head>
  ....
  <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css">
  <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script>
  ....
</head>

<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド１の内容を好きなように設置する -->
      </div>

      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- ここにスライド２の内容を好きなように設置する -->
      </div>

      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド３の内容を好きなように設置する -->
      </div>
      <!--Etc..-->
  </div>
</div>
</body>

　3. CSSのidangerous.swiper.cssを開いて、Swiper部分の高さを設定（ファイルの最後のほうにある）

.css

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

4.Initialize（初期化） ドキュメントが読み込まれたとき (もしくはウィンドウがロードされたとき)Swiperを走らせる

.js

<script type="text/javascript">
/*======
ドキュメントレディかウィンドウがロードされてから使用すること
例:
jQueryだったら: $(function() { ...code here... })

もしくはJavaScriptのみでwindowがloadされたときにスタートさせるなら
window.onload = function() { ...code here ...}

もしくはJavaScriptのみでdocumentがreadyになったときにスタートさせるなら
document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)

という感じで
=======*/

/*
jQueryまたはZeptoの場合。
*/
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

/* 上か下かのどちらかを記述する。jQueryを使っていない人は↓こちらだけ。使っている人は↑だけ。 */

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}
</script>

5.完了　

【オプション一覧】

パラメータ	タイプ	デフォルト値	記入例	解説
speed	数値	300	600	スライドアニメーション間隔の秒数（ミリ秒）
autoplay	数値	5000	-	オートプレイの時の間隔秒数（ミリ秒）。この値がないときはオートプレイしない。
mode	文字列	'horizontal'	'vertical'	horizontallyで水平（横）スライド、verticallyで垂直（縦）スライド。
loop	真偽	false	true	trueでループ。デフォルトはループしない。
loopAdditionalSlides	数値	0	2	ループの後に、いくつのクローンを用意するかの数値。New in 2.0.
slidesPerView	数値 or 'auto'	1	4	スライドコンテナに何枚表示させたいか。（carousel mode）autoもサポートしていて、コンテナの幅によってフィットする。ループと共用できない。New in 2.0.
slidesPerGroup	数値	1	2	いくつのスライドでグループ化するか。デフォルトは1。carousel modeとの組み合わせで便利。
calculateHeight	真偽	false	true	true にすると、コンテナの高さを計算してスライド毎に高さ設定してくれる。レスポンシブレイアウトや高さが不確定な場合には便利。New in 2.0.
updateOnImagesReady	boolean	true	false	すべての画像がロードされたあとで初期化（構築？）されるようにする。 New in 2.0.
releaseFormElements	boolean	true	false	フォーム要素を許可するかしないか。New in 2.0.
watchActiveIndex	boolean	false	true	If enabled the Swipe recalculates activeIndex dynamically during touch interactions New in 2.0.
visibilityFullFit	boolean	false	true	trueのとき、表示されているスライドで、表示領域を隙間なく埋める。New in 2.0.
autoResize	boolean	true	false	ブラウザのウィンドウサイズによって自動リサイズをするかしないか。New in 2.0.
resizeReInit	boolean	false	true	ウィンドウサイズが変更されるたびに再構築するかしないか。New in 2.0.
DOMAnimation	boolean	true	false	custom DOMでのアニメーションをさせるかさせないか。css transitionsができないIE7～9などのため。New in 2.0.
resistance	boolean or '100%'	true	false	falseで跳ね返り禁止。100%をセットすると無制限に跳ね返る。New in 2.0.
noSwiping	boolean	false	true	trueにして、"noSwipingClass" をスライドに与えればスワイプできなくなる。New in 2.0.
preventLinks	boolean	true	false	スライド中にクリックがされないようにするかしないか。
initialSlide	number	2	0	先頭スライドを番号で指定する。
useCSS3Transforms	boolean	true	false	falseを設定すると、CSS3でアニメーションさせないようにできる。ただしposition(left:top)を使っての再現になるので、クォリティを保つためにパフォーマンスが低下する。ときどきCSS3でうまく動かないデバイスがあったりするので、そのときはfalseにしてみてね。
フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container)
freeMode	boolean	false	true	各スライドの位置を固定しないでフリーにするかしないか。
freeModeFluid	boolean	false	true	スライドからカーソル、タッチを離してもしばらくイージングするかしないか。
scrollContainer	boolean	false	true	true をセットすると、スクロールエリアみたいな感じで使える。
momentumRatio	number	1	2	タッチを離した後の跳ね返り値。 New in 2.0
momentumBounce	boolean	true	false	falseで跳ね返り禁止。New in 2.0
momentumBounceRatio	number	1	2	跳ね返り効果の値。New in 2.0
スライドのオフセット（ずらしたりするやつ）関連(Slides offset)
centeredSlides	boolean	false	true	アクティブなスライドが必ず真ん中にくるようにする。New in 2.0.
offsetPxBefore	number	0	100	一番最初のスライドをオフセット（引っ込めるとか）したいときに、左の境界線からの数値（ピクセル単位）を入れる。 New in 2.0.
offsetPxAfter	number	0	100	右側のスライドをオフセット（引っ込めるとか）したいときに、右の境界線からの数値（ピクセル単位）を入れる。New in 2.0.
offsetSlidesBefore	number	0	2	左端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
offsetSlidesAfter	number	0	2	右端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
タッチ、マウスの操作関連(Touch/mouse interactions)
touchRatio	number	1	0.8	Touch ratio
simulateTouch	boolean	true	false	trueのとき、タッチと同じような動作をマウスでも受け付ける。クリックとかドラッグでスライドを動かせる。
onlyExternal	boolean	false	true	trueにすると、API機能からしか操作できなくなる。タブ形式とかで使いやすい。
followFinger	boolean	true	false	falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる。
grabCursor	boolean	false	true	trueにしたとき、マウスオンしたときにカーソルが「掴む」マークになる。ちょっとした気遣いですね。
shortSwipes	boolean	true	false	短いスワイプをさせたくないときにfalseを設定。
moveStartThreshold	number	false	100	Threshold（しきい値）をピクセル単位での調整ができる。スワイプを動き出させるのに、どれくらいのスワイプ動作を必要とさせるか、という値。"touch distance"がこの値より低いと、動かない、そうだ。
ナビゲーション関連(Navigation)
keyboardControl	boolean	false	true	キーボードのカーソルキー（矢印）で操作できるようにするか、しないか。
mousewheelControl	boolean	false	true	マウスホイールでスライドを操作せきるようにするか、しないか。
ページネーション(Pagination)
pagination	string or HTML Element	-	'.my-pagination'	ページネーションのセレクター名を設定できる。例では「my-pagination」というクラスをページネーションタグに当てられる。もしくはHTML要素をいれてもいい。New in 2.0
paginationClickable	boolean	false	true	ページネーションボタンをクリックでスライド操作できるようにさせるか、しないか。New in 2.0.
paginationAsRange	boolean	true		trueのとき、ページネーションボタンが表示スライドと連動するように、Classがあてがわれる。２枚以上を同時表示させるスライドで効果的。New in 2.0.
createPagination	boolean	true	false	trueのとき、ページネーションを作成。たくさんのspanタグが生成され、各spanにswiper-pagination-switchというクラスがあてがわれ、カレントのスライドにはswiper-active-switchというクラスがあてがわれる。スタイルを当てるのに便利です。
名づけ関連(Namespace)
wrapperClass	string	'swiper-wrapper'	'my-wrapper'	スワイパーを包んでいる大外のタグのクラスを指定できる。デフォルトは'swiper-wrapper'。
slideClass	string	'swiper-slide'	'my-slide'	各スライドのクラスを指定できる。複数のスライダーを設置していて、違うスタイルを当てたいときなどには便利。デフォルトは'swiper-slide'。
slideActiveClass	string	'swiper-slide-active'	'my-active-slide'	アクティブ中スライドのクラスを指定できる。デフォルトは'swiper-slide-active'。New in 2.0.
slideVisibleClass	string	'swiper-slide-visible'	'my-visible-slide'	表示中のスライドのクラスを指定できる。デフォルトは'swiper-slide-visible'。New in 2.0.
slideElement	string	'div'	'li'	スライドのタグはデフォルトでdivを使用しているが、変更も可能。例ではliに変えている。
noSwipingClass	string	'swiper-no-swiping'	'stop-swiping'	CSS class of html element that will be used to prevent swiping when "noSwiping" parameter is set to true. New in 2.0.
paginationElement	string	'span'	'div'	ページネーションのボタンのタグはデフォルトでspanを使用しているが、変更も可能。例ではdivに変えている。
paginationElementClass	string	'swiper-pagination-switch'	'my-switch'	ページネーションスウィッチのクラス変更が可能。New in 2.0.
paginationActiveClass	string	'swiper-active-switch'	'my-active-switch'	ページネーションのアクティブボタンのクラス変更が可能。
paginationVisibleClass	string	'swiper-visible-switch'	'my-visible-switch'	ページネーションの表示中ボタンのクラス変更が可能。New in 2.0.
コールバック関連(Callbacks) ※動作完了時に呼び出す場合とかに
queueStartCallbacks	boolean	false	true	"true"で、"slideChangeStart"を加える。"slideChangeStart"は、multiple swipes/transitionsをしているときに発生するコールバック。New in 2.0.
queueEndCallbacks	boolean	false	true	"true"で、"slideChangeEnd"を加える。"slideChangeStart"は、multiple swipes/transitionsの直後に発生するコールバック。New in 2.0.
onFirstInit	function	-	function(swiper){ do something }	最初の初期化の直後に発生するコールバック。functionを書き込むことで実行。 New in 2.1
onInit	function	-	function(swiper){ do something }	すべての初期化、再初期化の直後に発生するコールバック。functionを書き込むことで実行。New in 2.1
onTouchStart	function	-	function(swiper){ do something }	タッチしたら発生するコールバック。functionを書き込むことで実行。
onTouchMove	function	-	function(swiper){ do something }	タッチが動いたら発生するコールバック。functionを書き込むことで実行。
onTouchEnd	function	-	function(swiper){ do something }	タッチを離したら発生するコールバック。functionを書き込むことで実行。
onSlideReset	function	-	function(swiper){ do something }	タッチを離してカレントアクティブスライドがリセットされたら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeStart	function	-	function(swiper){ do something }	前後へのスライドが始まったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeEnd	function	-	function(swiper){ do something }	前後へのスライドが終わったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideClick	function	-	function(swiper){ do something }	スライド上でクリックされたら発生するコールバック。functionを書き込むことで実行。
onSlideTouch	function	-	function(swiper){ do something }	スライド上でタッチした直後に発生するコールバック。functionを書き込むことで実行。onTouchStartとほとんど同じだが、.clickedSlideと.clikedSlideIndexの値を返す。 function(swiper){ alert(swiper.clikedSlideIndex); }とでもしたら動くはず。
onImagesReady	function	-	function(swiper){ do something }	係るすべての画像がロードされたら発生するコールバック。functionを書き込むことで実行。"updateOnImagesReady"もtrueとするべき。New in 2.0.
onMomentumBounce	function	-	function(swiper){ do something }	跳ね返りしたら発生するコールバック。functionを書き込むことで実行。New in 2.0.
onResistanceBefore	function	-	function(swiper,p){ do something }	跳ね返りしている間に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.
onResistanceAfter	function	-	function(swiper,p){ do something }	跳ね返りした後に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.

jsの復習 objectリテラル

コピペばかりで、jsを忘れてしまう。

たまには復習してみる。

// JavaScript Document

var flight = {
airline: "ocianic２",
number: 815,
departure: {
IATA: "SYD",
time: "2017-07-29",
city: "Sydney"
},
arrival: {
IATA: "LAX",
time: "2017-07-30",
city: "Los Angeles"
}
}
;

document.writeln('<h1>flight.number</h1>');
document.writeln('<h1>+flight.number+</h1>');
document.writeln('<h1>'+flight.number+'</h1>');

 jslint

git GUI

windows コマンドプロンプトから、「git gui」と入力。

そうするとgit GUIが出てきます。

リモートリポジトリから、クローンを作成します。

「target directory」は事前に作成するのでなく、この操作によって（clone）によって新たに作成される。

「clone」の操作が終わると下のような画面になります。

「browse masters files」マスターブランチのファイルをブラウズします。

ローカルに作ったリポジトリの中のすべてのファイルが表示されます。

適当なファイルの、ファイル名の部分をクリックしてみます。

 visualize masters history

 SHA1 とは何ぞや？