Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

2ページ目 | アプリ

Sketch Toolboxが便利


Sketchを使っているみなさん。Sketch Toolboxをご存知でしょうか?Sketch Toolboxを使えばSketchのプラグインのインストールやアンインストールが簡単にできます。
下のページからダウンロード出来ます。


使い方

プラグインのインストール


画面左上にある1のボタングループからAllを選択し、2の検索フォームから検索したいプラグイン名を入力します。
プラグインが絞り込まれますから、3のインストールボタンでインストールできます。

プラグインのアンインストール


基本的にインストール方法と同じです。左上のボタングループからInstalledを選択し、2の検索フォームでアンインストールしたいプラグイン名を入力します。
プラグインが絞り込まれますから、3のアンインストールボタンでアンインストールできます。

感想

インストールボタンを押せば自動的にsketchのプラグインフォルダの中にパッケージがダウンロードされているので、とても便利だと感じました。



node-webkitでMacのアプリを作ろう!!

皆さん、node-webkitをご存知でしょうか?node-webkitとはHTML、CSS、Node.jsの知識だけで簡単にMacやWindows用のアプリケーションが作れるフレームワークです。
Node.jsをダウンロードしていない方はまずは下のリンクからNode.jsをダウンロードしましょう。


今回は、ちょっとしたサンプルを実行するための流れを説明していきます。

  1. package.jsonの編集
  2. HTMLの編集
  3. ターミナルからの実行

package.jsonの編集

最初にnode-webkit用のフォルダを作り、その中にpackage.jsonを作成し、編集します。
下が、編集した例になります。

{
    "name": "Sample-node-webkit-app",
    "main": "index.html",
    "window":{
        "toolbar": false,
    	"width": 975,
    	"height": 600
    },
    "scripts": {
        "start" : "node_modules/nodewebkit/bin/nodewebkit"
    }
}

toolbar

検索バーなどのツールバーを表示します。falseにすることで、下のようなツールバーを非表示にすることが出来ます。


main

node-webkitが最初に表示するHTMLファイルを指定します。この場合index.htmlとなります。

HTMLの編集

普段、かくようにHTMLを書きましょう。node-webkitはchroniumというブラウザベースで動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Horic Design</title>
<style>
body{
	background-color:#000000;
	color:#FFFFFF;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>

ターミナルからの実行

package.jsonおよび、index.htmlファイルがあるディレクトリ上で下のように入力してください。

npm install nodewebkit

これで、node-webkitを実行する環境がディレクトリ内に出来上がったと思います。
最後は、下の命令でアプリを起動します。

npm start

終了する時はctrl + cです。

実行結果



Sublime TextでFTPの設定をした

Sublime TextでFTPを扱えるプラグインをインストールして使ってみました。いままでFTPをつかう操作が発生する場合にはCodaを使っていたのですが、Sublime Textでも設定をすればそれなりに便利にFTPが扱えることを知りました。

使用例

下の図のようにファイルを右クリックからファイルをアップロードしたり、ダウンロードしたりできます。
また設定次第で、保存した際にファイルをアップロードしたりすることも出来るんです。


設定方法

下の図のように、command + shift + Pより、インストールパッケージを起動します。


sftpと入力し、SFTPパッケージをダウンロードしましょう


FTPを設定したいフォルダをSublimeTextにドラッグアンドドロップして右クリックから、マッピングの設定をしましょう。


すると、下のようにsftp-config.jsonというファイルが作成されます。あとは、このsftp-config.jsonにサーバ情報やローカルの設定を追記し、保存すればSFTPやFTPが使えるようになります。


意味の解説

sync_down_on_openなどわかりづらい設定が多々あるのでメモ代わりに下に意味を書いていきます。

type

転送プロトコルをftpにするかsftpにするかを選択

save_before_upload

アップロードする際にセーブするかを選択

upload_on_save

セーブした際にアップロードするかを選択

sync_down_on_open

ファイルを開いた際に、もしサーバにあるファイルが更新されていたら、そのファイルと同期するかを選択

他の設定については今後追記します

あとの設定は調べていません。調べ次第ここに追記していきたいと思います。


OGPの確認のためのブックマークレットが便利

OGPをご存知ですか?

みなさん、OGPをご存知でしょうか?
OGPとは、Open Graph Protocolのことで、FacebookなどのSNSにリンクを貼った際に、適切な画像や、サイトの説明文、サイトのタイトルを表示してくれる仕様のことです。
下記のようにメタタグを設定するだけで導入できます。

<meta property="og:url" content="http://horicdesign.com/entry-66.html" />
<meta property="og:site_name" content="Horic Design" />
<meta property="fb:admins" content="">
<meta property="og:title" content="Chromeでの変更をローカルに反映させる  Horic Design " />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://horicdesign.com/archives/001/201408/53f692c29e9d7.png" />

OGPが適切に設定されているか確認するためのブックマークレット

ただ、OGPの設定は間違えやすく、意図しないタイトルや、画像が設定されていることがあります。
そんな間違いを見つけてくれるブックマークレットが下記のサイトで紹介されています。
サイト内にある、リンクをブックマークとして登録するだけで使えるので非常に便利ですよ。


ブックマークレット使用例


自分のサイトのOGPがきちんと設定されているかどうか、確かめておきたいものですね。


Chromeでの変更をローカルに反映させる

ChromeブラウザでHTMLやCSSを書き換えて、その内容をそのままローカルに反映できるってご存知ですか??
個人でブログを書いてて、ちょっと、CSSを変更したいってときなんかにすごい便利だと思います。
今回はその設定方法を順をおって説明していきたいと思います。

デベロッパーツールを開いてみよう


Command + alt + Iでも起動できます

設定画面を開こう


図のように、パネルの右の方にある、歯車アイコンを押すと、設定画面を開けます。

Workspaceの設定をしよう



上の図のように設定から、Workspaceを押して、Add folderから反映させるファイルを選択してください

Sourcesパネルを開こう


Sourcesパネルでは図のように直接ソースを編集できます

ローカルのファイルとマッピングさせよう


右クリックから、Map to Network Resourceを選択するとマッピングが完了します

あとは、右クリックからSaveをクリックするか、cmd + Sでローカルにブラウザでの変更を保存できます。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド