Drupalの操作Drupalの操作

Twitter自動投稿をノードタイプ別フォーマットにする

ノードの投稿時、自動的にTwitter投稿ノードの投稿時、自動的にTwitter投稿

Twitterモジュール、Twitter actionsモジュールを有効にし、Twitteするノードタイプを選択すると、当該ノードの投稿時、自動的にTwitter投稿が行われます。

そのままでは、Default format string:として自動投稿時のフォーマットが指定できます。

さらに、Twitternodetypeモジュール(弊社オリジナル)を追加インストールすると、

各ノードタイプ各々のデフォルトフォーマットを指定できるようになります。

携帯対応(Japanese Mobile版)

Japanese Mobileモジュールを利用する場合はMobileimageモジュールをJapanese Mobileモジュールを利用する場合はMobileimageモジュールを

Drupal-CMSの携帯対応、もうひとつの方向:Japanese Mobile。Drupal-CMSの携帯対応、もうひとつの方向:Japanese Mobile。

他にも http://drupal.org/ にMobile対応モジュールが紹介されていますが、日本の"携帯端末"に即したモジュールは見つけられません。

Japanese Mobileは http://drupal.org/project/jp_mobile で紹介されています。

PDA Themeモジュールは携帯端末からのアクセス時、表示用テンプレート(テーマ)を携帯端末向けCSS(スタイルシート)に切り替えたりします。

Japanese Mobileモジュールも基本動作としては同様です。

Japanese Mobileモジュールを利用するときは Mobile tools, Browscap, tokenモジュールが必要です。

Japanese Mobileモジュールは他に依存するモジュールがあることや、setting.phpに手を入れる必要がある場合がある事が とっつきにくくしています。(PDA Themeモジュールもsetting.phpに"自動"で変更を加えますが、Japanese Mobileモジュールは自動ではありません)

2010年7月現在、弊社なりのDrupal-CMS携帯対応状況2010年7月現在、弊社なりのDrupal-CMS携帯対応状況

残念ながら、管理ページや すべての状況に適用できるオールマイティな対応方法は現在、存在しません。
以下のようなケースに分類されます。

「 携帯端末からは閲覧のみ」行うケース

この場合はPDA Themeモジュールでも良いのですが、PDA ThemeモジュールはViewsに対応していないので、Viewsを利用したブロック / ページを携帯端末に見せる場合はJapanese Mobileモジュールを使います。

Japanese Mobileモジュールを利用する場合、PDA Themeモジュールの一押し機能(画像の自動縮小)が利用できなくなりますので、代わりにMobileimageモジュール(弊社オリジナル)を使います。

MobileimageモジュールはPDA Themeモジュールの画像の自動縮小機能を切り出したようなモジュールです。
携帯端末閲覧時にコンテンツ中の画像を一定サイズ以下に縮小します。さらにPDA Themeには無い機能(pngやgifをjpgに自動変換)もあります。
Mobileimageモジュールは、PCと共有のコンテンツを利用した場合でも、画像を間違いなく表示(サイズも含めて)するサポートを行います。

「携帯端末からフォーム投稿」を行うケース

お問い合わせ等、非ログイン状態でも投稿フォームを携帯端末対応にする場合がありあます。

PDA Theme+Webformsモジュールは、エンコードの問題で うまく動作しません。

この場合もやはり Japanese Mobileモジュールを利用する事になります。

Japanese Mobileモジュールでも、一部プログラム変更が必要な場合があります。

また、PDA Themeモジュールは画像を携帯サイズに自動変換してくれる便利な機能がありますが、フォーム内で画像によるCAPTCHA認証を行っている場合、CAPTCHA認証用の画像まで対象になってしまい、CAPTCHA認証用の画像が表示されません。

PDA Themeモジュールの改造で対処できます。

Mobileimageモジュールは既に上記問題は解消されています。

携帯端末からコンテンツ投稿を行うケース

携帯端末からコンテンツ投稿を行うケースでは 画像等の投稿がある場合やセキュリティの問題もあり、メールでの投稿をお勧めしています。

メールからのコンテンツ投稿を受け付けるために、Mailhandler, Mailalias, Mailsaveモジュールを利用します。
ユーザプロファイルに携帯メールアカウントを追加する事で、特定コンテンツへの画像を含む携帯メール投稿を可能にします。

携帯端末からログインするケース

お勧めしていません。

携帯端末からログインするケースは setting.php に変更を加え、SESSIONを維持(持ちまわる)するための処置をする必要があります。
ID(例えばdocomoでは「端末製造番号」「個体識別情報」「iモードID」)による認証で万全というような記事も見かけますが、詐称は可能です。IPアドレス等、他の確認情報と併用する必要があります。
また、iモードIDはSSL環境下では取得できないなど、いくつか問題があります。

携帯端末(特にdocomo)がCookieを持たない現在、積極的に携帯端末の認証を進めるにはコストがかかりすぎます。

従来の携帯端末からログインできたとしても、画面サイズや操作性から 管理ページなどは到底使えまえん。

スマートフォンなら、動的にテーマ(テンプレート)を変更することにより、対応可能です。

Mobile Toolsモジュールにより、iPod / iPhone / Android)等のテーマ切り替えが可能です。

管理アイコン

管理ページにダイレクトにジャンプするアイコン管理ページにダイレクトにジャンプするアイコン

管理アイコン(adminicons)はアクト・ブレインのオリジナルモジュールです。

管理アカウントでログイン中に管理ページにダイレクトにジャンプするアイコンを追加表示します。

なぜ管理アイコン(adminicons)?なぜ管理アイコン(adminicons)?

Drupal標準のナビゲーションメニューやAdministrator Menu等の拡張モジュールによるナビゲーションは それなりに便利ですが、汎用的なメニューなので 機能性がいまいちです。

公開ページと管理ページのデザインが変わらない割には、ダイレクトに管理できるようなイメージがありません。(ありきたり?)

管理アイコン(adminicons)を追加すると管理アイコン(adminicons)を追加すると

アクト・ブレインのオリジナルモジュール(adminicons)を追加すると、管理ユーザでログインした時に、メニューやブロックの端に小さなアイコンが現れ、管理ページに直接ジャンプできるようになります。

Drupal標準ではコンテンツ表示時、[編集]ボタンが表示され、表示中コンテンツそのものの[編集]画面へはダイレクトに行けます。(上図 青○部分)

ところが、その他の内容を管理しようとすると、ページ最上部の黒地に白字のメニュー(Administration Menu拡張モジュール)や標準のナビゲーションメニューから行かなければなりません。(1クリックでは行けません)

アクト・ブレイン製adminiconsをインストールすると、上図赤○部分のように各ブロックの右上部に管理ページにダイレクトにジャンプするためのアイコンが表示されるようになります。

ワンクリックで相応する管理ページにジャンプできるため、操作性が向上します。

特に、ブックページやページ追加時の表示順の変更などは非常に簡単にできるようになります。

コンテンツ作成時のメニューやカテゴリ選択を簡単にする

コンテンツ作成時の上位メニューの選択に利用コンテンツ作成時の上位メニューの選択に利用

タクソノミーでコンテンツを分類しておくと、後々ユーザ誘導にとても便利です。

タグ付けされたコンテンツはタクソノミーメニューなどでサイドバーに関連ページ表示ブロックの表示方法のようなユーザ誘導やタクソノミーによるブロックの表示有無の切替などに応用することができます。

メニューも同様で、うまく構成すると、サイドバーや関連ページの表示にガイダンスできますのでユーザ誘導に有効です。

 

しかし、その一方、運用するにしたがって、メニューや分類用語の数が増えてきて、新規コンテンツを選択する際に選択する作業が面倒になってきます。

通常、それを解消するために分類用語を階層化したりしますが、Drupal標準のプルダウン表示では、階層の表示が解りにくく、あまり効率的ではありません。

 

hierarchical_selectモジュールが、解決してくれます。

手順は以下のとおりです。当サイトの

  1. 管理セクション≫サイトの構築≫モジュールでHirarchical Select Menuを有効にします。

    ※「いくつかの必須モジュールを有効にする必要があります
    Hierarchical Select Menuをインストールするには、
    Hirarchical Selectモジュールを有効にする必要があります」というガイダンスが表示されますので、[継続]します。
  2.  以上です。

その結果、下図のようなI/Fになります。

Hirarchical Select Taxonomyモジュールを有効にすると、コンテンツ作成時の上位メニューの選択に利用することができるようになります。

タクソノミーに適用するには、Hierarchical Select Taxonomyモジュールを有効にします。
※各ボキャブラリ単位で有効・無効を選択できます。
→ボキャブラリの編集ページで「Use the Hierarchical Select form element for this vocabulary.」を有効にします。

 

メニューやタイトルを画像にする-Signwriter

メニューやタイトルを動的に作成メニューやタイトルを動的に作成

ブログやCMSは、動的にコンテンツを生成します。

その関係で、表示されるメニューやタイトルは動的に作成されます。その関係で、文字においても画像によるインパクトが出せず、なんとも煮え切らないページになっているということはないでしょうか。

Signwiterモジュールを利用することで、装飾の自由度が格段にあがります。

例えば、本サイトのタイトル(このページでは「メニューやタイトルを画像にする-Signwriter」)もSignwriterモジュールを利用して表示しています。

いかがでしょうか?ブラウザに依存する文字には得られないデザイン感が出ていませんか?

Signwriterは以下の手順で有効にします。

  1. 管理セクション≫モジュールで「Singnwriter」を有効にします。
  2. ユーザの管理≫権限でsignwriter モジュール以下、
    ・administer signwrite
    ・ruse PHP for signwriter pages
    を有効にします。
  3. 管理セクション≫サイトの環境設定≫Signwriterで、最低限の設定を行います。

    薄赤の部分は上記と同様に設定してください。
  4. 次にAdd a profileをクリックして画像変換用のプロファイルを作成します。

    薄赤の部分にプロファイル名を入力します。いくつかプロファイルを作成する場合は違いの分かる名前にします。
  5. 全般の設定は以下のようにします。
  6. テキスト部分の設定を 通常時、Hover時、アクティブ時各々行います。
  7. Drop Shadow、Background、Borderに関しても同様に設定します。
  8. Image Layout、Image Typeを設定します。

    上記はこのサイトのページタイトル用の設定例です。慣れてきたら変えてみると違いが分かってきます。
  9. [保存]すると、Signwriterのメイン設定ページに戻ります。
  10. 上記で設定したプロファイルが Profile一覧に表示されます。
  11. Template Hooksで作成したプロファイルをPage titles:で使用するように選択します。

    必要に応じて、プロファイルを作成し、各々割り当てます。
  12. メニューに対してSignwriterを適用する場合は、上記同様にプロファイルを作成し、各々のメニューに割り当てます。
  13. 最後に[設定の保存]を行います。

 

いかがでしょうか。あまり使いすぎると、うるさいですが、Signwriterはリアルタイムの画像処理はサーバ側で行うためクライアントに負担をかけません。

生成されるタグにもキャラクタ文字列は残っており、SEO的にも問題がありません。

有料フォントを購入し、サーバーにアップすることで表現力が格段に広がります。

ヒートマップによるクリック解析機能-ClickHeat

ページ内クリック状況が見ることができるページ内クリック状況が見ることができる

ClickHeatは、ヒートマップが作成可能な、オープンソースソフトウェアのアクセス解析ツールです。

Drupal拡張モジュール(ClickHeat)を導入することにより、自サイト中のページ内クリック状況が右図のように見ることができるようになります。

数値的なコンバージョンや、導線の解析とClickHeatを併用することにより、効果的なユーザの誘導を検討することが可能となります。

どのボタンやハイパーリンクがクリックされているか掴むのも重要ですが、ハイパーリンクになっていないテキスト上や画像上にクリックが集中している場合、その場所にボタンを表示しよう。とか。

クリックされていないボタンをクリックが集中している場所に移すとか。

ClickHeatでクリックされているページ上の場所を把握することで、さまざまな工夫が可能になります。

弊社会員さまサイトへのClickHeatのインストール/設定は多少複雑になるため、ご希望により弊社が行います。

ご希望の会員様はサポートページより「新機能要望」で ご連絡ください。

お問い合わせフォームのスパム対策-CAPTCHA

自動登録ロボット対策としてCAPTHAモジュール自動登録ロボット対策としてCAPTHAモジュール

Webサイトを設置し、しばらくたつとお問い合わせフォームから全文英語(ほとんどハイパーリンクのみの本文)の投稿が目立つようになってきます。

宣伝目的による自動登録ロボットによる投稿です。

対策として、Drupal CAPTHAモジュールが利用できます。

あまり目立たないうちはスパム対策といえど、善意の訪問者に対してのユーザビリティを下げるので あまり使いたくないですが、増えてくると、善意の投稿まで見落としてしまう事になってしまうので、ころあいをみて CAPTCHAモジュールを活用します。

以下の手順で利用します。

  1. 管理セクション≫サイトの構築≫モジュール:Spam control:CAPTCHAを有効にし、[設定の保存]をクリックします。
  2. 管理セクション≫ユーザの管理≫CAPTCHA で以下の設定を行います。

    最下行の webform_client_form_29 は本サイトのお問い合わせフォームのフォームIDです。
    ID名はお問い合わせフォームの数や設置順で変わってきますので最後の数字の部分は自分のサイト上の数値にあわせます。
    上記入力後[設定の保存]をクリックします。
  3. 管理セクション≫ユーザの管理≫CAPTCHA≫Image CAPTCHAページで、Exampleの様子を見ながら各種 見栄えの設定を行います。
    機能的にはデフォルトの状態で機能しますが、デフォルトのままだと、多少見にくいので調整します。
  4. [設定の保存]をクリックします。

 

以上で設定は完了です。

お問い合わせフォームを表示すると、送信ボタンの上に以下のように表示されるようになります。

上記キーを入力:イメージで示されたキャラクタをスペースを入れずに入力してください。 などのガイダンスは最初は英語のままです。
サイトの構築≫インターフェースの翻訳≫検索ページで該当英文を検索し、対応する日本語を設定することで変更します。

コンテンツにビューを挿入する

コンテンツの表現力やユーザビリティを向上コンテンツの表現力やユーザビリティを向上

ホームページの更新をスムーズに、しかも快適に行うには 入力に気持ちの良い環境が必要です。

ただ単に文字を入力しているだけでは表現力も劣り入力作業が覇気がないものになってしまいます。

insert_viewモジュールを利用することでコンテンツの表現力やユーザビリティを向上させることができます。

insert_viewモジュールの利用方法insert_viewモジュールの利用方法

モジュールを有効にする

  1. 管理セクション≫サイトの構築≫モジュールでinsert_viewを有効にし、[設定の保存」をクリックします。
  2. 管理セクション≫サイトの環境設定≫入力書式ページを表示します。
  3. ビューをインサートしたい書式行の[設定]をクリックし、設定ページを表示します。
  4. insert view filterをチェックし、[設定の保存]をクリックします。
     

コンテンツに挿入する

例えば、ここにトップページのサイドブロックに表示されているフォトギャラリブロックを挿入してみます。

 

 

 

 

  1. 管理セクション≫サイトの構築≫ビュー≫リストを表示します。
  2. [編集]をクリックし、設定ページを表示します。
     
  3. 設定ページでは表示したいブロックをクリックし、選択したブロック上にマウスを置くと、ステータスバーに当該ブロックのIDが表示されます。

    上記、http://~中の、
    ・photo_gellery部分がview-ID。
    ・block_1部分がdisplay-IDです。
  4. コンテンツ中に[view:view-ID=display-ID]の型式で記述します。
    ↓がその結果です。
  5. パラメータやページ等は以下のような記述を行います。
    [view:name of view] is replaced by the content listing.
    [view:name of view=name of display] invokes the view using the specified display (see README.TXT for more info).
    [view:name of view=name of display=arg1,arg2,arg3] invokes the view using the specified display and passes arg1, arg2 and arg3 to the view.
    [view:name of view==arg1]
    詳細→insert_view

テンプレートモンスターテンプレート

プロが作成したテンプレートモンスターのDrupal-CMSテンプレートを購入プロが作成したテンプレートモンスターのDrupal-CMSテンプレートを購入

ホームページテンプレートならテンプレートモンスタージャパン

テンプレートモンスタージャパンは日本有数のテンプレートダウンロード販売サイトです。

テンプレートモンスタージャパンのテンプレートはデザインのプロが作成したテンプレートで、Drupal-CMSテンプレートも購入可能です。

下記より ご購入された場合、ご購入後のテンプレートを弊社が 無料でSEO施工し、Drupal-CMS設置と同時に インストールいたします。

勿論、画像の差し替えも簡単にできますので、お申し込み時に、ご指示ください。

 

ダウンロードと買取について

ダウンロードはテンプレートを占有することにはなりません。

ダウンロード後も公開され、他社も同一テンプレートを購入可能です。

他社に同一テンプレートを使用させたくない場合は買取になります。

買い取った場合でも、それ以前にダウンロードで購入しているユーザがいる場合、その人たちとは同一テンプレートになってしまいます。

テンプレートを独占したい場合は 未ダウンロードテンプレートを買い取りします。

他社と同一テンプレートでも、御社独自の写真で差し替えることや、軽微な変更は無料で行います。その時点でオリジナルになる。という考えなら あまり、買取にこだわることはないと思います。

 

Artisteer2テンプレート

Artisteer2を使ったDrupalテンプレートを作成Artisteer2を使ったDrupalテンプレートを作成

Artisteer

Artisteer2はWordPress、Joomla、Drupal用のテンプレート(テーマ)、htmlテンプレート、ASP.NET、コードチャージスタジオ等のWebデベロッパーテンプレートを作成する事ができます。

Artisteer2を使えば ほとんどの人が(時間があれば、ですが)自分でDrupalテンプレート(テーマ)を作成できます。

自分で更新するホームページの制作・サポート・SEOArtisteer2を以下のいずれかの形で受け入れ可能です。

  1. お客さま自身がArtisteer2を使用して作成したテンプレート(テーマ)を弊社がカスタマイズする方法。
  2. お客さまが Artisteer2の試用版を使って作成したテンプレート(テーマ)を見せて頂き、弊社が それと同様のテンプレート(テーマ)を作成しカスタマイズする方法。
  3. 弊社 標準テンプレートとしてエントリーしているArtisteer2テンプレートの いずれかを選択していただく方法。
  4. 電話またはSkypeで打ち合わせしながら、完成させる方法。
    ※1
  5. 打ち合わせ時(無料出張サポート:東京都北区限定)にArtisteer2を使って作ってしまう方法。
    → お客さまの ご意見を伺いながら弊社担当者が打ち合わせの場でArtisteer2を使って作成してしまいます。

 

全て無料で承ります。

ホームページの更新は CMS で! の ページTOPDrupalサイト構築 の サイトマップDrupalサイト構築 の TOPページ