画像素材を探したり、レタッチした画像をエクスプローラーで確認している時、大アイコンと詳細を切り替えたい時がある。これまでは右クリックメニューの「表示」メニューを使って切り替えていたが、この切り替えボタンとショートカットがあることを知った。
エクスプローラーの「大アイコン/詳細」切り替えを、3動作から1動作に削減できる
Windows 10で右下のボタンを押す
大アイコン表示
詳細表示
[Ctrl + Shift + 2] 大アイコン表示
[Ctrl + Shift + 6] 詳細
スマートフォン向けに年月日を選択できるWeb フォームで、それぞれ個別にプルダウン選択できるようにしたい。でも、送信する項目はひとまとめにしたい。
フォーム例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<input type="hidden" id="mydate" name="mydate" value="" /> <select id="myyear" onchange="onChangeDate();"> <option value="">--</option> <option value="2018">2018</option> <option value="2019">2019</option> </select>年 <select id="mymonth" onchange="onChangeDate();"> <option value="">--</option> <option value="1">1</option> <option value="2">2</option> </select>月 <select id="myday" onchange="onChangeDate();"> <option value="">--</option> <option value="1">1</option> <option value="2">2</option> </select>日 <script type="text/javascript"> function onChangeDate() { var myyear = jQuery("#myyear").val(); var mymonth = jQuery("#mymonth").val(); var myday = jQuery("#myday").val(); jQuery("#mydate") .val(myyear + "年" + mymonth + "月" + myday + "日"); } </script> |
後輩が、ウェブサイトコーディング中に、トラブルがあってバックアップしたファイルで巻き戻したとき、別のコードが消えているという2次被害を何度か起こしていた。気づいたことを本人に聞いたところ、「想定したよりバックアップの機会が少なかったから、起きた気がする。」とあった。そのため、バックアップ自体を簡単にしてみることにした。圧縮には7zip を使うので、事前にインストールすること。
cmdのbatを使ってフォルダをCOPYして7zipで圧縮し最後に削除する方法 これくらいブログ
http://korekurai.com/itrelated/cmd-bat-7zip-folder.html
手元の環境で実装するなら、まず空のフォルダで試すこと。安全に失敗するのが推奨される。
バックアップ元
|
1 2 |
C:\xampp\htdocs\ └myfolder //バックアップ元のフォルダ |
バックアップ先
|
1 2 3 |
C:\temporary_backup\" ├myfolder{年月日}.7z //7zip で圧縮されたバックアップファイル └backup_myfolder.bat //バックアップ用のバッチファイル |
backup_myfolder.bat
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@ECHO OFF SET DATENAME=%DATE:/=%%TIME:~0,2%%TIME:~3,2%%TIME:~6,2% SET SOURCEPATH="C:\xampp\htdocs\" SET TARGETZIP=%DATENAME%.7z SET TARGETPATH="C:\temporary_backup\" SET TARGETDIR="myfolder" xcopy /S /Y /I "%SOURCEPATH%%TARGETDIR%" %TARGETPATH%%TARGETDIR% "C:\Program Files\7-Zip\7z.exe" a %TARGETPATH%%TARGETDIR%%TARGETZIP% %TARGETPATH%%TARGETDIR% rmdir /S /Q %TARGETPATH%%TARGETDIR% REM myfolder をバックアップしました TIMEOUT /T 3 |
動作テストして、問題がなければ対象フォルダの中身を入れよう。
作成したバッチファイルをランチャーに入れれば、任意のタイミングでバックアップできる。Windows のタスクに設定すれば、起動時や休憩時間にバックアップを自動でバックアップできるようになる。
コーディングが終われば、バッチファイルを解除しよう。
わたしの経験では、バックアップの定期復元テストは有用だった。本記事で経験した内容を紹介する。
とあるウェブサービスで、データベースを吹っ飛ばし、6重のバックアップが全滅していた話を聞いてぞっとしたから。
2サイト以上の小規模なサイト運用をしている管理者にとって、バックアップは重要だが手間のかかる作業だ。ここを自動化した。詳細は別途、記事にする。
DBバックアップ：さくらのレンタルサーバーでシェルを使う、実行はCron を1時間ごとに実行
ファイルのダウンロード：Windows のバッチ処理でFTP 接続を使ってダウンロード、バッチはタスクスケジューラーを使って毎週実行
バックアップは1サイトのディレクトリとDBを圧縮している
サーバー丸ごとバックアップしないのは、負荷分散と、復元が1サイトごとになると想定しているため
Cron でシェルスクリプトを実行。コンテンツとDBをサーバー内に圧縮保存(毎日0時～、1時間おきに1サイトをバックアップ)
タスクスケジューラーで毎週土曜日12:00～、1時間おきにバッチファイルを実行する
バッチ処理で作業場内のファイルサーバーにデータをダウンロード
Podesora はターミナル。
さくらのレンタルサーバーでシェルスクリプトを手動で動かす
シェルスクリプトの文字エンコーディング：SJIS(管理者用メールで文字化けしないため)
SSH接続例)
|
1 2 3 4 5 6 7 8 |
ファイル＞新規Telenet/SSH接続 ホスト：wwwXXX.sakura.ne.jp プロトコル：SSH2 ポート：SSH2(22) アカウント：{サーバーのアカウント名} 認証方法：パスワード パスフレーズ：{サーバーのパスワード} エンコーディング：shift-jis |
例) /home/mysite/backup/backup_website1.sh と入力、バックアップのシェルスクリプトを実行
7-zip は、.sql.bz .tar.gz2 を解凍する
データベースを解凍するときは、文字エンコーディングを”UTF-8″にする。(SJIS だと文字化けする)
DreamWeaver などのエディタで、Sass, Compass の自動コンパイルを使えるようにする。
DreamWeaver のCompass コンパイルを使おうとすると、予期せぬ振る舞いでCSS書き出しディレクトリを指定できなかった
参考：DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった
Ruby をインストールする
Ruby をダウンロードしてインストール
https://rubyinstaller.org/downloads/
インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れるのを忘れずに。
コマンドプロンプトを立ち上げる
[Windows]キーを押して、”cmd”と入力
gem のバージョン確認
|
1 2 |
>gem -v 2.7.4 |
バージョンが出力される
|
1 |
>gem update --system |
アップデートが始まる
|
1 2 |
gem install sass gem install compass |
インストールが終わったらバージョンを確認する
|
1 2 3 4 5 6 7 8 |
>sass -v Sass 3.5.4 (Bleeding Edge) >compass -v Compass 1.0.3 (Polaris) Copyright (c) 2008-2018 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass |
バージョンの確認ができれば、インストール済みだと分かる。
※compass のインストールで、新しすぎるruby だとインストールできないエラーが起きた。
この場合、Ruby を一旦アンインストールし、1つ前のバージョンをインストールして試す。
|
1 2 3 4 5 6 7 8 9 |
wordpress └wp-content └mytheme ├config.rb //Compass の設定ファイル ├compass_start.bat Sass //ファイルを監視して、Compass を自動でコンパイルするバッチファイル ├style.css // WordPress テーマのスタイルシート、ここに書き出す ├scss ├images └js |
“config.rb”, “compass_start.bat” はこのあと作成する。
コマンドプロンプトで、Sass, Compass を作成するディレクトリに移動する
面倒なら、エクスプローラーを開いて、該当するテーマのフォルダを開き、アドレスバーを選択(ショートカット[Alt+D])して”cmd”と入力
コマンドプロンプトで次のように入力
|
1 |
>compass create |
実行すると、次のようなファイルが作成される。
|
1 2 3 4 5 6 7 8 9 10 |
mytheme ├config.rb ├sass │├ie.scss │├print.scss │└screen.scss └stylesheets ├ie.css ├print.css └screen.css |
“sass”, “stylesheets” のフォルダは今回使わないため、エクスプローラーから削除しておく。
ツールを使って書き出される、デフォルトの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
require 'compass/import-once/activate' # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass |
これを、WordPress テーマ内の構造に合わせて書き換える
config.rb の記述
|
1 2 3 4 5 |
http_path = "/" css_dir = "." sass_dir = "scss" images_dir = "images" javascripts_dir = "js" |
CSS はテーマ直下のstyle.css として書き出す
compass_start.bat の設定
メモ帳などのエディタを開いて、下記を記述。
|
1 |
compass w |
ファイルを保存するとき、テーマ内のフォルダを指定、”compass_start.bat”と名付けて保存
ただし、エクスプローラーで確認すると”compass_start.bat.txt” のようにテキストファイルの拡張子がついていることがあるため、ファイル名の”.txt”を削除
ランチャーを使っている場合、compass_start.bat はランチャーに登録しておく
動作テスト
compass_start.bat を実行
コマンドプロンプトが立ち上がって、監視が始まる
|
1 2 |
C:\xampp\htdocs\wordpress\wp-content\themes\mytheme>compass w >>> Compass is watching for changes. Press Ctrl-C to Stop. |
scss/test.scss を作成
試しにCSS を書く
|
1 |
.test {color:red} |
ファイルを保存するとコマンドプロンプトにコンパイルの結果が表示される
|
1 2 |
modified scss/test.scss write test.css |
書き出しが成功したら、テーマ直下に”test.css” が出力される
compass_start.bat の監視を終了するには、コマンドプロンプトで[Ctrl+C]を押した後のあと”y”と入力して[Enter]を押す
|
1 2 3 4 5 6 7 |
/* Theme Name: mytheme Description: わたし のブログ Version: 0.1 Author: Ed_CREATE Author URI: http://sakuranomichi.jp/ */ |
これを
|
1 2 3 4 5 6 7 |
/*! Theme Name: mytheme Description: わたし のブログ Version: 0.1 Author: Ed_CREATE Author URI: http://sakuranomichi.jp/ */ |
このように書き換え。
コメント開始を”/*!”にすることで、コンパイル時にWordPress で使うコメントが削除されなくなる
結論から書くと、DreamWeaver CC を使い、WordPress テーマ内にSass, Compass を使う場合は、DreamWeaver のコンパイルを切って、Ruby のコンパイルを使ったほうが時間を無駄にしないと思う。
Dreamweaverで覚える最新Web開発ワークフロー: Sass編 を読むと、Ruby の知識がなくても、Sass, Compass が容易に使えるようになる。
ディレクトリ構造は次のような感じ
|
1 2 3 4 5 6 |
mysite ├config.rb //Compass の設定ファイル ├css //コンパイル後のCSSファイルを格納 ├scss //コンパイル前のSass ファイルが保存されている ├images └js |
|
1 2 3 4 5 6 7 8 |
wordpress └wp-content └mytheme ├config.rb ├style.css //コンパイル後のCSSファイルをテーマ直下のディレクトリに書き出したい ├scss //コンパイル前のSass ファイルが保存されている ├images └js |
コンパイルするとどうなるか？
|
1 2 3 4 5 |
wordpress └css └wp-content └mytheme └style.css |
こうなったり、
|
1 2 3 4 5 6 7 8 |
wordpress └wp-content └mytheme └wp-content └themes └mytheme └scss └style.css |
こうなる。
|
1 2 3 4 5 |
wordpress └wp-content └mytheme └scss └style.css |
これはましな方だが、狙ったディレクトリにCSS ファイルが書き出されない問題は残ったままだ。
Sass だけなら、「サイト設定＞CSS プリプロセッサー＞ソースと出力」で出力フォルダをテーマ内に指定するだけで、正しく書き出してくれる。だが、同サイト設定で、Compass>「Compass を使用する」でテーマ内のconfig.rb を指定すると、書き出し時のディレクトリ構造がおかしくなる。
まとめ
DreamWeaver CC のコーディング機能は快適で有用だが、Compass のふるまいだけは制御できなかった。
画像ファイルを自動処理にかけて、一度に加工する場合がある。ファイル名の重複を避けるために、”{元のファイル名}-min.jpg”のように、ファイル名に文字列が追加されることがある。
この追加された文字列を、今まではFlexible Renamer を使って元のファイル名に戻していたが、アプリを立ち上げるのもつらくなったのでバッチファイルを利用するようにした。
workarea 画像の一時展開場所。ウェブサービスを利用して、ファイルをダウンロードする場所にもなっている
|
1 2 3 4 5 6 7 8 9 10 |
cd /d %~dp0 @echo off for %%f in ( * ) do call :sub "%%f" exit /b :sub set fname=%1 set fname=%fname:-min=% ren %1 %fname% goto :EOF |
ランチャーに登録しておけば、処理のたびにこのバッチファイルを実行するだけで済む。
プロジェクト管理や電子印鑑で仕事を早く進める方法を模索している。「グループウェア」というサービスがそれを実現する。紹介動画を見て、試用するサービスを「brabio」と「サイボウズ Office 10」の2つに絞り込んだ。
● brabio
http://brabio.jp/
エクセルに似たガントチャートが使える。エクセルより早い(自称)
▼ ブラビオの使い方をご説明！
https://www.youtube.com/watch?v=DYkw3MJmcdw#t=601.761
ガントチャートで作業名、対応者、期限を決められる
● サイボウズ Office 10
http://products.cybozu.co.jp/office/
プロジェクト管理がある。機能は多すぎるが制限できる
▼ サイボウズ Office 10 機能紹介 ＜ファイル管理編＞ – YouTube
https://www.youtube.com/watch?v=fkQKlVsnddo
バージョン管理付き、閲覧権限もつけられる
▼ サイボウズ Office 10 機能紹介 ＜ワークフロー編＞ – YouTube
https://www.youtube.com/watch?v=aMBYaOleTtM
稟議書の代替になる
▼ サイボウズ Office 10 機能紹介 ＜スケジュール・施設予約編 …
https://www.youtube.com/watch?v=-uwIgGjre7c
施設を予約できる
複数人のスケジュールを作ることもできる
▼ サイボウズ Office 10 機能紹介 ＜メッセージ編＞ – YouTube
https://www.youtube.com/watch?v=ROC-c0dMZk8
グループを決めてメッセージのやりとりができる(添付も可能)
増員や引き継ぎもやりやすくなる
社内のメールを「メッセージ」に限定することで、情報漏洩を防げる
▼ サイボウズ Office 10 機能紹介 ＜日報（カスタムアプリ）編 …
https://www.youtube.com/watch?v=gGicl-4Sayg
日報アプリを追加できる。上司は報告される日報を整理して、未確認日報を確認できる
● Backlog
http://www.backlog.jp/
制作会社、プログラマ向け？
プロジェクトの見える化、ファイル共有の支援ができる
▼ Backlogビデオチュートリアル「課題管理編」 – YouTube
https://www.youtube.com/watch?v=msj60VdEOf0
▼ Backlogビデオチュートリアル「ガントチャート編」 – YouTube
https://www.youtube.com/watch?v=qPuOiN4cbK8
▼ Backlogビデオチュートリアル「ファイル共有編」 – YouTube
https://www.youtube.com/watch?v=cGoYJCR6d_U
● ChatWork
http://www.chatwork.com/ja/
グループの作成、会議(文字、ビデオ)、タスク管理、ファイル共有の4つの機能だけある。アプリ機能を覚えきれない人が多い組織に向いている。
ガントチャートなどはほかのアプリ(Excel など)で作成して共有する。
引っ越し先を探すとき、ネットで候補を絞り込んだ後、現場で何を見るかポイントを書き出した。男性の単身用なので、女性、子供、年齢によって要求を追加するといいと思う。
□住人の人柄、外人、学生の有無(騒々しいかどうか)
□ゴミ出しスペースは24時間出せるか、スペースは清潔か(汚いと乱暴な住人が多い)
□室内の清潔具合はどうか？（リフォーム後でも老朽や経年劣化で汚れている箇所があるか)
□敷地内の清掃具合はどうか？(割れ窓理論で、壊れっぱなしの柵や階段、照明などの設備があると治安が良くない)
□隣接する壁を叩く(RC造なら問題ない、隣の音が返ってくると、音漏れしやすい)
□水回りのシンク下チェック(漏水があると湿気の多さや設備の腐食がある)
□トイレの換気扇の有無(生活臭を排除できるか)
□全方位の窓を開けて、音、においの問題(音が静かだと窓を開けて、夏場の光熱費を下げられる、においも同じ)
□大家の人柄(住人の選別に関わる、敷地内の清潔具合を左右する)
□管理会社はどういうところか(月額で契約するところや大家の場合がある)
□階段から遠いか(不快な生活音があるかどうか、部屋の壁と隣接している場合は気になる)
□エアコン取り付け位置の確認(天井と窓の間隔次第では取り付けできない場合がある、2階以上だと高所作業で設置費用が高くなることも)
□自転車置き場の清掃具合、補修具合(荒れていると自分の自転車が壊される)
□洗濯物を干す場所の地面に鳥の糞があるかどうか(外に洗濯物が干せるかどうかを左右する)
□洗濯機置き場の確認(屋外だと洗濯機の劣化が早い)
備考：昔は賃貸雑誌より不動産担当者が所有している情報が最新だという話があったが、今はネットが最速のようだ。(先約があればもちろん取られる。)
また、案内してくれる不動産担当者は、お客であるあなたの人柄を大家に伝える交渉人でもあるので、大家に接するようにつきあうのがいいだろう。
