webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

クラス名を変える

ini.php

/ local
$site_url = $_SERVER['DOCUMENT_ROOT'] . '/';
$webroot = '/';
$current = '';

 

header.php

<nav id="global-nav"><nav id="global-nav">     <ul id="navi_list">        <li class="<?php echo $current == 'top' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>">ホーム</a></li>        <li class="<?php echo $current == 'service' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>service/index.php">事業内容</a></li>        <li class="<?php echo $current == 'product' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>product/index.php">商品情報</a></li>        <li class="<?php echo $current == 'kit' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>">キット</a></li>        <li class="<?php echo $current == 'faq' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>faq/index.php">よくある質問</a></li>        <li class="<?php echo $current == 'news' ? 'select':'' ?>"><a href="<?php echo $webroot; ?>news/index.php">お知らせ</a></li>        <li class="<?php echo $current == 'info' ? 'select':'' ?>" class="red"><a href="<?php echo $webroot; ?>">お問い合わせ</a></li>      </ul>    </nav>   

 

 

script

<script><script> $( function () { $( '#navi_list li a' ).on( 'click', function () { $( this ).parent('li').addClass( 'select' ).siblings( 'li.select' ).removeClass( 'select' ); } ); } ); </script>

 

 

inex.php他第2階層のページ

カレントページがどこかを教えてあげる、、、

<!-------------------------------------------------------------<!-------------------------------------------------------------header--------------------------------------------------------------> <?php  $current = 'top'; include($site_url.'./header.php');  ?>

xampp localhost

qiita.com

やりたいこと

デフォルトでは,XAMPPのバーチャルホスト(localhost)のパスは,Cドライブ直下にインストールした場合C:\xampp\htdocsとなっているが,
C:\Users\Documents\testなどの任意のパスもバーチャルホストにしたい.

 環境

Windows 8
XAMPP 5.6.14

 手順

 手順1. フォルダパスとドメイン名の設定

まず,C:\xampp\apache\conf\extra\httpd-vhosts.confの20行目あたりにある

##NameVirtualHost *:80

コメントアウト(##)を消す.

次に,以下のように追記して参照したいフォルダを指定.

<VirtualHost *:80>
    DocumentRoot "C:\Users\Documents\test"
    ServerName localhost2
</VirtualHost>

DocumentRootにはフォルダパスを,ServerNameには任意のドメイン名を設定する.
ここではドメイン名はlocalhost2とする.

 手順2. アクセス権付与

注意点として,C:\xampp\htdocs以外をバーチャルホストとするとき,別途アクセス権を与えなければならない.そうしないと403エラーになる.
引き続きC:\xampp\apache\conf\extra\httpd-vhosts.confに,以下のように追記すればOK.

<Directory "C:\Users\Documents\test">
    Options Indexes
    AllowOverride All
    Require all granted
</Directory>

Options Indexesとは,以下のようにブラウザ上でフォルダのインデックスGUIを見れるようにするオプション.書かなくてもOK.

image

 手順3. hostsファイル編集

C:\Windows\System32\Drivers\etcにある,hostsを開き,以下のように先ほど設定したドメイン名を追記.

127.0.0.1       localhost2

これでOK.
XAMPPからApacheを起動し,http://localhost2 を叩けば上記の画像のように任意のフォルダをバーチャルホストにできる.

 

xampp localhost

qiita.com

やりたいこと

デフォルトでは,XAMPPのバーチャルホスト(localhost)のパスは,Cドライブ直下にインストールした場合C:\xampp\htdocsとなっているが,
C:\Users\Documents\testなどの任意のパスもバーチャルホストにしたい.

 環境

Windows 8
XAMPP 5.6.14

 手順

 手順1. フォルダパスとドメイン名の設定

まず,C:\xampp\apache\conf\extra\httpd-vhosts.confの20行目あたりにある

##NameVirtualHost *:80

コメントアウト(##)を消す.

次に,以下のように追記して参照したいフォルダを指定.

<VirtualHost *:80>
    DocumentRoot "C:\Users\Documents\test"
    ServerName localhost2
</VirtualHost>

DocumentRootにはフォルダパスを,ServerNameには任意のドメイン名を設定する.
ここではドメイン名はlocalhost2とする.

 手順2. アクセス権付与

注意点として,C:\xampp\htdocs以外をバーチャルホストとするとき,別途アクセス権を与えなければならない.そうしないと403エラーになる.
引き続きC:\xampp\apache\conf\extra\httpd-vhosts.confに,以下のように追記すればOK.

<Directory "C:\Users\Documents\test">
    Options Indexes
    AllowOverride All
    Require all granted
</Directory>

Options Indexesとは,以下のようにブラウザ上でフォルダのインデックスGUIを見れるようにするオプション.書かなくてもOK.

image

 手順3. hostsファイル編集

C:\Windows\System32\Drivers\etcにある,hostsを開き,以下のように先ほど設定したドメイン名を追記.

127.0.0.1       localhost2

これでOK.
XAMPPからApacheを起動し,http://localhost2 を叩けば上記の画像のように任意のフォルダをバーチャルホストにできる.

 

git hub からクローンを作成する

gitをインストールしてから、「gitGUI」を開く。

「clone existing repository」をクリックして、gitHUBにあるリポジトリのクローンをローカルに作成する。

f:id:ohta-felica:20171112093212p:plain

 

f:id:ohta-felica:20171112093239p:plain

 「source location」にgitHUBリポジトリURLを入力する。

f:id:ohta-felica:20171112093452p:plain

 「target directory」にはローカル上の保存先を入力する。

既存のフォルダは指定しない。ここに入力した内容で新規にフォルダが作成される。作成中、、、、

f:id:ohta-felica:20171112093815p:plain

 ローカルにリポジトリが作成されました。

f:id:ohta-felica:20171112093902p:plain

 dreamweaverを立ち上げます。

「サイトの管理」

f:id:ohta-felica:20171112095505p:plain

 「新規サイト」

f:id:ohta-felica:20171112095545p:plain

 サイト名を入力する(自分で決める)

ファイルの場所を「ローカルサイトフォルダ」に入力する。

「保存」「完了」

f:id:ohta-felica:20171112095710p:plain

 すると勝手に「gitビューを表示」など、gitとの紐づけがなされています。

f:id:ohta-felica:20171112095927p:plain

 「ウィンドウ」「git」でgitウィンドウを開いておくと、「コミット」「プッシュ」「プル」などをドリームウィーバーからできそうです。

git hub install

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

f:id:ohta-felica:20171112074052p:plain

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

f:id:ohta-felica:20171112074904p:plain

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

f:id:ohta-felica:20171112075716p:plain

 

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

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

f:id:ohta-felica:20171112080118p:plain

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

とにかく作ってみます。

f:id:ohta-felica:20171112082525p:plain

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

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

 

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

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

 

f:id:ohta-felica:20171112083058p:plain

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

f:id:ohta-felica:20171112083520p:plain

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

f:id:ohta-felica:20171112084043p:plain

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

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

 

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

f:id:ohta-felica:20171112084523p:plain

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

f:id:ohta-felica:20171112084701p:plain

 

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

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

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

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

f:id:ohta-felica:20171112085512p:plain

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

f:id:ohta-felica:20171112085826p:plain

 

f:id:ohta-felica:20171112090148p:plain

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

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

f:id:ohta-felica:20171112090819p:plain

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

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

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

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

f:id:ohta-felica:20171004220006p:plain

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

f:id:ohta-felica:20171004220109p:plain

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

 

f:id:ohta-felica:20171004220239p:plain

 

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

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

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

 

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

f:id:ohta-felica:20171004174935p:plain

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

f:id:ohta-felica:20171004175054p:plain

A4横使いで 3:2の写真を4枚レイアウトする。

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

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

 

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

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

f:id:ohta-felica:20171004180822p:plain

f:id:ohta-felica:20171004180848p:plain

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

 

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

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

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

f:id:ohta-felica:20171004175211p:plain

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

f:id:ohta-felica:20171004175359p:plain

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

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

 

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

f:id:ohta-felica:20171004175624p:plain

 

f:id:ohta-felica:20171004175844p:plain

 メニューを表示する。

 

 

右開き、左開き

 

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



右綴じイメージ

 

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

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

 

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

f:id:ohta-felica:20171004082026p:plain

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

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

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

 

f:id:ohta-felica:20171004082144p:plain

 

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

f:id:ohta-felica:20171004082214p:plain

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

f:id:ohta-felica:20171004220925p:plain

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

↓こんな感じ、、、

 

f:id:ohta-felica:20171004221345p:plain

 

 

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

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

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

 

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

目的 

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

サイズはA4(横)。

3:2の画像を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:id:ohta-felica:20170908094433p:plain

  

 

excelcsvファイルを作成する。

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

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

 

f:id:ohta-felica:20170908094007j:plain