技術情報

Sublime Text 3と Emmet LiveStyleの連携【2】(操作)

Sublime Text 3と Emmet LiveStyleの連携【1】(インストール)の続きです。


Emment LiveStyleの利点ですが、既存のCSSとは別のCSSファイルの編集結果をサイトにリアルタイムに反映させることができることかなと思います。

以下の操作はこんなケースを想定しています。

・サイトデザインの変更にあたり、元のCSSをコピーして編集を加えつつ、リアルタイムに結果を確認する

・以下の環境を利用しています。
 開発環境URL・・・XAMPPベースで(http://localhost/joomla3)
 物理パス・・・(C:\pleiades\xampp\htdocs\joomla3) 

続きを読む...

Sublime Text 3と Emmet LiveStyleの連携【1】(インストール)

WEBページ制作時、CSSの変更をプレビューするために、ブラウザの開発者ツールを用いることがあるかと思います。
一時的、限定的な変更であればこれで済みます。

ただ、変更した結果を保存したい場合、本番環境のCSSを直接いじるわけにもいかず、開発環境であっても、
最新のソースは更新したくない。。。なんていう場合に役立つのが今回書いた方法です。

Sublime Textで編集した任意のCSSファイルの記述が、表示中のWEBページにリアルタイムに反映されるというものです。

Emmet LiveStyleというSublime Text用パッケージ、および同名のChrome拡張機能を導入すると、
ブラウザで表示しているページのCSSと、Sublime Textで開いているCSSを紐づける画面が現れ、
Sublime Textでの編集結果が、ブラウザにリアルタイムに反映されます。

続きを読む...

DNSサーバが障害か

今日の昼過ぎ頃から、現在開発中の環境にアクセスしにくい状況が続きました。

重いというのではなく、「●●.co.jp」が見つかりませんた。のエラー

nslookup ●●.co.jpで名前解決できてません。

どういうことかというと、ブラウザで入力したURL がどこのサーバと紐づいているか分からない状態です。

DNSの情報は一定時間キャッシュされているので、お客さんの環境では見られなくて、 自分の環境では見られる

という困った状況にもなります。

とりあえず今契約しているドメイン管理会社へ問い合わせ中ですが、何かわかったら追記しようと思います。 

間もなく使えなくなる旧Twitter埋め込みタイムライン(Join the Conversation)ウィジェットの変更方法



[2013/03/12 修正]
当初3月という話もありましたが、3/5にtwitter本家による第一回目の移行テストを実施し、何度かテストした後に廃止という流れになるようです。

このサイトの左にも埋め込んでますが、TwitterのAPIが変更になるため、近いうちに3月から既存のウィジェットでは表示がされなくなってしまいます。

試しに新APIで作ったウィジェットを並置しておきます。




<変更点> 
・旧APIはTwitterのアカウントIDさえ分かれば、そのIDのつぶやきを表示できてましたが、新APIでは data-widget-id="306608695725400064">というようなタグに置き換わっています。
・ウィジェットの背景、ツイート一覧の背景色パラメータが無くなっているようです。
=>この辺はウィジェットが読み込んでるCSSの中を見てstyle=で指定したら設定できるかなとは思います。

他人のIDを指定してウィジェットが作成可能かは確認していませんが、とりあえず新APIに対応したウィジェットを作るには、まずはTwitterにログインして、右上の歯車ボタンから「設定」を選び、表示された画面(下図)で「ウィジェット」を選びます。
image

「新規作成」画面は旧APIのものとほぼ変わらない(パラメータが減った)ので、あとは作成されたウィジェットのソースを今貼り付けているソースと置き換えればOKです。

★CMSの場合、Tweetを表示するプラグインを利用してる場合、新API対応のためにプラグインが更新されない限り、表示されなくなってしまいます。WordPressではテキストウィジェット、Joomla!だとカスタムHTMLモジュールに貼り付けて配置する方法でいいと思います。

※既存のウィジェットが動いていれば、上記ウィジェットやモジュールに新APIのJavascript(<script>~</script>)を貼り付けても問題ない(保存時にタグが削除されない)はずです。
旧ウィジェット設置後にエディタを入れ替えている場合なんかは、エディタの機能で<script>タグを削除してしまうかもしれません。

WordPressのソースクリーニングの仕様は分かりませんが、Joomla!の場合はとりあえずグローバル設定でエディタを「無し」にしてしまい、ソースコードを貼り付けて保存すればOKです。
※一律Javascriptの貼り付けを可能にする設定は避けないといけません。
(その後は設定を元に戻し、このモジュールの編集時のみエディタを一時無効にする運用がとりあえず手っ取り早いかと思います)

<変更前イメージ>
image

<変更後イメージ>
image

新ウィジェットの利用ポリシーに反しない範囲で。。。さらなるカスタマイズをしたい場合は、ウィジェットが読み込んでいるCSSを参考に、色指定など変えるといいと思います。
新しいAPIの規定では、色や見た目の独自カスタマイズはNGだそうです。 

ではでは。

サイト内検索

長押しで
スクロール