> Entry
一太郎で文書の上部や下部の余白になにか（章タイトルなど）を記載するには「文書スタイル」を変更します。
奇数ページ・偶数ページで異なる設定ができたり、フォントやサイズも変更できます。
見出しが複数あるような原稿では見出しに連動した設定も可能です。
ヘッダ・フッタのメニューがどこにあるのか覚えておくためのメモでした。
意味のわからないエラーにつかまったのでメモしておきます。
XAMPPのローカル環境で、[http://localhost/examples]のようなURLにアクセスしようとすると、503エラーになってしまいます。
WordpressやfreoなどのCMSでも、スタティックなHTMLでも、[examples]という文字列の階層にアクセスしようとするとダメなようです。
解決方法はこちらの記事に記載されていました。
英語だったので必要箇所だけ確認して紹介します。
C:\xampp\apache\conf\extra\httpd-ajp.conf
上記ファイルをエディタで開き、
ProxyPass /examples ajp://127.0.0.1:8009/examples smax=0 ttl=60 retry=5
と書いてある箇所を
#ProxyPass /examples ajp://127.0.0.1:8009/examples smax=0 ttl=60 retry=5
のように、行頭に「#」を入れてコメントアウトします。
XAMPPのApacheを再起動して、[http://localhost/examples]にアクセスして正常に表示されていることを確認してください。
どうしてエラーになるのか意味わからなかったのですが、まさかXAMPPが悪さをしていたとは…。
どなたかのお役に立てれば幸いです。
XAMPPでローカル環境を構築して、複数のプロジェクトを運用する時は、それぞれサブドメインを切ると便利です。
たとえば、これまで[http://localhost/aaa]というURLでアクセスしていたプロジェクトに、[http://aaa.localhost]というサブドメインを適用すると、[http://aaa.localhost]以下でルート相対パスを利用できるようになります。
私はXAMPPのバージョン3.2.2でこの方法でサブドメインを設定しています。
XAMPPにサブドメインを設定する方法については既に様々なサイトで紹介していただいていますが、バージョンによって設定方法が違うようです。
3以降はこの方法でOKなようなので、参考にしてください。
たとえば、[D:\htdocs\aaa]というディレクトリに、[aaa.localhost]というサブドメインを適用してみます。
私はドキュメントルートを[D:\htdocs]にするように設定しているので、[D:\htdocs\aaa]をブラウザで表示するには[http://localhost/aaa]にアクセスする必要がありますが、サブドメインを適用すれば[http://aaa.localhost]でも[http://localhost/aaa]にアクセスできるようになります。
エディタで
C:\xampp\apache\conf\extra\httpd-vhosts.confを開きます。
#NameVirtualHost *:80
上記のような記述を見つけて、コメントアウトを削除し、
NameVirtualHost *:80
このようにします。
同ファイルの最下部に、設定したいサブドメインについての情報を加筆します。
<VirtualHost *:80>
DocumentRoot "D:/htdocs/aaa"
ServerName aaa.localhost
</VirtualHost>
<Directory "D:/htdocs/aaa">
Options indexes Includes
Options FollowSymLinks
</Directory>
黄色字の部分は環境によって変更してください。
エディタを管理者権限で起動し、
C:\Windows\System32\drivers\etc\hostsを開きます。
127.0.0.1 localhost 127.0.0.1 aaa.localhost
設定したいサブドメインについての記述を加筆し、上書き保存します。
XAMPPのコントロールパネルでApacheを再起動し、[http://aaa.localhost]で[D:\htdocs\aaa]が表示されていればOKです。
複数のプロジェクトを開発する時は、それぞれ別のサブドメインを切って管理してみましょう。
ローカル環境と本番環境のディレクトリ構造を一緒にしておくと、いざ実装という時に階層を直さなくて良いので便利だと思います。
XAMPPでローカル環境を展開した時、設定の変更をしなければ、[http://localhost/]でアクセスすると[C:\xampp\htdocs]が表示されると思います。
[htdocs]フォルダ以下で開発を行えますが、Cドライブ上で作業するとフォルダを圧迫してしまうので、[htdocs]フォルダのみDドライブなどに移動してみます。
XAMPPはCドライブで稼働しますが、作業環境のみ移動することができるので、容量を考えずに開発できます。
XAMPPのApacheのConfigか、テキストエディタで
C:¥xampp¥apache¥conf¥httpd.confを開きます。
DocumentRoot "C:/xampp/htdocs" <Directory "C:/xampp/htdocs">
と書いてある箇所を探して、下記のように書き換えます。
DocumentRoot "D:/htdocs" <Directory "D:/htdocs">
””の中は、任意のディレクトリを指定します。
末尾の「\」は必要ありません。
テキストエディタを管理者権限で開き、
C:\Windows\System32\drivers\etc\hostsを開きます。
#127.0.0.1 localhost #::1 localhost
と書いてある箇所を探して、コメントアウトを削除します。
127.0.0.1 localhost ::1 localhost
上記のようにできればOKです。
httpd.conf・hostsを上書き保存したら、XAMPPのApacheを再起動します。
[http://localhost/]でアクセスして、[D:\htdocs]が表示されていることを確認できればOKです。
JSONとはJavaScript Object Notationの略で、配列で書かれたテキスト形式のファイルです。
JSONファイルをサーバーに上げるとHTMLに出力することもできるので、HTMLタグを知らない人でもJSONファイルを変更できれば簡単にサイトを更新することができます。
JSONファイルには決まった書式ルールがあるので、不慣れな人が作成するのは少し難しいかもしれません。
今回はExcelのリストからJSONファイルを生成するマクロを作成してみました。
たとえばこんなリストがあるとします。
このリストをJSONに生成するマクロは下記の通りです。
Sub make_json()
ThisWorkbook.Activate
'変数定義
Const adTypeBinary = 1
Const adTypeText = 2
Const adSaveCreateOverWrite = 2
Dim fileName, fileFolder, fileFile As String
Dim isFirstRow As Boolean
Dim i, u As Long
'最終行取得
Dim maxRow, maxCol As Long
If Len(ActiveSheet.Range("A2").Value) = 0 Then
maxRow = 0
ElseIf Len(ActiveSheet.Range("A3").Value) = 0 Then
maxRow = 1
Else
maxRow = ActiveSheet.Range("A1").End(xlDown).Row
End If
'最終列取得
maxCol = Range("A1").End(xlToRight).Column
'JSONファイル定義
fileName = ActiveSheet.Name 'JSONファイル名を指定
fileFolder = ThisWorkbook.Path '新しいファイルの保存先フォルダ名
fileFile = fileFolder & "\" & fileName '新しいファイルをフルパスで定義
'同名のJSONファイルが既にある場合は削除する
If Dir(fileFile) <> "" Then
Kill fileFile
End If
'JSON作成
'オブジェクトを用意する
Dim txt As Object
Set txt = CreateObject("ADODB.Stream")
txt.Charset = "UTF-8"
txt.Open
'JSON開始タグ
isFirstRow = True
txt.Writetext "[" & vbCrLf, adWriteLine
'リストをオブジェクトに書き込む
For i = 2 To maxRow
'1行目か確認して2行目以降の場合は行頭に","を挿入
If isFirstRow = True Then
isFirstRow = False
Else
txt.Writetext "," & vbCrLf, adWriteLine
End If
'行の開始タグを挿入
txt.Writetext vbTab & "{" & vbCrLf, adWriteLine
For u = 1 To maxCol
'最終列でない場合は","を挿入
If u = maxCol Then
txt.Writetext vbTab & vbTab & """" & Cells(1, u).Value & """" & ":" & """" & Cells(i, u).Value & """" & vbCrLf, adWriteLine
Else
txt.Writetext vbTab & vbTab & """" & Cells(1, u).Value & """" & ":" & """" & Cells(i, u).Value & """" & "," & vbCrLf, adWriteLine
End If
Next u
'行の閉じタグを挿入
txt.Writetext vbTab & "}", adWriteLine
Next
'JSON終了タグ
txt.Writetext vbCrLf, adWriteLine
txt.Writetext "]" & vbCrLf, adWriteLine
'BOMを削除する
txt.Position = 0
txt.Type = adTypeBinary
txt.Position = 3
Dim tmp() As Byte
tmp = txt.Read
txt.Close
txt.Open
txt.Write tmp
'オブジェクトの内容をファイルに保存
txt.SaveToFile fileFile, adSaveCreateOverWrite
'オブジェクトを閉じる
txt.Close
MsgBox ("ファイルを生成しました｡")
End Sub
最終行と最終列を自動取得し、JSONを生成します。
JSONのファイル名はシート名を取得して作成します。
例えば「list.json」という名前のjsonにしたい場合、シート名を「list.json」という名前にしてください。
同名のファイルがある場合は削除して新規に保存します。
項目名として利用するため、リストシートの１行目にはそれぞれの項目名を入力してください。
上記コードを利用するとjsonはUTF8のBOM無しで生成されます。
BOM有りのファイルはプログラムでの読み込み時にエラーになる場合があるので、BOM無しに設定しています。
上記のマクロを実行すると、下記のようなJSONが生成されます。
[
{
"num":"1",
"name":"イチゴ",
"url":"http://hoge.net"
},
{
"num":"2",
"name":"リンゴ",
"url":""
},
{
"num":"3",
"name":"バナナ",
"url":"http://hoge.com"
}
]
閉じタグの位置や区切り文字の位置・有無など、ルールに沿った書き方をしないといけないので、不慣れな人が触る場合は、このように自動生成するマクロなどを活用するといいかもしれません。
JSONとは、JavaScript Object Notation の略で、XMLのような配列形式のデータフォーマットです。
XMLよりも書き方がシンプルなので初心者でも簡単にデータを作成でき、また軽量なので大きなデータの読み込みにも順応できます。
CMSなどを利用していないスタティックなサイトであっても、JSONに入っているデータをHTML出力する設定にしていれば、JSONさえ編集できれば、HTMLタグを知らない人でも簡単にサイト上の情報を更新できます。
独自のJSON以外にも、facebookのAPIやGoogleのfirestoreなど、JSONでデータを発行しているケースが増えてきました。
JSONからデータを読み込んでHTMLに出力する方法を紹介します。
たとえば、こんなJSONがあるとします。
[
{
"num":"1",
"name":"イチゴ",
"url":"http://hoge.net"
},
{
"num":"2",
"name":"リンゴ",
"url":""
},
{
"num":"3",
"name":"バナナ",
"url":"http://hoge.com"
}
}
URLが入っていた場合はリンク付きのテキストを、URLが入っていなかったときはテキストのみを出力してみます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul id="list"> <!-- ここに出力します --> </ul>
出力にjQueryを利用するので読み込んでおいてください。
他に、JSONから出力したデータの受け皿を予め用意しておきます。
$(function(){
json = "./list.json";
target = $('#list');
$.getJSON(json, function(data,status){
for(var n in data) {
var text = '<li>';
if (data[n].url){
line = '<a href="'+data[n].url+'" target="_blank"><span>'+data[n].name+'</span></a>';
}else{
line = '<i><span>'+data[n].name+'</span></i>';
}
text = text+line+'</li>';
$(target).append(text);
}
});
});
JSONをgetJSONで取得し、取得したdataをforで回します。
最後にappendしてHTMLに出力しています。
JSONファイルを作成できない人のために、Excelの表からJSONを作成するExcelマクロ例も作ってみました。
よろしければご活用ください。
Gitはコマンドプロンプトなどのコマンドラインで使用します。
私はVisual Studio Codeで作業しているのでaddやcommitなどは基本的にVSCodeがうまいことやってくれますが、だからこそコマンドラインを使う時に忘れてしまいがちなので、使う頻度の高いコマンドをメモするついでにそれぞれどんな作業をしているのかメモしておきます。
$ git init
空のローカルリポジトリを作成します。
$ git clone [url]
既存の Git リポジトリのコピーをローカルリポジトリに作成します。
クローンしたリポジトリは自動的にリモートリポジトリに設定されます。
$ git status
コミットするべきファイルがあるかどうか、ワーキングツリー（作業ディレクトリ）の状況を確認します。
前回のコミットから変更されたファイルがある場合、一覧が表示されます。
ファイルの変更履歴を記録（コミット）するには段階を踏む必要があります。
//ファイルやディレクトリをインデックスに登録する $ git add [filename] //変更された全てのワークツリーの内容をインデックスに追加する $ git add -A //以前コミットしたことがあるファイルだけインデックスに追加する $ git add -u
ワーキングツリーにある変更されたファイルやディレクトリをコミットする前に、まずはインデックス（ステージングエリア）に追加します。
インデックスに追加することを『addする』や『ステージする』や『ステージング』と言います。
Gitは差分を記録できるシステムなので、ワーキングツリーの全てのファイルをステージングするのではなく、変更されたものだけステージングすると良いです。
//インデックスに追加されたファイルをコミットする $ git commit //コミットメッセージを予め指定した上でコミットする $ git commit -m "[comment]"
インデックス（ステージングされたファイルたち）をコミットする時には、コミットの内容がわかりやすいように任意のメッセージを入力できます。
//リモートリポジトリを追加する $ git remote add [追加するリモートリポジトリ名] [追加したいリポジトリURL] //リモートリポジトリ名を確認する $ git remote //リモートリポジトリ名とURLを確認する $ git remote -v //リモートリポジトリを削除する $ git remote rm [削除したいリモートリポジトリ名] //リモートリポジトリ名を変更する $ git remote rename [変更前リモートリポジトリ名] [変更後リモートリポジトリ名] //リモートリポジトリのURLを変更する $ git remote set-url [変更したいリモートリポジトリ名] [変更先のURL]
既存のリポジトリをクローンするのではなく、ローカルリポジトリをある程度進めた時に他の端末でプロジェクトを共有するために後付でリモートリポジトリを設定することがよくあるので、覚えておいて損はないと思います。
//現在ブランチ一覧を確認する $ git branch //新たなブランチを作成する $ git branch [新しいブランチ名] //ブランチを削除する $ git branch -d [削除するブランチ名] //ブランチの名前を変える git branch -m [変更するブランチ名] [新しいブランチ名] //現在のブランチの名前を変える git branch -m [新しいブランチ名] //ブランチを切り替える $ git checkout [移動先のブランチ名] //現在のブランチの変更内容を他のブランチにも適用する $ git merge [branch]
作業を分岐する時はブランチを利用します。
ブランチを切り替えるときはチェックアウトします。
現在のブランチでの変更内容を他のブランチにも適用させたい場合はマージします。
リモートリポジトリの状況とローカルリポジトリの状況を同期するには、フェッチ＋マージを行うかプルを行います。
フェッチ＋マージとプルは同じ作業です。
段階を踏んで行うか、一気に行うかの違いになります。
//リモートリポジトリの状況を取得する $ git fetch //リモート追跡ブランチのコミットを現在のブランチに統合する $ git merge origin/master
fetch（フェッチ）をすると、リモートリポジトリの状況の取得だけを行うことができます。
取得したコミットは、[origin/master]などのリモート追跡ブランチに取得されます。
取得しただけではマージ（統合・上書き）はされません。
リモート追跡ブランチはあくまでリモートの状態を示したものなので、リモート追跡ブランチ上でファイルの内容を変更することはできません。
フェッチでリモート追跡ブランチの状況を確認し、ローカルリポジトリの状況と競合（コンフリクト）する場合はマージする際に競合を解決します。
競合しない場合はそのままマージまたはプルしてOKです。
※fetchで取得したリモートリポジトリの最新のコミットは[FETCH_HEAD]で指定されます。これに対してローカルリポジトリの最新のコミットは[HEAD]で指定されます。[FETCH_HEAD]と[HEAD]が競合する場合もあるので、プルを行う前にフェッチを行うと良いです。
//リモートリポジトリの状況をローカルリポジトリに同期する $ git pull [リモートリポジトリ上のブランチ名]
リモートリポジトリ上の状況をローカルリポジトリに同期します。
競合（コンフリクト）が発生する場合はリモートリポジトリとローカルリポジトリのどちらの変更を選択するか解決する作業が必要です。
そういった状況を回避するために、一度フェッチしてからプルするのが安全だと思います。
//ローカルリポジトリの現在のブランチをリモートリポジトリ上の上位のブランチに同期する $ git push //ローカルリポジトリの状況をリモートリポジトリに同期する $ git push [リモートリポジトリ名] [ローカルリポジトリのブランチ名] //例）$ git push origin master
リポジトリやブランチを指定しなくても、git push を使用すれば自動的に上位のブランチに同期できます。
リモートリポジトリがローカルリポジトリよりも進んでいるなど、変更が競合（コンフリクト）する場合は、自動的にプッシュがエラーで停止します。
その場合は一度フェッチを行って競合を解決してからプッシュしましょう。
自分はHTMLやCSSやJavascriptやPHPでサイトを作る系フロントエンドエンジニアなのですが、こんなことで困ったりしていました。
こんな状況を解決したいと考えていて、git（ギット）を使えば便利ですよと教えてもらったら本当に便利だったので書いておきます。
gitとは、もともとはLinuxで開発された分散型バージョン管理システムの一つです。
とか言われてもピンと来なかったので自分が理解して活用した範囲で紹介します。
特定のファイル群の中で、どのファイルを変更したのか、どう変更したのか、細かく記録（コミット）することができます。
しかも、記録する際には任意のメッセージ（コミットメッセージ）を記載しておけるので、 どんな作業を行ったのか自分の言葉でメモしておくことができます。
※上記スクリーンショットはVisual Studio Codeを使用して差分を閲覧した時のものです。
git reset コマンドを使うと、以前のコミットの状態まで戻すことができます。
やってみたけどうまくいかなかった時などに最初からやり直すこととかにならずに済むので便利です。
例えば背景色が白のサイトを、背景色を赤に変えたAルートと、背景色を青に変えたBルートとに分岐する（ブランチを切る）ことができます。
AルートとBルートのブランチをそれぞれ切ったとき、元々の本ルートとAルートとBルートの３本のルートが並行して進行することになります。
切り分けた分岐をブランチと言います。
ブランチは他のブランチに合流（マージ）することもできます。
背景黒のAブランチと背景白のBブランチを切ってみて、相互を比較して、背景白が良かった場合は本ルートにBルートをマージすれば本ルートの背景色が白になります。
ブランチを切り替える（チェックアウトする）と、ファイルの中身だけでなく個数まで変わります。
たとえば、Aルートに画像を追加した場合、Aルートにチェックアウトすれば画像が増えた状態になり、逆にBルートで画像を削除した場合、Bルートにチェックアウトすれば画像が削除された状態になります。
いらなくなったブランチは削除することもできます。
※上記スクリーンショットはBitbucketでリモートリポジトリのコミット履歴を見た時のものです。
デスクトップとノートパソコン、自分と誰かなど、同じプロジェクトを異なる環境で同時に開発したい時、使用するファイルそのものをクラウドや大容量保存メモリなどで共有することもできますが、Gitを使えば同じ状態のファイルを複数の環境で同期することができます。
Gitで差分管理すると設定したディレクトリをリポジトリと呼びます。
自身のPCで使用するリポジトリをローカルリポジトリ、ネット上で公開・共有しているリポジトリをリモートリポジトリと呼びます。
リモートリポジトリは共有相手を限定することもでき、限定公開されたリモートリポジトリをプライベートリポジトリと呼びます。
リモートリポジトリからローカルリポジトリを作成（クローン）したり、既存のローカルリポジトリにリモートリポジトリを指定したりして紐付けを行った上で、リモートリポジトリにローカルリポジトリの状況を反映することをプッシュ、ローカルリポジトリにリモートリポジトリの状況を同期することをプルと言います。
巨大なプロジェクトであればあるほどファイルの共有は時間がかかるものですが、プッシュとプルは差分データのみをやり取りするので時間が短くて済みます。
作業開始時にリモートリポジトリからプルして、作業終了時にリモートリポジトリにプッシュする。
それを複数の環境で行えば、常に最新のファイルを複数の環境で共有できます。
同じファイルであっても変更箇所が違っていれば同期作業はGitが勝手にやってくれるので問題はありませんが、同じファイルの同じ箇所に異なる変更を加えるなどして競合（コンフリクト）してしまった場合、競合箇所を確認してどちらの変更を優先して反映させるかを解決する作業が必要な場合があります。
色々専門用語が多かったりgitを利用するためのツールがコマンドプロンプトなどのコマンドラインだったりして敷居が高いように感じますが、さわりだけでも使ってみると確かに今まで難しいと思っていたことが出来るようになって便利なので、チャレンジしてみて損はないと思います。
gitが気になった方は当サイトの他記事や下記のサイトなどでぜひgitについて調べてみてください。
サルでもわかるGit入門：https://backlog.com/ja/git-tutorial/
Visual Studio Code で自分が使っている拡張機能をまとめておく記事です。
開始タグまたは閉じタグの属性を変更すると自動的にペアのタグの属性を変更してくれる。
開始タグと閉じタグがペアになってない状態でリネームしようとすると別の位置のタグを勝手にペア認定してしまうのでちょっと扱いに注意が必要。
配布元：
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
開始タグの閉じカッコを入力すると自動的に閉じタグを生成してくれる。
配布元：
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
全角スペースを強調表示してくれる。
配布元：
https://marketplace.visualstudio.com/items?itemName=saikou9901.evilinspector
インデントの個数に応じて色をつけてくれる。
配布元：
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
行末の不要な空白を強調表示・削除してくれる。
配布元：
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
Ctrl+Shift+Vでクリップボードのコピー履歴をさかのぼれる。
配布元：
https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-multiclip
Ctrl+Shift+Pで[Relative Path]指定後、ファイル名を入力検索してファイルを指定すると選択したファイルへの相対パスが表示される。
配布元：
https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath
行ごとに誰が更新したのか表示してくれたりする。（画像赤線部分）
配布元：
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Gitのコミット履歴表示してくれたり前バージョンとの差分やコミット内容表示してくれたりする。
配布元：
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
自分の開発環境について書いていなかったので書いておく記事です。
Visual Studio Code について詳しくは公式やもっと細かく説明してくれている他のサイトさんをご確認ください。
Visual Studio Code（VSCode）は、Microsoftによって開発されているソースコードエディタです。
HTML・PHP・Javascriptなど様々な言語に対応しており、配色テーマや各種詳細設定の変更など、フロントエンドの開発環境としてオーダーメイドのポテンシャルを発揮します。
HTML・CSS・Javascript などフロントエンドのみならず、PHP・Python・C+などバックエンドの開発でも活躍します。
タダより高いものはないですがタダより安いものもないです。
ありがたさの極み。
IEやEdgeには散々泣かされてますがなんだかんだMicrosoftは好きです。
フォルダを指定することでそのフォルダ以下のファイルにすぐにアクセスすることができます。
下記画像の左部分で指定したフォルダ以下のファイルツリーが表示されています。
ファイル名をクリックすれば右部分にファイルの中身が表示されます。
様々な配色テーマから自分の好きなデザインを選択できます。
ソースの可読性を上げるシンタックスハイライトが各言語についているし、プロパティが間違っていたりするとひと目でわかる。
１行目…正しい表示
２行目…右辺の単位がおかしい（正しくは「rem」）
３行目…プロパティが間違っている（正しくは「display」）
文法上間違っている部分などがあれば理由付きで表示してくれるので、エラーを回避しやすい。
画面下部がエラー表示部分。
１行目…[disploy]なんてプロパティないよ
２行目…[display: inline-block]に[float: left]は効きません
色んないい感じの拡張機能がついているので自分好みのエディタにできる。
など、様々な拡張機能が無料で配布されています。
Gitのコマンドラインツール（ターミナル）をソフト内で使えたり、GUIのように使うこともできます。
コミット履歴などを確認するGit関連の拡張機能もあるので、Git初心者でも簡単にGitを活用できます。
Visual Studio Code が気になったらぜひダウンロードしてみてください。
ダウンロード・インストール・日本語化までは公式を見て言われたとおりにやればそんなに苦労しません。
Download：Visual Studio Code – コード エディター | Microsoft Azure
便利な使い方などは今後UPしていこうと思います。
