FC2ブログ
Windows10 に Apache24 をインストール
Javascript (ES6) で import / export を使おうとすると、ブラウザが CRONエラー を吐いてしまい、動作しない。

ローカルファイル同士だとドメイン情報が無く(?)ため、クロスドメイン扱いとなり、このCRONエラーになるらしい。

Google Chrome だったら --disable-web-security --user-data-dir のコマンドラインオプション付けて起動すれば良いみたいだけど、私が使ってる vivaldi だとそんなオプションは当然ない。

仕方ない。サーバー立てるか。
mySQLとかも練習できるし良いかもしれない。

というわけで、やむをえず Windows10 に Apache24 をインストールすることにしたので、その手順を自分メモ。

(Apacheを入手)
ApacheのサイトからzipをDL
zipを解凍
中にある apache24 フォルダを cドライブ直下へ移動 (c:\apache24 となる)

(WWWサービスの起動オプション変更)
Win+Rキー で services.msc を起動
「World Wide Web 発行サービス」の起動オプションを「手動」に変更
同じサービスをいったん「停止」する

(Apache をインストール)
管理者権限でcmdを起動
cd c:\apache24\bin
httpd.exe -k install
エラー表示がなければインストール完了

(Apache を起動)
c:\apache24\bin\httpd.exe をDクリックもしくはcmdから起動
Windowsファイアウォールで「セキュリティの重要な警告」画面が出るので「アクセスを許可する」

(ブラウザで確認)
http://localhost/ にアクセス。
「It works!」と表示されれば起動成功。

(HTMLドキュメントのルートはここにした)
c:\apache24\conf\httpd.conf ファイル251行目に以下の記述がある
DocumentRoot "${SRVROOT}/htdocs"


※ ちなみにシンボリックリンクやエイリアスも置けるらしい。

Dドライブにユーザーディレクトリを置いているので、D:\users\username\htdocs フォルダを作って、
DocumentRoot "D:\users\username\htdocs"

へ変更して保存

test.html を適当に作って↑の htdocs フォルダに保存

apache を再起動し、
ブラウザで http://localhost/test.html が正常に表示されることを確認した。


敷居が高いと思ってたけど、意外とサクッとインストールできたな。

セキュリティ的にこのままで大丈夫なのだろうか? あとで調べよう。


スポンサーサイト
2019-06-15 Sat | ソフトウェア | トラックバック:0 | コメント:0
OnSaveBuild プラグインで _ を先頭に持つファイル名を除外する (Sublime Text 3)
Sublime Text 3 で、OnSaveBuild プラグインを使用。

scss などを保存時に自動コンパイルしてくれるので、チョー便利!

ただ、 _sample.scss など _ を頭に付けたファイルは保存時にビルドしてほしくないなー。

さっそく Preffrences → Package settings → SublimeOnSaveBuild → Settings - User をいじる。

( \ 記号は、Sublime の設定ファイル上ではバックスラッシュとして表示されてます)


設定ファイルは空っぽなので、以下を追加する

{
"filename_filter": "^(?!_).*\\.(sass|less|scss)$",
}


^ ... 行頭 or 文字列の先頭
$ ... 行末 or 文字列の最後
(?!_) ... ?! に続く文字ではない、の意。(この例では _ ではない、の意味)

これは、*.html 上で記述した Javascript では期待の動作をしたけれど、sublime 上では _ 付きファイルもなぜか全部ビルドされてしまった。

うーん、それではと、こちらを参考にして、
https://stackoverflow.com/questions/16090448/sublime-sass-exclude-with-regex

{
"filename_filter": "^[^_].*\\.(sass|scss)$|\\.(css|js|less)$"
}


と直すも、やはり期待した動作をせず。

※ [] で囲んだ中では、^ (キャレット) は 「次の文字ではない」 を表すらしい。…合ってるかな?


よく見ると、\ であるべき部分は、設定ファイルでは \\ となってる。
エスケープ文字をさらにエスケープしてるような…

わけも分からず試しに \\ をそのキャレットの前に付けてみたら、

{
"filename_filter": "^[\\^_].*\\.(sass|scss)$"
}


めでたく動作しました~☆

ちゃんと _sample.scss ではビルドせずにそのまま保存され、sample.scss ではビルドして保存されるように・・・・

ならない!!!!


実際やったらあれ、動作しない。
全部コンパイルされてしまう。

否定は効かないのだろうか。
Ctrl + F の文書内検索(正規表現) では動作するんだけどなぁ。

じゃ、これでどうだ!?

{
"filename_filter": "^[a-zA-Z0-9].*\\.(sass|scss)$",
}


アルファベットと数字ではじまるものだけ対象、って感じです。
気持ち悪いけどまぁ仕方ない。

あーけどこれも動作しないやー。


情報みっけ。

Avoid saving on partials / SublimeOnSaveBuild
https://github.com/alexnj/SublimeOnSaveBuild/issues/11#issuecomment-24952435

これでどうだ!!

{
"filename_filter": "(/|\\\\|^)(?!_)(\\w+)\\.(sass|scss)$", // this works.
}


やったー!! ちゃんと動作しましたー

もうこの正規表現の意味はよくわからないけどねー



2019-06-03 Mon | ソフトウェア | トラックバック:0 | コメント:0
ESLint でJavaScript のチェック (Sublime Text 3)
Sublime Text 3 が動作軽いので使い始めた。

で、最近必要があって JavaScript を書いてる。

ところが、 SublimeLinter-jshint が ES6 に非対応っぽく、class 使うとエラーだと指摘されてしまうのでなかなか不便だ。

jshint の設定方法もよくわからないので、ES6 対応だと評判の SublimeLinter + ESLint へ移行してみたので、備忘録。


( まずは Package をインストール )

(参考) ESLint を試す
https://akabeko.me/blog/2015/04/eslint/

上のリンクはわかりやすい。

Preferences -> Package Control -> Package Control: Install Package

から、

 ・SublimeLinter
 ・SublimeLinter-ESLint

の2つをインストール。


( jslint は無効に )

もし今まで SublimeLinter-JSLint を使っていたなら、エラー表示がダブってくるので Package Contol: Disable Package から Disabled しておくこと。もちろんアンインストールでもいい。


( ruby / npm のインストール )

ruby とか npm とかのインストール方法は割愛。
自分のPC環境では、sass+compass を使っていた時にインストール済み。


( eslint のインストール )

Windowsキー -> そのまま「ruby」と入力し、Command Pronpt with Ruby のコマンドラインを起動。

npm i -g eslint

と入力して eslint をインストール。

こいつが eslint の本体だはず。


( ESLint の設定)

ユーザーフォルダ c:\users\xxx (xxxはユーザー名) に .eslintrc という名前の設定ファイルを作成。

そのファイルをエディタで編集する。

書き込む設定内容は、

(参考) ESLintのルールを全部手動で設定するのは大変だからやめておけ
https://qiita.com/khsk/items/0f200fc3a4a3542efa90

あたりを参考に。

正直、初心者には

"extends": [
"eslint:recommended",
],


のオススメ設定的なのを加えるのが一番カンタンだ。"真の男" になりたいのなら別だが。

↑のはオススメ設定ではないようです。

設定は拡張することができて、その中で特にオススメな部分、のようです。

なのでやはり設定はどっかで拾ってくる必要あり。

( ESLint 本家 )
ESLint
https://eslint.org/

ここで設定のわからない部分を検索するといい。


( 個人的に必須な設定 )

jsを複数ファイルに分割して作業している場合に、他のファイルで定義されている変数や関数などを参照していると、「定義されていない」というエラーになってしまう。これはかなり鬱陶しいので回避したいところ。

この設定だ。

no-undef
https://eslint.org/docs/rules/no-undef#disallow-undeclared-variables-no-undef

↑ これ見るだけだとオフにするしかなさそうだが、

Configuration - Specifying Globals
https://eslint.org/docs/user-guide/configuring#specifying-globals

↑ によると、各ファイルの先頭にコメントで変数を global 指定?することでエラー表示を回避できるそうだ。

/* global var1, var2 */

みたいな感じで書く。

また、

/* global myclass */



のようにクラス名も指定できるようだ。

/* global myfunc */



のようにグローバルな関数も指定できた。便利だ。


( ESLint をコマンドラインでテスト )

適当なフォルダに target.js などを作成し、内容も適当に入力しておく。

Command Prompt with Ruby 上で、

eslint target.js

と打つと、eslint コマンドが正常に働いてくれるのがわかる。
ただし、設定ファイルが何か間違ってたりするとズラーッとエラーで怒られるので注意。


( Sublime上で確認 )

開いていたjsファイルを閉じて開き直すと(もしくは他のタブを見てから戻ってくると)、ところどころ赤丸&赤枠で囲まれているがわかる。
これで快適な JavaScript コーディングができそうだ。


P.S.
途中でいろいろ試行錯誤したので、何か抜けている部分があるかも。

2019-04-29 Mon | ソフトウェア | トラックバック:0 | コメント:0
Atom + sass で快適 css ライフ♪
最初は sass + compass というコマンドラインツールでがんばってみました。
http://kobuchicken.blog22.fc2.com/blog-entry-170.html

けど、エディタ Atom + プラグイン sass-autocompile という強力なツールがあるようなので、そっちへ乗り換えとなりました。
Atom オススメです^^

インストールと各種設定の手順はこちら。


▼ Atom / node.j / node-sass をインストール

▽ Atom は公式サイトのインストーラーで入れる。

Atom 公式サイト
https://atom.io/


▽ Node.js

Node.js
https://nodejs.org/en/

上記から安定版のインストーラーをDLしてインスト。

コマンドプロンプトで

node.j -v

としてバージョンが表示されていれば OK。


▽ node-sass

コマンドプロンプトで

npm node-sass

でインストール。

node-sass -v

としてバージョンが表示されていれば OK。


▼ Atom の設定とプラグインインストール

▽ 日本語化
File → Settings → +Install → japanese-menu と入力 → 検索された japanese-menu の下の Install をクリック

▽ テーマ設定
ファイル → 環境設定 → テーマ …で選ぶ。自分は黒よりも、慣れてる白系がいい。

▽ Atom のプラグイン sass-autocompile
ファイル → 環境設定 → +インストール → sass-autocompile と入力 → 検索されて出てきた sass-autocompile のインストールをクリック

▽ sass-autocompile の設定
適宜。
出力はとりあえず Expanded のみにチェック入れておく。完成間近になってきたら Compressed もチェック入れたら良い。
タブキーによるインデント幅を半角スペース 2 → 4 に変更しておく。

▽ sass の構文サポート?をインストールしたかも。



▼ Sass + Compass との違いは・・・

Sass + Compass
o 出力先ディレクトリが選べる (config.rb に記述する)
o 好きなエディタが選べる (Mery とか)
 x 作業開始時にコマンドプロンプトで compass watch しておかないといけない
 
Atom + sass-autocompile
o 保存すれば自動的にコンパイルしてくれる (compass watch が不要)
o 強力な入力補完機能! 折畳み、ペイン分割、e.t.c.も
o サイドバーでフォルダ&プロジェクト表示 (ファイル選択が容易)
x 出力先ディレクトリが選べない (.scss と同じフォルダに .css が自動的に出力される)


▼ css 保存先を選べないことへの対処

1. scss ファイル&フォルダ群をコピー
(仮に Wordpress + _s (underscores) テ―マだとすると・・・)
ローカルのテーマフォルダ ((root)/)wp/wp-content/themes/_s/ を開き、そこに foundation.scss と vender フォルダ、その他の必要なフォルダを放り込む。

2. FTP 転送の除外リストに加える
WinSCP などの FTP ソフト上で、*.scss を転送しない「除外設定」にする。
フォルダも転送したくないなら、
css/components/
css/forms/
css/grid/
css/prototype/
css/settings/
css/typography/
css/util/
css/vendor/
css/xy-grid/
.sass-cache/
を除外リストに追加する。(これらフォルダとその中身はローカルでの scss コンパイル時に参照されるだけなので、サーバーに転送する必要はない)

※ WinSCP の場合は、サイトマネージャーで該当のサーバー設定を開き、「転送設定」をクリック。
「ファイルマスク」欄に「|*.scss;.sass-cache/;css/components/;css/forms/;css/grid/;css/prototype/;css/settings/;css/typography/;css/util;css/vendor/;css/xy-grid/」と入力。

あとは普通に foundation.scss を Atom で編集 → 保存 → コンパイル → FTPソフトでアップロード すればOK。


2018-08-24 Fri | ソフトウェア | トラックバック:0 | コメント:0
「Inkscape と Illustrator 併用でチラシ制作」 の手順。
メモ。

入稿はPDFでいけるかな?

↓以下、Inkscape上でのPDF保存設定(入稿用)。


「名前を付けて保存」で「pdf」選択、エフェクトをラスタライズ(300dpi)。

「フォントをパスに」はチェック無しでも特に問題無かった。


以上を、AcrobatReaderで表示確認。縦書きも表示OKだった。

ただし、Illustrator CS2で開くと、フォントはすべて「見つからない」となり「?」に文字化け、背景のグラデーション(3色)も表示不可。これってイラレのバージョン古いせい?



※ Inkscapeで保存したPDFやSVGをIllustratorCS2で開くと、縦書きの表示が乱れたり、エフェクトがかからなかったりする。互換性が・・・でも古いからしょうがないか・・・


Illustrator使いづらいったらありゃしない!

Inkscapeはフリーだし直感的に操作できるし親切だ。今後もしもCMYKに対応したら無敵なはず。

Gimpもだけど、CMYKになんで早く対応しないんだろうなァ?



追記
Inkscape と Illustrator 併用して、チラシをデザインして、トンボを付けて、CMYKカラーに変換、ai形式で保存してみる手順。入稿が目的。

小さな A5 サイズのチラシを作ることにする。



----------------------------------------------------------------

(1) まず Inkscape でデザインする。

ポイントは、
 ・ フィルとストロークのウィンドウにある「不透明度」は使用しない。
 ・ 3色以上のグラデーションは使用しない。

上記2点は、Illustrator CS2 では正しく表示されないため。他にも非互換なのあるかも。
(CS3以上の上位バージョンなら表示できるのかも)

SVG を Illustrator で開くと、不透明度を100以外にしたオブジェクトは消えてしまい、3色以上のグラデーションは「不正ななんちゃらです」と怒って描画してくれないんです。

※ 回避策もあり。例えば不透明度75%、3色グラデーションを使った部分を、Inkscapeから「ビットマップへエクスポート」しておいて、後でそいつを Illustrator 上で付け足す、てな感じにすればいい。

サイズは基本的には実際の印刷サイズにしておく。
間違えてもあとで自由に全体を縮小拡大できるから大丈夫。


(2) svg 形式で保存する

これが元データになるので、必ず SVG で保存しとく。


(3) PDF 形式で保存する

テキストは表示が乱れるので、必ず「パスへ変換」。
フィルタエフェクトもラスタライズ?しておく設定に。300dpi ぐらいかな。
それと範囲は「ページ全体」にしておく。


(4) その PDF ファイルを Illustrator で開く

各オブジェクトがちゃんと表示されてるか確認。


(5) いろいろ設定&調整

カラーモードを CMYK にする。色のチェック。

いったん書類設定で実際の印刷サイズ(A5)にする。

チラシ全体を適度に縮小・拡大する。四辺にも背景色がある場合は、 3mm ほどはみ出すようにする。

オブジェクト→トンボで、トンボを付ける。(トンボの設定はネットで調べた。印刷業者によって異なるかも)

ひとまわり大きなサイズ(A4)に変更する。

チラシ全体をトンボに合わせて微調整。


(6) ai 形式で保存

ai 形式で名前を付けて保存する。


----------------------------------------------------------------


これでどうだ?入稿できるんじゃないか?



2012-01-03 Tue | ソフトウェア | トラックバック:0 | コメント:3
Ubuntu 10.04 に Firefox4 を。
Ubuntu 10.04 に最新の Firefox4 を入れてみたくなった。


【Licid】UbuntuのFirefoxを4.0にアップデートする方法【Maverick】 2011/03/23
http://ryubuntu.blogspot.com/2011/03/licidubuntufirefox40maverick.html


やっぱ4、速いです^^

非アクティブなタブの背景色が黒で見にくいため、Tab Mix Plus のオプション設定で適当に変更しておきました。


それと、検索エンジンが英語サイトになっているので、日本語にしたい。

検索エンジンのプラグイン?がここにある。
http://mycroft.mozdev.org/google-search-plugins.html

ここから Google JP を検索して、クリックしたら、インストールできた。

めんどくさいからとりあえず Google.co.jp だけでいいや。



2011-05-16 Mon | ソフトウェア | トラックバック:0 | コメント:0
ibus の変換候補のフォントサイズ変更
Ubuntu 10.04 使ってるが快適。

今しばらくは Excel Word は要らないし。


インプットメソッドの ibus-Anthy なんだけど、変換候補のフォントが小さくて見づらい。

それを大きくする方法。(日本語情報が見当たらないのでメモしとく)



アプリケーション→アクセサリ→端末 で端末を起動。

gconf-edito を起動
# gconf-editor


/desktop/ibus/panel/ と辿って、

use_custom_font にチェックを入れる。
custom_font が、"sans 10" となっているのを、"sans 14" など見やすい大きさに変える。

以上。

ibus は再起動の必要なく、設定が反映される。

目にやさしくなった。



一応、ibus 再起動の方法
ibus-daemon -drx



…あとで気づいたが、iBus のGUI設定パネルから同じ設定ができるんだねw



2011-05-14 Sat | ソフトウェア | トラックバック:0 | コメント:0
なんだ、iTunes で mp3 へも変換できるじゃないか

オプションで、 CDインポートの設定で、 m4a じゃなく mp3 へ変換するように設定しておけば、iTunes で mp3 へ変換できる。

m4a だと mp3Gain とか ReplayGain とかが使えなくて困るので、わざわざ他のフリーソフトを使って mp3 へ変換していたが、 iTunes でもできるとは。

細かい設定は XRecord II などの方ができるけど。



2010-08-28 Sat | ソフトウェア | トラックバック:0 | コメント:0
Gmail アカウント間でメールを移行したい

Gmailアカウント間でのメール移転方法・複数Gmailアカウントの処理に困っている人に朗報!
http://google-mania.net/archives/891

ただしこれだと全メールの移行となり、古い側のメールがすべて削除されてしまうそうな。



2010-08-19 Thu | ソフトウェア | トラックバック:0 | コメント:0
iPod で録音したボイスメモが、消えてしまう
iPod でボイスメモを録音し、専用ケーブルで PC に接続。

iTunes を起動し、同期すると、50%ほどの確率で iTunes がフリーズしてしまう。

やむなく iTunes 強制終了→ iTunes 再起動 すると、

iPod の中の(今回録音分の?)ボイスメモがすべて消失してしまう、という現象。

※ iPod で見ると、ボイスメモの件数情報だけは残っているが、ボイスメモの本体は全て消えている。


自分の操作?が何か間違ってるのかもしれない。

他にソフト起動してるからダメなのかもしれない。


が、対処法がわからないので、とりあえずこうする。


iPod を繋げた状態で iTunes から「ディスクとして使用」にチェックを入れておく。

ボイスメモを録音した場合、iTunes は起動しないままで iPod を PC に接続。

エクスプローラーで G:\ (iPod のドライブ) 内の Recordings フォルダを開く。

そこにあるボイスメモの m4a ファイルをすべて PC の適当な場所にコピー、バックアップしておく。





これをやっとけば、 iTunes で同期して万が一ボイスメモが消失したとしても復活できるので大丈夫。



残念ながら「Pod野郎」はボイスメモには対応していないので取り出せない。

「Songbird」は使い方がまだよくわからないし、 Volarent Invidi などの外部ツールと連携ができないので微妙。




追記

まただ。

ボイスメモを多数録音して(27件、どれも1分以内)、PC に繋げて、 iTunes 起動。
iTunes 側で 「自動的に同期しない」 設定にしてるのに、なぜか勝手に同期され、
毎度おなじみ途中でフリーズ。またボイスメモが全て吹っ飛んだ。

今回はエクスプローラーでボイスメモのバックアップをとっておいたので、復活させられるけど。

どーなってんだこりゃ。

フリーズ直後の状態を見ると、 iTunes 上部に 「アートワークを処理中・・・」 って表示があり、中央には 「ボイスメモを移動中・・・」 というポップアップメッセージがある。

この2つの処理が重なるとダメなのかな?

アートワークの処理をしないような設定にしたいんだけど、どこでやるんだったか・・・

他にもいろいろオプション試してみっかな。



追記

通りすがりさんからの情報。

ボイスメモならCopyTransで取り出し可能です。有料ソフトですが、トライアルで50曲位無料で使えます。ご参考まで。。。
http://www.copytrans.jp/copytrans.php



CopyTrans 入れてたのすっかり忘れてた・・・^-^;

2010-07-16 Fri | ソフトウェア | トラックバック:0 | コメント:1
次のページ
Thank you for visiting me !
プロフィール

kobuchicken

  • 管理人: kobuchicken
  • Linux 初心者です。XP 無しで過ごした長い長い 98 の日々。Ubuntu & 派生ディストリの有難さを感じる今日この頃です。フリーの OS がもっと身近になりますように。
  • RSS
カレンダー
- - - - - - 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 27 28 29
30 - - - - - -
05月 « 2019/06 » 07月
ブログ内を検索
Search this site.