私はWeb以外にリーフレットや展示会用のパネルのデザインも制作しています。また、パワーポイントのブラッシュアップもよくある案件です。
で、長いお付き合いのクライアントさんの場合、この間制作したあのパネルを修正したいとか、あのリーフレットを増刷したいとか、このパワポのデータ失くしちゃった(エー(´・ω・`))んだけどまだ持ってる?とか・・・そういうお問合せをいただくことがよくあります。
制作物は案件ごとに日付やファイル名のリストなど作って管理しているのですが、クライアントさんの方でファイル名を変えられることも多く、その変えてしまったファイル名でお問合せが来たりすることもあります。
そうなると、ビジュアルでの一覧表をWeb上に作成して、該当のデータを探したり、クライアントさんにこれですよね?って確認することも多々・・・
一々手作業で画像貼るのは面倒なので、特定のディレクトリ内にアップした画像をphpで一覧表示させてます。
以下のphpを画像と同じディレクトリに放り込むだけ。

ほんとは便利なストレージサービスを使えば、高機能だし楽なんですが、研究職の方や公的な事業を行っている会社、あるいは製品写真が機密情報扱いになっている製造業の会社など、ストレージサービスを使うことに抵抗のあるクライアントさんは意外と多くて・・・
保守的なお土地柄もあるのかな・・・
というわけで、認証かけたりその他色々とディレクトリの保護対策もします。

スポンサードリンク

リンクにシンプルに≫をつける。
メールアドレスへのリンクにはつけない。
pdfファイルへのリンクについては、アイコンをつける。

スポンサードリンク

サーバー移転などでDNSを変更したのに、ブラウザの表示がなかなか変わらないことがあります。
そんなときにはPC内のDNSキャッシュを削除してみると、表示が変わったりします。

Windowsの場合

Windows7で作業した内容です。

  1. コマンドプロンプトを立ち上げます。
    スタートメニューの検索で「cmd.exe」と入力して検索。
    「cmd」をクリックすると、黒い画面が立ち上がります。
  2. 下記コマンドでDNSキャッシュを削除。
  3. ブラウザで確認。

おまけ

Windowsでのhostsファイルの変更は、c:¥windows¥system32¥drivers¥etcの中のhostsファイルをメモ帳などテキストエディタで開いて編集。

Macの場合

Yosemiteで作業した内容です。

  1. ターミナルを立ち上げます。
  2. 下記コマンドでDNSキャッシュを削除します。
  3. ブラウザで確認。

おまけ

Macでhostsを変更、設定するには、ターミナルを立ち上げて、以下コマンド

参考サイト

いつものごとく、Google先生にお伺い。以下のサイトを参考にさせていただきました。

OS X Yosemite (v10.10 ) で DNS キャッシュを削除するコマンド – Qiita
http://qiita.com/dounokouno/items/04ff6158bf32d1183713

WindowsのDNSキャッシュをクリアする方法
http://freesoft.tvbok.com/tips/net_tips/flushdns.html

スポンサードリンク

会社のWindowsでフォルダ内のファイル名の一覧をテキストで書き出す必要がありました。
コマンドで書き出し。最近、黒い画面にも少し慣れてきました。

例えば、デスクトップのphotoフォルダの中のファイル名をデスクトップのFile.txtに書き出しする場合。

左側がファイル名を取得したいフォルダのパスで、右が書き出すテキストファイルのパス。

あ、会社の環境はWindows7です。

スポンサードリンク

時々パワーポイントからIllustratorのデータを作成してほしいという依頼があります。
できるだけ効率的に作業する手順をメモ。(Windowsで)
といっても紙媒体の経験が多いわけではないので、もっと早くやれる方法をご存じの方もいるかもしれませんが。

使用ソフト:PowerPoint2013、IllustratorCC(2015)

PowerPointから画像だけ取り出す。

  1. 拡張子がpptの場合は、pptxで保存し直す。
  2. pptxのファイルをコピーして、拡張子をzipに変更する。ほんとにいいの?って聞かれてもOKで。
  3. zipを解凍する。
  4. 解答したフォルダのpptの中のmediaフォルダ内に画像が入っているので、作業用Illustratorと同じフォルダの中に移動し、後はPhotoshopでEPSに変換するなど、Illustratorでの作業に使える形式にする。

パワーポイント→PDF→Illustratorのデータへ変換。

  1. パワーポイントを開く。
  2. ファイル→Adobe PDFとして保存。
  3. PDFをIllustratorで開いて、Illustrator形式で保存し直す。
  4. すべて選択(Ctr+A)
  5. オブジェクト→クリッピングマスク→解除(Ctr+Alt+7)を2、3回でクリッピングマスクを解除。
  6. すべて選択したまま、オブジェクト→パス→パスの削除でクリッピングマスク用のパスを削除。

後は、画像を入れ替えたり、デザインを整えたりといった作業をします。
画像は解像度粗々で小さいことも多いので、別途もらえそうならもらうことが多いです。
もらえない時は、最大限Photoshopでマシな状態にしておいて、それでも粗いですけどいいですか?って確認してもらいます。

スポンサードリンク

blockquoteタグで囲んだ引用部分をスタイルシートで見やすく装飾します。
画像は使いません。

引用サンプル

スポンサードリンク

アンケートフォームを作っていて、エクセル原稿からコピペする時に、文字列の頭に文字を追加したかったのですが、計算式だと結合している部分がある時に面倒です。
こちらの知恵袋で見つけたマクロを使うやり方が、ものすごく簡単で一瞬でできたのでメモ。

エクセルの文字列の頭に同じ文字を一気に入力することはできますか? – Yahoo!知恵袋
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1019564565

VBEを開き(Alt + F11)、VBEのメニューバー→挿入から標準モジュールを挿入。
出てきた画面に下記マクロをコピペ。

頭に文字を付けたい範囲を選択した状態でマクロを実行。

追加する文字の中にエスケープしなければならない文字がある場合、その文字の前に「”」を追加。
例:「<p class=”ex” >」を追加したい。→上記マクロの「追加する文字」の部分に「<p class=””ex”” >」

追記:文末に文字を追加するマクロ

追記:文頭、文末に文字を追加するマクロ

スポンサードリンク

ページを読み込んだ時の画面幅でtableの表示方法を変える。
768px以上なら普通にtableで表示。768以下の場合はタグをdivに置き換えて、リストっぽい表示にする。

cssだけでとか、色々な方法があるけれど、軽量でシンプルな方法を探していて、Design Spiceさんの下記のページの「jQueryでタグを書き換える」方法に。1ページに複数のtableがあるページがあったので、ちょっとjsをアレンジした。

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
http://design-spice.com/2012/11/01/responsive-table/

※ページを読み込んだ時の画面幅なので、読み込んだ後に画面サイズを縮小しても変化しない。ま、タブレットやスマホで画面サイズをグリグリ動かせるわけじゃないのでOK。

htmlはこんな感じ。tableタグのclassに「responsive_table」を指定する。

jQueryと一緒に使用する。tableの各タグの置換えは、ページ全体の構造や好みで変えれば良いと思う。

スタイルシート。

スポンサードリンク

縦横中心にボックスを配置するCSS。どこかで使えそうなので、メモ。

Some Mini Sass Mixins I Like by Chris Coyier on CodePen
http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like

スポンサードリンク

画面サイズによる、画像の切り替え。

色々使ってきたけれど、「BlackFlag」さんのやり方が使いやすい。ありがたい。

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験 | BlackFlag
http://black-flag.net/jquery/20120808-4047.html

1.小さい画面ように「photo01_sp.jpg」、大きい画面ように「photo01_pc.jpg」を準備しておく

2.以下のスクリプトを記述。(外部ファイルにして読み込んでもOK)

3.classに「switch」を指定。(上記のscriptで指定したclass)

スポンサードリンク