Let’s EncryptのSSL証明書で、安全なウェブサイトを公開 - さくらのナレッジ
http://knowledge.sakura.ad.jp/knowledge/5573/

— posted by midilin @ 09:42PM | Comment (0)

ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利 - かちびと.net
http://kachibito.net/web-service/placehold-it.html


img src="http://placehold.it/350x150"

のように指定する

— posted by midilin @ 10:58AM | Comment (0)

Charles（チャールズ）というフリーソフトを使う。

本番環境でテスト？！ Charlesを使った簡単サイト修正 | CSS-EBLOG
http://css-eblog.com/tools/charles.html
動画があるのでわかりやすい。
テキストでも手順の詳細有り

Proxyデバッグソフト「Charles」がすごい - to-R
http://blog.webcreativepark.net/2012/07/14-021031.html


ソフトのダウンロード
http://www.charlesproxy.com/
Windows、Mac両方有り


●ローカルファイルを読み取り、本番URLで検証する方法
http://css-eblog.com/tools/charles.html
（１）検証したい本番のURLをローカルにダウンロード
（２）Tool→Map Localで
　本番のURLと、ダウンロードしたURLを入力
これで、本番のURLにアクセスすると、ローカルのURLを見に行く。
ローカルのURLを修正して、本番URLにアクセスすると、内容が修正されている。


●本番URLでアクセスして、中のソースを書き換える方法
・Tool→Rerwite
・Enable Rewrite
・Setsのところのunitiled setで
LocationのところをAddして、本番のURL
（Hostを入れると、Pathが勝手に入る）

・RuleをAddにして
Typeを「Body」に変更
WhereをRequestから、Responseにチェックを入れ替える
Matchに、変更前、Replaceに変更後の文字列を入れる

本番にアクセスしたあと、Ctrl＋F5でリフレッシュさせる

— posted by midilin @ 10:08PM | Comment (0)

シンプルで軽快な無償のペイントソフト「FireAlpaca」
http://www.forest.impress.co.jp/docs/news/20140805_661038.html

— posted by midilin @ 11:31AM | Comment (0)

MindMeister

・chromeで使用可能
・gmailのアカウントで使える
https://chrome.google.com/webstore/detail/bdehgigffdnkjpaindemkaniebfaepjm?hl=ja



説明ページ
おすすめのクラウド型のマインドマップツール | 起業アイデアのネタ・WEB活用の伊藤みゆきブログ http://www.miyukiblog.com/archives/774


MindMeister
http://weekly.ascii.jp/elem/000/000/097/97098/

— posted by midilin @ 02:10PM | Comment (0)

プラグインを使うと、ブラウザの画面のキャプチャはいろいろあるが
インラインフレームを使っている、キャプチャソフトがない。


そんなときに使えるソフト。


ALToolbar(アルツールバー)
http://www.vector.co.jp/soft/winnt/net/se453092.html


IE拡張ツールだが
１画面ずつなら、インラインフレームのキャプチャがとれる。

— posted by midilin @ 10:20AM | Comment (0)

Webテストの自動化ができる。

・Seleniumのインストール方法
アイフラッグラボ（アイフラッグ）| Selenium IDE導入 http://iflaglabs.jp/original7.html

・Seleniumの使い方
ユカイ、ツーカイ、カイハツ環境！（7）：ブラウザを選ばずWebテストを自動化するSelenium (1/3) - ＠IT http://www.atmarkit.co.jp/ait/articles/0908/19/news109.html

Selenium-IDEはFirefoxのプラグイン
Selenium RC（Remote Control）はFirefox以外のブラウザ

・assertTextPresent・・・テストの時に使用
http://thinkit.co.jp/free/article/0705/2/5/
assertTitleで、titleタグの検証ができる

・captureEntirePageScreenshot・・・画像キャプチャ


SeleniumIDE - Selenium IDEのコマンド(覚え書き) - Qiita http://qiita.com/oh_rusty_nail/items/c59d4345d5372213128f

・ループ処理について
アイフラッグラボ（アイフラッグ）| Selenium IDEのループ処理 http://iflaglabs.jp/original10.html

— posted by midilin @ 10:42AM | Comment (0)

大量のURLの画面遷移図を自動生成するツールを探していたところ
良さそうなのがあったので、メモ。


・画面遷移図作成ツールBlockdiagをインストールしてみた - cynipeと読む
http://cynipe.hateblo.jp/entry/20110319/1300537702


Blockdiag・・・公式
http://blockdiag.com/ja/blockdiag/


http://99blues.dyndns.org/blog/2011/01/blockdiag_for_win/
↓
Windows用のいろいろ一緒になったもの
http://sphinx-users.jp/gettingstarted/install_windows_standalone.html#sphinx-standalone-installer


ただし、Windows7の64bitではうまく動かなかったので、以下を参考に。


http://d.hatena.ne.jp/torazuka/20131028/blockdiag


こちらのインストール手順で画面遷移図、自動生成確認済み。

— posted by midilin @ 04:27PM | Comment (0)

http://lpo.gaprise.com/blog/10-freesofts-and-addons/

google+の伊藤さんがあげられた記事。
これは使えそう。早速ブックマーク。

「Light Cutter」、確かに使いやすい。

http://surviveplus.net/products/windowssofts/?name=lightcutter

初期設定は必要だけれど
起動→常駐アイコン右クリック→オプション→ショートカットキー
でWin＋Cで設定すると、
いつでも画面を切り出し、クリップボードに記録できるので
Excel資料に、エビデンスつけたりするのに効率がよくなる。

デスクトップがごちゃごちゃするなら
ショートカット不要の「bluewind」もよさげ。

— posted by midilin @ 11:44PM | Comment (0)

・iPlotz
http://iplotz.com/index.php


説明ページ
http://www.webcreatorbox.com/tech/website-wireframe-tools/

出来上がったワイヤーフレームをHTMLで表示
jQueryを使ったアコーディオンやタブも実際に動作するとのこと

無料版は制限があり
無料版だと5つまで
http://penguinbox.net/web%E3%81%AE%E3%81%8A%E5%BD%B9%E7%AB%8B%E3%81%A1%E6%83%85%E5%A0%B1/99/


・Prototyper
http://www.justinmind.com/

説明ページ
http://www.find-job.net/startup/wireframetool10

インストールしてみたが、PDF出力はフリー版でもいける。
HTML出力は有料のPro版を使わないとダメなようだ。


・Pencil
http://pencil.evolus.vn/
FireFox のアドオンとして提供されている。

Windows、Mac、Linuxに対応しているワイヤーフレーム作成ツール
スマホのパーツ有り。
HTML、PDF、PNGのエクスポートなどが可能
HTMLはExport Document→Single web page→All pages in the document
でフォルダを指定すれば、HTML出力（画像出力＋貼付けされたHTML)される
日本語フォント使用可能

使用例
「Pencil」を使って行う、皆が幸せになれるペーパープロトタイピング
http://annex-forkwell.heroku.com/2012/04/23/paper_prototyping

あとは、最近googleから公開された「Google Web Designer」を使うと
描写したものが、HTML5＋CSS3で書き出せるので
Google Web Designerでワイヤーフレームを書くのもありかも。

Google Web Designer
https://www.google.com/webdesigner/


・その他ワイヤーフレームソフト

全部無料で試せる！厳選ワイヤーフレーム作成ツール10
http://www.find-job.net/startup/wireframetool10

楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選
http://dev.classmethod.jp/smartphone/wireframe-tools-7/

— posted by midilin @ 01:36PM | Comment (0)