初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

localhostをiphoneなどでアクセスする

Mac・PCで立てたlocalhostiPhoneなどでアクセスする方法を記載します。

http:xxx.xxx.x.x:8000

Macでteminalを起動

ifconfigでIPアドレスを確認
f:id:bellsmarket:20170124000851p:plain:w200

調べたIPをiPhoneのブラウザに入力

bash UNIXコマンド 検索結果から文字列を検索する grep

grepは指定したファイルに記述されている検索したい文字列を含む行を表示するのに便利です。

findやxargsを応用すればもっと便利な使い方ができます。

検索したファイル名に検索したい文字列が含まれるファイルを表示する

find . -name '*.txt' | grep abc
./abc1.txt
./abc2.txt
./abc3.txt

検索したファイル全てに対して検索したい文字列でgrepをかける

find . -name '*.html' | xargs  grep abc
./test1.txt:abc
./test2.txt:abc
./test3.txt:abc

bash Terminal treeコマンド ツリー構造を表示する

treeコマンドを使うと下記のようにツリー構造を簡単に表示できます。

.
├── Templates
│   └── index.dwt
├── about
│   └── index.html
├── about.html
├── contact
│   └── index.html
├── css
│   └── style.css
├── img
│   ├── photo01.jpg
│   └── photo02.jpg
├── index.html
├── js
│   ├── jquery.min.js
│   └── script.js
└── menu.html

6 directories, 11 files

オプションは下記になります。

検索する

tree -P '*.html'

オプションを付けるとファイル名でフィルタリングして表示してくれます。
ファイル名の指定にはワイルドカードも使用できます。
Pは大文字にする必要があります。

検索結果は下記なります。

.
├── Templates
├── about
│   └── index.html
├── about.html
├── contact
│   └── index.html
├── css
├── img
├── index.html
├── js
└── menu.html

ディレクトリのみ表示

tree -d

ファイルは除外し、ディレクトリのみ表示してくれます。

検索結果は下記なります。

.
├── Templates
├── about
├── contact
├── css
├── img
└── js
tree -d > tree.txt

などで上記のようなツリー構造をテキストファイルに保存することもできます。

日本語の文字化けを防ぐ

tree -N

表示する階層を指定する

tree -L 2

Terminal UNIXコマンド 検索結果を削除する find rm xargs

Terminalで検索した結果を削除する方法を忘れるので健忘録で残しときます。

find ./ type f -name '*.txt' | xargs rm

TerminalはGUIと違って削除するとファイルはゴミ箱には移動せず、
そのまま完全に削除されるので下記の方法を取るといいでしょう。


1.findコマンドのみ実行し、ファイルを検索する。

find ./ -name '*.txt'

意図した検索結果になっているか確認する。(削除するつもりもないファイルもあると大変です。)


2.今回紹介した方法で削除

find ./ -name '*.txt' | xargs rm

ちなみに検索はこちらでも大丈夫です。

find ./ -type f -print  |  grep '*.txt'

上記コマンドの補足もしておきます。

-print

検索結果を標準出力する。このとき結果をフルパスで表示する

-type f

指定したファイルタイプを検索する。
f:通常ファイル
c or d:ディレクトリ
l:シンボリック・リンクを検索します。

xargs

ファイル名の一覧を標準入力から受け取って、そのファイル一覧を任意のコマンドに引数として渡すコマンド。
今回だとfindで検索した'*.txt'をrmコマンドに引き渡すコマンド。

grep

ファイルから文字列を検索する。grep の後に検索したい文字列を指定する。

Illustrator 斜線の引き方

すごい参考になりました。
本当に感謝です。
ワイヤーフレームを作成する際にはとても重宝します。

www.dtp-transit.jp

初心者のwebデザイン 正規表現 健忘録

最近業務で正規表現シェルスクリプトを使うことが増えてきました。
正規表現は、ファイルの中身を検索するときに本当に便利です。

忘れてしますので健忘録として残りしときます。














検索したい文字列

※クリックで詳細説明に移動
正規表現
※赤い字がメタ文字、グレーの「\」はエスケープのための「\」
bから始まってkで終わる3桁の文字列 b.k
bから始まってkで終わる2桁以上の文字列 b.*k
bから始まってkで終わる3桁以上の文字列 b.+k
半角数字 \d
半角数字以外 \D
数字列 \d+
4桁の数字 \d{4}
4桁以上の数字 \d{4,}
4桁までの数字(1~4桁の数字) \d{1,4}
4~10桁の数字(最長一致) \d{4,10}
4~10桁の数字(最短一致) \d{4,10}?
桁区切りのカンマ付数字列 \b\d{1,3}(,\d{3})*\b
価格(先頭が「\」の桁区切り付数字列) \\\d{1,3}(,\d{3})*\b

Atom ショートカット エディター

Atomのショートカットを健忘録として残します。
少し重いのを省けばAtom使い勝手が良いです。(と言ってもDreamweaverよりも軽いですが)


ctrl + 0 tree-view:toggle-focus ツリー・ビューとエディタのフォーカス切り替え
(ツリー・ビューが閉じていれば開いてフォーカス)

フォルダの内容の表示/非表示
Alt + ← (非表示)
Alt + → (表示)

⌘ + F2 現在行をブックマーク ファンクションキーの設定は Mac OS の環境設定のキーボードから
F2 次のブックマークに移動

⌘ + k => ←/→/↑/↓ Panes 分割 分割方向を矢印キーで指定
⌘ + k => ⌘+ ↑ or ↓ Panes 移動 移動方向を矢印キーで指定
⌘ + ⌥ + ← or → タブの切り替え
⌘ + ⌥ + [ or ] タブの切り替え

ctrl-0 tree-view:toggle-focus ツリー・ビューとエディタのフォーカス切り替え
(ツリー・ビューが閉じていれば開いてフォーカス)
cmd-k h(矢印キーでもOK) tree-view:open-selected-entry-left 左にスプリットして開く
cmd-k j (矢印キーでもOK) tree-view:open-selected-entry-down 下にスプリットして開く
cmd-k k(矢印キーでもOK) tree-view:open-selected-entry-up 上にスプリットして開く
cmd-k l (矢印キーでもOK) tree-view:open-selected-entry-right 右にスプリットして開く

Atom パッケージリスト

今年の5月くらいからAtomを使っておりまして、パッケージが徐々に増えてきたので忘れないように自分の設定を記述しておきます。

pigments

CSSのcolorやbackgroudの設定を実際に色で表示してくれます。

open-recent

開いたことのあるプロジェクトを開くことができます。
プロジェクトごとではなくファイル単位で開くこともできます。

file-icons

ファイルのアイコンを変更できます。

japanese-wrap

atomで自動折り返しを有効にするには[settings]-[Soft Wrap]にチェックを入れます。

minimap-highlight-selected

regex-railroad-diagram

正規表現を図式化できます。

platformio-ide-terminal

Atom上でターミナルを動かせます。

color-picker

カラーピッカーをATOMエディタ上に表示させる事ができます。
とても役立ちます。

japanese-menu

英語のメニューや設定画面を
日本語化してくれます。

minimap

sublimeTextでおなじみのサイドバーに
縮小したコードが表示されます。
単純に大きなスクロールバーとしても機能します。

minimap-autohide

minimapで表示されたサイドバーを自動で隠してくれます。

minimap-bookmarks

MinimapにBookmarkした行をハイライト表示してくれるパッケージ

minimap-pigments

pigmentsの機能をMinimapにも表示してくれるパッケージ。

maximize-panes

分割したPaneの表示非表示をしてくれます。

tag

閉めタグを自動で入力してくれます。

autocomplete-paths

目的のファイルおよびパスまで入力補完

browser-plus

ブラウザプレビュー機能を追加するプラグインです。
ライブプレビューが可能なので、ソースを変更するとリアルタイムで反映されます。

Linter

構文チェック

Auto-Indent

インデントの一括整形

Atom メニューや設定画面を日本語化する

以前にも日本語化するパッケージはありましたが設定画面まで日本語化してくれるパッケージはありませんでした。

英語が苦手な人にはベストチョイスかと。
日本の方が作成したみたいです。

パッケージをインストールするだけで
日本語化されます。atom.io]

Fireworks IllustratorやPhotoshopで出来るあれこれ

業務でFireworksを触る事が多い今日この頃です。

IllustratorPhotoshopで使えた機能がFireworks
出来なかったりするのでその擦り合わせた健忘録を書いておきます。

機能が増えるごとに、メモを増やしていこうと思います。

塗りと線の色を入れ替えたい場合
→ショートカットキー Xのみ


それぞれの機能マップ
f:id:bellsmarket:20150714233423p:plain:w800

topへ戻る