USBメモリでWordPressを使う

社内でWindowsメインで作業しているのは、私一人だったりします。ほとんどMacです。

と言うわけで、今回もWindowsです。10は良さそうですね!


Wordpressを使った案件を色々やっていると、ローカルでも環境が欲しくなります。

それがUSBメモリに入って持ち運べると最高なんですが、と思っていたら既にありました。


今回は、Instant WordPressの導入説明です。

一応現在の最新版、Wordpress4を想定しています。

はじめ何も考えずに、導入したら国際版になってしまったので、最初から日本語版になるようにセットアップを進めてみます。


1.ダウンロード

ここからです。→http://www.instantwp.com/

※2014年10月31日現在の最新版は4.3.1

instant_wp_001


2.インストール

InstantWP_4.3.1.exeを実行してインストールします。

リムーバブルディスクに今回は入れてみます。

今回はSDカードのKドライブに導入してみます。

instant_wp_004


3.Wordpress本体の差し替え

落としたZIPを解凍します。この中にWordpress本体は含まれていますが、国際版です。テーマは英語になるようです。

そこで日本語版に差し替えます。wordpress.orgから最新版を落としておきましょう。

instant_wp_002


ダウンロードしたWordpressを解凍すると、「Wordpress」と言う名前のフォルダが出来ます。

これをInstantWordpressをインストトルしたドライブにある、

K:InstantWP_4.3.1iwpserverhtdocswordpress と差し替えます。(Kドライブ場合。適宜読み替え)

上書きでなく、削除してから入れ替えて下さい。これで完全日本語版になります。


4.起動

インストール先のディスクから、InstantWP.exeを起動します。

instant_wp_013


5.phpmyadminでDBを作成

InstantWordPressのコンパネから、phpmyadminに入ります。

instant_wp_005

IDはroot、パスはありません。

DBを追加します。例では、wp_testですが、何でも良いです。「作成」ボタンを押して作成します。

instant_wp_006


6.Wordpressのインストール

InstantWordPressのコンパネから、WordPressトップを開きます。

instant_wp_007

セットアップ前なので、設定からはじめます。

サーバーに導入する場合と同じです。

instant_wp_008


DBの設定は先ほど作ったDBの情報を入れます。パスは空欄です。

instant_wp_009


問題なければ、次に進みます。インストールを実行します。

instant_wp_010


各種設定です。最後にWordPressをインストール、します。これで完了です。

instant_wp_011


7.ログイン、運用

設定が終われば、あとはログインして下さい。普通のWordpress環境です。ユーザーを追加したり、プラグインを追加したりして、環境を整えてみましょう。

びっくりするほど普通です。

instant_wp_012


試しにメモリを抜いて他のPCで起動してみましたが、今のところ問題ありませんでした。

バージョンアップやテーマの差し替え、プラグインの導入も通常のWordpressと変わりません。


終了は、Instant WordPressのウインドウを閉じれば各種サーバーも終了します。


USB運用が出来るので、色々面白い使い方が出来そうです。

簡単にWindows環境と切り離せるのが気に入ってます。

ただ、ヘビーに使うとどうなるのかわかりません。念のため予備環境、テスト環境、デモ環境としての利用が良いと思います。

移動もきちんとサーバーを終了させて取り外しの処理をしてから抜かないと同環境が簡単に壊れるような気もします。


暫くテストで使ってみる予定です。


サムネイル一覧を印刷する。

WEB制作でお客様と沢山の写真の中から使用する写真の選定をする場面は多々あります。

通常はPCで見ながら選定しますが、人によっては紙の印刷物から選ぶ方を好まれるケースもあります。

状況によりけりですね。


そんなとき便利なのが、サムネイル一覧を出力したプリントですが、

無料で比較的簡単に作る方法です。(Windows環境)


1.Irfanview32を入手

もともと海外ソフトですが、日本語化もされています。

入手先↓ありがたいことに初めから日本語化されています。

http://www8.plala.or.jp/kusutaku/iview/

インストール不要で、解凍後はすぐ起動できます。


2.画像をIrfanviewで開く。

元々ビューワーなので、Irfanviewで画像をまず開きます。

ファイル→開くで複数画像の入ったフォルダから、写真を1枚選択します。

ウィンドウに画像をドラッグしてもいいです。

irfan_001


3.サムネイル一覧を出す。

「t」を押すと別窓でサムネイルが表示されます。

irfan_004


4.出力したい画像を選択する。

全部出したいときは、Ctrl+Aで全選択。

irfan_005


 


5.コンタクトシートを出力する。

ファイルから選択画像でコンタクトシートを作成 を選びます。

irfan_006


6.出力設定をする。

ここを頑張ると見やすくなりますが、手軽にやることがテーマなので、おすすめ設定を載せておきます。

irfan_007

設定した方が良い項目

・サイズ…A4を選択

・dpi120だと印刷しても割と鮮明で選択しやすい。大きいときれいだけど時間がかかります。

・縦1枚に敷き詰める枚数 縦横の枚数を指定。A4だと縦6枚くらいがいいです。

・ヘッダーあるとわかりやすい。

・フォントカラー…なぜかデフォルトが緑色なので、黒とかに。

・フォント…日本語フォントにしておかないと、ファイル名が日本語だと化けます。日本語文字セット選択。

・出力場所どこでも良いです。デスクトップでも。

・保存形式PNGが綺麗ですね。


7.出力!

これで出力を押すと、Sheet_001.png~順にサムネイル一覧を配置した画像が出力されます。

irfan_008

単なる画像ですので、あとは印刷するだけです。Irfanviewで印刷まで出来ます。

アスペクト比を保持して、ページに合わせて印刷で、ちょうどよく印刷されます。

irfan_009


IrfnviewはWindowsであれば95から8.1まで環境を問わずに使えますので、

使い方を覚えておくといざというとき便利です。知ってて損はないかと。

本日客先で、いざという場面に遭遇したので、この記事を書きました。




追記

・Windows7以降はOS標準で、サムネイル出力の機能があります。

・最近は「コンタクトシート」と呼ぶみたいです。サムネイル一覧。

・AdobeのBridgeとPhotoshopでも同じ事が出来ますが、処理時間がかかります。きれいですが。ソフト高いですし。

・Irfanviewには95の頃からお世話になってます。Irfanさんありがとう。


MACではじめるUstreame

前の記事に引き続いてUstreameでの配信方法を紹介します。


私がMacユーザーなので、Macで配信する方法をお教え致します。


とりあえず、必要なソフトですが…


・Ustream Producer (Ustreameが提供するソフト、メインとなる中継ソフト)


・SoundFlower(Mac内の音声をコントロールするソフト)


・CamTwist(映像にテロップやエフェクトをかけるソフト)


・LadioCast(ミキサーソフト)


とりあえず、これだけ入れとけば十分な配信ができます。




まずは、おおざっぱな構成を説明すると

イロイロな音声は『LadioCast』でミキシングし、イロイロな映像は『CamTwist』と『Ustream Producer』でミックス。

さらに、音声と映像を『Ustream Producer』でまとめて配信いたします。

 


音声について。


音声をコントロールするソフトは『SoundFlower』と『LadioCast』です。

音声のソースとしては『Macが出す音』と『マイクからの音』がありますが、これを一つのボリュームで調整するのは難しいですよね。

通常、Macの音声はシステム環境設定でミキシングされスピーカーに出力されます。

ソコをSoundFlowerでミキシングされないようにします。

『Macが出す音』をSoundFlowerへ流し、LadioCastでマイクとSoundFlowerの音をミキシングして内蔵出力へ出します。


映像について。

Ustream Producer』のプロ版であれば、単体でテロップやワイプ(小窓を使った2画面)はできるのですが、無料版ではできません。そこで『CamTwist』を使ってテロップなどを付けた映像を用意する訳です。


これで、映像と音声がそろいましたので、『Ustream Producer』で映像を『CamTwist』、音声を『LadioCast』から、それぞれを選んで、ミックスして配信いたします。


文面で見るともの凄くヤヤコシイですが、1つ1つの設定は簡単です。


 


ustreame_flow


welcartでショップを作ろう 1

必要に迫られて、自前のショッピングサイトを大至急立ち上げなくてはならなくなったので、(そんなのばっかり)welcartを導入してみました。その後実際の運用まで、何回かに分けて解説してみます。


1.Wordpressを導入します。

思い切り省略します。各自導入しておくこと。

Wordpressの設置も難しいようだと、以降の作業は厳しいと思います。

無料のレンタルカートや、弊社のような業者に依頼することも検討して下さい。




2.welcartプラグインを導入する。

ワードプレスのダッシュボードからプラグイン→新規追加を選びます。

welcart_inst_001


welcartを検索します。見つかったプラグインをインストール。

※説明文が英語ですが、日本のプラグインです。

welcart_inst_003


有効化します。

welcart_inst_004



うまくいくとダッシュボードのメニューが増えてます。

welcart_inst_005


3.テーマをWelcartデフォルトに変更。

外観ページからデフォルトテーマを選択。

welcart_inst_006




4.確認

トップページがショッピングサイトになりました!当然ながら商品はありません。

これでカートが設置できました。「ここまで」は簡単ですね。

welcart_inst_008


あとは、ショップとしてオープンするまでに、

・ショップの基本情報設定

・送料などの設定

・決済方法の設定

・新規商品の追加

・見た目を何とかする。(標準テンプレート)

・カード決済について

など主に各種設定が残ってます。漠然とスタートすると躓くところです。

テストで商品だけでも追加してみたいところですが、説明が長くなること必須なので、次回にします。



続きます!




追記

取り急ぎ、テストしてみたい方は、商品を追加して下さい。

流れはこんな感じ。

・事前に配送方法を名前だけでも設定してください。

・公開時エラーが出ないように適当に項目を埋める。

・ダミー商品のカテゴリをおすすめ商品にする。

・するとトップページに商品が出てきます。

welcart_inst_009



商品詳細ページです。

welcart_inst_010




カートに入れてみます。

welcart_inst_011


入りました!

ここまでは簡単なんですけどね。ここからが大変です。


Illustratorで手描き風

ベジェ曲線大好き、SAKAIです。

あとからでも修正もしやすい、少しだけ手描き風な表現を
Illustratorのブラシを使って試してみました。
①ブラシの準備

まずは線画用のブラシを作成します。
抜きの細い部分と墨だまりの太い部分を線幅ツールで調整しつつ作ります。

スクリーンショット 2014-10-31 13.12.45

それにラフをかけたものをアートブラシに登録。
※ブラシ登録すると自動的にアピアランスが分割されるので、ブラシの元データはとっておきます。

これを

長いライン
中くらいのライン
短いライン
と、3種類用意しました。

 

ブラシ1種類だと、ラフのかかり具合がパスの長さで違ってきます。

また、ラフをかけないブラシで作成→ラフ
でも同様にできますが、
ブラシに処理をかける上で、曲線部分に妙な隙間ができてしまいます…

なので少し面倒ですが、描くイラストのパスの長さにあわせて、ブラシを作成します。

 

②線
滑らかになりすぎないようにパスを引いていきます。
ここでも線幅ツールを使用して、微調整します。

 

③着色
着色用のパスを作成
塗り残しやはみ出し部分を作ったり、線にブラシを適用したりします。

スクリーンショット 2014-10-31 14.55.26

そんなこんなで完成!ハロウィンきりんくん(仮)。
・ブラシのラフを強めにかける
・さらに不透明マスクで、ざらざらした質感を追加
・着色に絵筆ブラシを使用

↑お好みに合わせてプラスすると、より手描きっぽさがアップします!


ショッピングサイトのまとめ3

最近、ストーブ前から離れられないhaneです。

 


第3回目はコストパフォーマンスが良い「カラーミーショップ」です。


名称未設定-1


特徴


「カラーミーショップ」は、GMOペパボ株式会社が運営するネットショップが開業できるサービスです。

デザインのカスタマイズ性があり、上級者の方は独自のデザインを組み込む事もできますが、

ホームページ作成経験の無い初心者の方は、用意されている様々なテンプレートから

好きなテンプレートデザインを選んで設定をして、

自分好みのショップをカンタンに作る事も可能です。


メリット


●無料期間が30日間あるので、じっくり試用できます。

●デザインのカスタマイズ性が高いです。

●デジタルコンテンツダウンロード販売機能、定期購入機能、

会員価格の表示機能など、低料金の割に機能が豊富です。

●運営元のサポートや助け合い掲示板が便利。

不明点が合っても解決しやすい環境が整っています。


デメリット


●スマートフォン用に設定できるフリーページの上限が10ページしかありません。

●決済契約で長い時間がかかる場合がある。


 


<こんな店舗におすすめ>

●月々の運営予算を抑えたい場合

●試しに始めてみたいが、サイトはしっかりと作りこみたい場合

●デザインにこだわりたい場合


とても初歩的なjQuery(僕のスニペットの中から)

お昼に外に出たら霰と霙(漢字で書くとなんだかちょっと迷いますね)の中間みたいなのに降られたyasaiです。


急に冬っぽくなってきまして、北国生まれの寒がりにはちょっと厳しい季節になってきました。


長袖をせっせと着込んで、早速着ぶくれしてます。


ちなみに、暑いのも苦手です。ずっと春がいいなぁ。


141028


さて最近はWordPressのお勉強していて、先日久しぶりにjQuery書いたら、「あ、PHPじゃない…」と思うくらいアホになってたわけでして。


これはいかんなぁということで、ごく初歩的なことからjQueryのおさらいをしてみたいと思います。


基本的には適当に保存してあったスニペットからですが…


 


「$(document).ready()」と「$(window).load()」


僕もはじめは呪文のように覚えてましたが、$(document).ready()と$(window).load()の違いについて。


まずは使い方。




どちらも意味合いとしては、「~が完了したら」ってことですが、


ここではざっくりつかむと、$(document).ready()のほうは、「HTML読みこみ終わったら処理」。


$(window).load()の方は「描画とかも終わったら処理」。って感じですかね。


だから、画像の高さを取得したいとかいう場合は、$(window).load()の方をつかわないとダメなんですね。


 


タイミングを見計らって処理「setTimeout()」


これもよく使いますよね。




アニメーションさせるときとかによく使いますねー。




例えばこんな感じですかね。これで、#btnをクリックして1秒後に#contentがフェードアウトします。


今回はとても初歩的なところですけど、自分のリハビリもかねて算数ドリルです。

やっぱりなんでも日々触ってないと抜けていくもんだぁと実感している最近です。

抜けていくのはあっという間なのに、覚えられるものが年々少なくなっているのは、これどういうことなんでしょう?(苦笑)