カテゴリー: Web

投稿日:

Chrome でWEBページのソース表示

chromeブラウザの便利な使い方で一つメモ

view-source:(URL)

たまに、WEBページのソースを表示させたいときに使います。chromeのアドレス枠に”view-source:ktamago.wp.xdomain.jp/”などと入れます。

別の方法として、WEBページを表示して、マウス右クリックメニューにある”ページのソースを表示(V)”を選択すれば、同じようにソースが表示されます。

 

投稿日:

affinity designer アセットのインポート

affinity designerは矢印が書けないようです。arrowheadsは自作が必要なようです。で便利なassetsを発見。”constantin indicate arrow asset2.0”なるものがありました。で、早速affinity designerにインポートしました。こうなりました。

なお、矢印のAssetsは以下のサイトからダウンロードしました。affinity designerのオフィシャルコミュニティみたいです。登録が必要です。

https://forum.affinity.serif.com/index.php?/topic/30290-indicate-arrow-asset-for-ui-design/?hl=arrow

ファイル名は、constantin indicate arrow asset2.0.zip です。

そして、Assetsのインポートはここ（https://eo-on.blogspot.jp/2016/11/affinity-designergrade-ui-kit.html）を参考にしました。

抜粋貼っときます ↓ 。

2016年11月26日土曜日

【Affinity Designer】Grade UI Kitをインポートする

Affinity Designer 1.5 (AD)では Grade UI Kitが無料で使えるようになりました。そのインポートがすぐに分からなかったのでメモしておきます。

  1. Grade UI Kitのダウンロード
  2. Assetsのインポート
    1. ADで「表示＞スタジオ＞アセット」にチェックを入れます。
    2. アセットのメニューから「アセットのインポート」、ダウンロードしたファイル（Grade UI.afassets）を選択します。
  3. Palettesのインポート
    1. スウォッチのメニューから「パレットのインポート」、ダウンロードしたファイル（Grade UI – Fills.afpalette、Grade UI – Gradients.afpalette）を選択します。

      なお、インポートの方法にも3種類あります。

      1. アプリケーションパレット：基本これで良いのでは。AD/APのファイルならどれでもパレットが使えるようになります。
      2. ドキュメントパレット：いま使っているファイルのみ
      3. システムパレット：OSX全体で使える？試してないので分かりません。
以上です。
投稿日:

Web制作効率化

1.はじめに

とある、HomePageを最近作っているのですが、gulp使い始めました。
gulpについては以下のページがわかりやすいかな。

https://www.wan55.co.jp/column/detail/id=287

2.gulpインストール必要なファイル

以下のソフトをインストールしてください。ちなみに私の環境はwindows10とwindows7です。普段はwindows7で作業することが多いです。

インストールコマンドはnpmコマンドを使います。コマンドターミナル（DOS窓）から以下のように打ちます。以下のコマンドをターミナルに入力します。

npm install -g gulp

npm install

「※Macはroot権限での実行が必要になるのでsudo npm install -g gulp // sudo npm installと入力してください。」だそうです。

3.必要ファイルの設置

ホームページを作っているトップフォルダ（通常だとindex.htmlを置いてるフォルダ）に以下のgulp設定ファイルたちを作成します。（上記サイトから引用）

  • gulpfile.js … タスク（処理）を定義したファイル
  • package.json … タスクに必要なパッケージが記載されたファイル(npm initで作成可)
  • config.rb … compassの設定ファイル
  • .gitignore … git管理対象外ファイル(Gitを使用する場合)

を設置していきます。ちなみに私はcofig.rbと.gitgnoreは作ってません。なくてもgulp使えてます。

4.gulpの起動方法

以下のようなバッチファイルを作って、作業前にダブルクリックしてます。作業フォルダがDドライブのD:\web/Tama　フォルダ配下にあるのでそこまで移動した後にgulpコマンド実行して、一旦待つ感じのスクリプトです。終了させるときは、起動時に開いだDOS窓上で、＾＋C（コントロールキーと”C”の同時押し）で終了させてください。

rem 作成日20170921
rem xxWebページ　タスクランナー起動スクリプト
D:                <--この辺は環境に合わせて変えてね
cd \Web\Tama      <--この辺は環境に合わせて変えてね
gulp
pause

こんな感じで