sumegelog

勘　経験　度胸

admin その他制作関連

ie6はhover以下記述が無効になる

admin その他制作関連

admin その他制作関連

この記事がmixiに反映されればOK

【log】
2009/03/30/14:09
2009/04/03/13:57
2009/04/03/14:30

sumege その他制作関連

「Wp-AmebaPublisher」とはWordPressによるAmebaリモート投稿できるプラグインです。

【準備：開発をイメージする】

まず、プラグイン開発はどのように行うのか学ばなければなりません。
ということで最初にこちらを読みました。⇒「wp-hatena にみるプラグインの作成方 - 前編 -」

PHPの初心者の私もこれでなんとなく雰囲気はつかめました。

【準備：お手本を探す】

お手本その１：「プラグイン・リソース - WordPress Codex 日本語版」。

困ったらこれを解読！無い項目もあるのでそのときは仕方なしに「English版」で頑張って読み解く！

お手本その2：「Wp-MixiPublisherのコード」
まねをすれば何とかなる気がします。。。

【準備：Amebaへのリモート投稿を調べる】

アメブロに投稿する方法は2つあります。

1. ログインして投稿
2. メールで投稿

AtomAPIの説明は？と思い検索しましたがまったく見当たりません。。。
以前調べた、3章　Atom出版プロトコル - The Atom Publishing Protocol(AtomAPI)から探るしかなさそうです。

投稿先は見つかりました！たぶんこれです。。。
「http://atomblog.ameba.jp/servlet/_atom/blog」
※ブログサービスの投稿APIのエントリーリストより

【準備：アメブロに登録】

これ一番重要ですね。。。忘れてましたｗ
ＵＲＬ：http://ameblo.jp/sumege/

【開発：とりあえず作ってみる】

まぁ何はともあれ作ってみます。
とりあえずAtomAPIは無視して簡単そうな「メールで投稿」を利用したプラグインから始めます。

sumege CMS wordpress, Wp-AmebaPublisher, プラグイン

このプラグインはMixiへWPを使用してリモート投稿できるという素晴らしいプラグインです。

いろんな人がと改訂されているのでどれが最新が分かりにくいですが、こちらのをダウンロードすれば現在(2009/3/30)でも動きます。⇒wordpressからmixiに投稿.wp-mixipublisherまとめ

なぜ外部からMixiに投稿できるかというとXML-RPCという「遠隔手続き呼び出し」を行うためのプロトコルを使用しているからです。XMLベースでID、PASSや記事内容を送るとそれが反映されるわけです。

この機能はMixiだけでなくほかのブログにもあります。一覧はこちらの方が纏めていたのでどうぞ（※BlogWriteですけど気にせず）⇒ブログ対応状況一覧

ここで「XML-RPC」と「AtomAPI」の２種類出てきたわけですが、これに関してはこちらに詳しく載っていますのでどうぞ⇒3章　Atom出版プロトコル - The Atom Publishing Protocol(AtomAPI)

というわけで、勉強もかねて今「Wp-AmebaPublisher」と言う、もうまったくのパクリですがWordPressからAmebaに投稿できるというすごく無駄なプラグインを製作中です。

sumege CMS mixi, wordpress, プラグイン

「wp-hatena」とは「各記事をはてなブックマークするクイックリンク」を自動的に挿入するWordpressプラグインです。

【ダウンロード】
ここ⇒「wp-hatena」からプラグインをダウンロードします。

【設置】
お決まりのpuluginsフォルダにアップロードし、設置したい場所に下記のソースを挿入。

<?php if(isset($wph)) $wph->addHatena(); ?>

私は日付の横に入れました。これですぐにブックマークが出来ます！

※詳しい内容はこちらに全て書いてあります⇒wp-hatena

admin CMS wordpress, プラグイン

Webデザイナーは色々なことを行わなければならないので様々なツールが必要になります。

とりあえず現在私が使っているツールを纏めてみました。

【ブラウザ】
①Firefox
多彩なプラグインはWeb制作には欠かせません。
特に、「Firebug」、「WebDeveloper」ないとデバックが大変になります。。。
「pearl crescent page server basic」もサイト全体キャプチャを撮るとき便利です。

②IETester
「IE8 RC1, IE7 IE 6 IE5.5」がタブごとに切れ替えができるので、IEチェックには欠かせません。
でも文字の大きさを変更できません。。。（どっかで変えられるのかな？）
そんな時は「multiple IE」が使用！「DebugBar」（※Firebug見たいな感じのプラグイン）が使用できるし、最終的にはこっちでチェックしています。

③mac Safari
Winのではないです。Macの方です。
カラープロファイルを読み込むブラウザなので仕様に入っていなくても一応いつもチェックしています。まぁデザイナーがカラー設定をきちんと行い、スライスする人がプロファイルを統一すればチェックしなくていい話ですが。。。

④Chrome
Webサーフィン用。今のところ最速？なので、よく使います。Javascriptの読み込みが早いから使いやすい。まぁ作業自体にはいらないかも。。。

【エディタ】
①Dreamweaver
サイト管理が出来るので良く使っています。置換機能が便利！

②秀丸
文字コード・改行コードの変換はもっぱらこれ。
縦選択やタブ切り替えも出来るので、TeraPadよりもこっちを利用しています。
シェアウェアですが、まぁ安いのでお財布にやさしいです。

③Eclipse
PHP、JSのコードヒントが出るAptanaなどのプラグインがあるので開発には便利。
導入が少しメンドイのと、他のエディタと比べて少し重たい（私だけかも。。。）のが不満の品。
DreamWeaverが無いときはこれを使います。

【環境】
①xampp
これが一番大事！
PHP開発やDB使用する場合、CMSの仕事の時はこれが入っていないと何も出来ない。。。
入っていない人は必ず入れましょう。

【Adobe】

①Flash、Photoshopなど言わずと知れたAdobeシリーズはWebデザイナーには必須。
私の場合、Illustratorはあまり使っていません。

【Office】

①PowerPoint
企画書、ワイヤーフレームを作成するときなどよく使います。
ない場合はOpenOfficeをどうぞ。

②Excel
進行管理、サイトマップその他もろもろ全てのツールの中で一番良く使うかも。。。

【その他】
①FFFTP（FTPクライアント）
Winだとこれしか使いません。
Macだと「Cyberduck」を使用しています。

②Lhaplus
圧縮、解凍はこれで大丈夫！
Macだと「CleanArchiver」を使用しています。

③コマンドプロント
インストール時に使用。私の使い道は主にpearライブラリインストール時に使用します。

④Skype
動くのが面倒臭い、メールも面倒臭い場合はおススメｗ

⑤DBDesigner
DB構造を視覚的に表現できるのでとても便利。
上司などに渡す資料を作るときにもってこい。

⑥Bridge
psdやaiデータを開かずとも中が見れ、データサイズやドキュメントサイズなどの情報も確認できるので、とても便利。他にも「Picasa」などは画像を表示するときに便利。

⑦Winshot
macユーザはともかくWinユーザはスクリーンショットが範囲選択できないのでこれはおススメ。

sumege 作業用ツール アプリケーション, ブラウザ

以前、「ソースコードを表示する「SyntaxHighlighter」の導入」で紹介しましたがWordpressプラグインでもありましたので、ここに記します。

【ダウンロード】
ここ⇒「Syntax Highlighter for WordPress」からプラグインをダウンロードします。

【設置】
お決まりのpuluginsフォルダにアップロードし、プラグインで「有効」しておしまい。

【実装】

［言語 ショートコードオプション］
//ここにソースコードを書きます
［/言語］

※標準では設定した言語が頭が表示されるのですが、いらなかったので個人的に消しています。

【設定値】
※詳しい内容はこちらから⇒Syntax Highlighter for WordPress
念のため上記URLから引用しときます。

≪ショートコードオプション≫
①num（行番号の開始番号指定）
例：［php num=10］

mb_internal_encoding("UTF-8");
require_once("MDB2.php");
echo('sumesume');

②highlight_lines（ハイライト表示したい行を指定）
例:［php highlight_lines=”3″］

mb_internal_encoding("UTF-8");
require_once("MDB2.php");
echo('sumesume');

③gutter（行番号を表示）
例:［php gutter=false］

mb_internal_encoding("UTF-8");
require_once("MDB2.php");
echo('sumesume');

④ruler（ルーラーを表示）
例:［php ruler=true］

mb_internal_encoding("UTF-8");
require_once("MDB2.php");
echo('sumesume');

⑤toolbar（ツールバー表示）
例:［php toolbar=false］

mb_internal_encoding("UTF-8");
require_once("MDB2.php");
echo('sumesume');

⑥lighttrue（簡易表示）
例:［php light=true］

mb_internal_encoding("UTF-8");
require_once("MDB2.php");
echo('sumesume');

⑦font_size（フォントのサイズを指定する）
例:［php font_size=”50%”］

mb_internal_encoding("UTF-8");
require_once("MDB2.php");
echo('sumesume');

≪使用できる言語≫
・bash
・c
・cpp
・csharp
・diff
・groovy
・java
・javascript
・delphi
・pascal
・php
・python
・ruby
・shell
・text
・vb
・vbnet
・sql
・css
・xml
・html
・xhtml
・xslt

admin CMS wordpress, プラグイン

「SyntaxHighlighter」とは下記のようなソースコード表示を簡単に表示できるプラグインです。

mb_internal_encoding("UTF-8");
/*MDB2を読み込み*/
require_once("MDB2.php");
echo('sumesume');
#echo('sumememe');

通常は「pre」タグ、「code」タグで囲むとそのまま表示するのでものすごく簡素になります。

echo('sumesume');


ですが「SyntaxHighlighter」を使用すると行数、色をつけてくれるのでとても読みやすくなります。

【ダウンロード】
ダウンロードはgoogleCodeで配布しているので、下記URLから~
http://code.google.com/p/syntaxhighlighter/

【設置】
設置はダウンロードしたデータを丸ごとUPして、リンクを貼るだけ。
（※詳しくはgoogleCodeの「wiki>usage」から）

【実装】
下記ソースのように表示したいソースを「pre」タグで囲ってclassに下図「Aliases」を参考に設定すればOK。また「textarea」でもできるみたい。
（※まぁ詳しくはgoogleCodeの「wiki」を見てください）

<pre class="c-sharp">... some code here ...</pre>

admin HTML+CSS プラグイン