2012年11月28日水曜日

wordpress の header.php(前半)

歳を取ってくると好奇心や探究心を維持するのが難しいです。6、70歳になっても元気に山登り、果てはヒマラヤまで登っちゃう人がいるのだから体力もさることながら、精神の若さが素晴らしいですね。などと関心しつつ読書を始めたいと思います。でも、長いので半分ずつ。。。
<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
  /*
   * Print the <title> tag based on what is being viewed.
   */
  global $page, $paged;
  wp_title('|', true, 'right');
  // Add the blog name.
  bloginfo('name');
  // Add the blog description for the home/front page.
  $site_description = get_bloginfo('description', 'display');
  if ($site_description && (is_home() || is_front_page()))
    echo " | $site_description";
  // Add a page number if necessary:
  if ($paged >= 2 || $page >= 2)
    echo ' | ' . sprintf(__('Page %s', 'twentyeleven'), max($paged, $page));
  ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
  /* We add some JavaScript to pages with the comment form
   * to support sites with threaded comments (when in use).
   */
  if (is_singular() && get_option('thread_comments'))
    wp_enqueue_script('comment-reply');
  /* Always have wp_head() just before the closing </head>
   * tag of your theme, or you will break many plugins, which
   * generally use this hook to add elements to <head> such
   * as styles, scripts, and meta tags.
   */
  wp_head();
?>
</head>
  1. 条件付きコメント(12行目〜23行目)
    単なるコメントと思いきや、wikipediによれば「条件付きコメント(じょうけんつきコメント)とは、Microsoft Internet Explorerによって解釈されるHTMLソースコード中にある条件付きのステートメントである。条件付きコメントは、マイクロソフトのInternet Explorer 5ブラウザーで初めて登場し、バージョン9までサポートされた。なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事が明らかにされた。」だそう。身勝手に規約外の仕様作って身勝手に廃止とは、なんという事だろう。wikipedia の説明に出てくるダウンレベルとは、IE5以下とその他のブラウザを指すそうで、名付けからしてタカビーな感じです。おまけにIE10で自らダウンレベルに陥るとはどうなっているのでしょう。

  2. language_attriutes関数(wp-includes/general-template.php)
    該当部分のソースコードを確認してみると、以下のように dir 属性と lang 属性に変わっている
    
    
    
    
    
    
    
    
    • html タグの属性 id は、ブラウザの種類を特定するためにここで設定しているよう。積極的に利用している部分はスタイルシートの#ie8関連と思われるので、後々の対応しやすさも含めた定石コードなのでしょう。
    • html タグの属性 dirとは、「html要素に dir="" を追加すると、文書全体の書字方向を指定できます。」(参照)
    • html タグの属性 lang とは、「html要素に lang="" を追加すると、文書全体の言語を示すことができます。」(参照)

  3. メタ情報(25行目〜26行目)
    METAタグはヘッド領域に記述されるタグで、文書で使用されている言語や文字コードの指定、キーワードや説明などを埋め込む事ができます。参照)
  4. グローバル変数($page、$paged)
    WordPressのページ関係のグローバル変数。(参照)

  5. wp_title 関数(/wp-includes/general-template.php)
    単体記事、日付ベースのアーカイブ、カテゴリ、著者ページのそれぞれに対応したタイトルを出力する関数。(参照)

  6. bloginfo関数(wp-includes/general-template.php)
    使用中のWordPressブログに関するさまざまな情報を出力。 (参照)

  7. get_bloginfo関数(wp-includes/general-template.php)
    使用中のWordPressブログに関するさまざまな情報を出力。bloginfo が標準出力するのに対し、get_bloginfoは情報を返す関数。bloginfo関数は、"echo get_bloginfo( $show, 'display' );" しているのみ。ここでは、description(「一般設定」管理画面で指定したブログの説明文)を取得している。(参考)

  8. is_home 関数(wp-includes/query.php)
    この条件分岐タグは、サイトのメインページ(ホームページ)が表示されているかどうかを判定します。これは TRUE または FALSE の値を返す boolean 関数です。(参照)

  9. is_front_page 関数(wp-includes/query.php)
    この条件分岐タグは、サイトのフロントページが表示されているかどうかを判定します。これは TRUE または FALSE の値を返す boolean 関数です。TRUE を返すのは、管理画面の 設定 > 表示設定 > フロントページの表示 にて、「最新の投稿」を選択していて現在最新の投稿ページが表示されている場合と、「固定ページ」を選択していて現在「フロントページ」に指定したページが表示されている場合です。(参照)

  10. link rel(profile,stylesheet,pingback)
    「head 内で使う meta、link のまとめ」から仕入れた情報ですが、pingback は仕組みが良くわからないです。profile はその必要性も良くわからないです。今後の課題です。
    • rel="profile" は Google のSocial Graph から派生したフォーマット(XFN)ようだが、本家の Social Graph のサービスは停止しているため、取り扱い状況が曖昧の状態の様子。
    • rel="stylesheet" は、リンク先のスタイルシートの適用。
    • rel="pingback" は、web バブリッシングソフトウェアがユーザに代わって、リンク先のサイトにリンクを張ったことを通知し、リンク先にリンク元のドキュメントへの逆リンクの自動生成を可能にするもの。(参照)

  11. is_singular 関数(wp-includes/query.php)
    シングルページ (固定ページ、個別投稿ページ、添付ファイルページ) の判定で、is_single()、is_page() 、is_attachment() のいずれかが真である場合

  12. get_option 関数(wp-includes/option.php)
    optionsデータベーステーブルから、指定したオプションの値を取得する安全な方法です。希望するオプションが存在しない場合は、値が関連付けされず、FALSE が返されます。 (参照)

  13. wp_enqueue_script 関数(wp-includes/script-loader.php)
    コメントリプライ用のジャバスクリプト(comment_reply.js)の参照タグの出力キューに登録。キューはユニークに維持されるため、重複ロードが避けられるようになっている。参照タグの出力 wp_head 関数で行われている。(参照)

  14. wp_head 関数(wp-includes/general-template.php)
    内部は、do_action('wp_head');を実施しているのみ。ラベル毎にサービス関数が仕掛けられたテーブルから"wp_head"に一致するサービス関数を実行することにより、ヘッダ内に必要な link や script を出力する。
    デフォルトで登録されているサービス関数は以下と思う。
    default-filters.php:add_action( 'wp_head',             'wp_enqueue_scripts',              1     );
    default-filters.php:add_action( 'wp_head',             'feed_links',                      2     );
    default-filters.php:add_action( 'wp_head',             'feed_links_extra',                3     );
    default-filters.php:add_action( 'wp_head',             'rsd_link'                               );
    default-filters.php:add_action( 'wp_head',             'wlwmanifest_link'                       );
    default-filters.php:add_action( 'wp_head',             'adjacent_posts_rel_link_wp_head', 10, 0 );
    default-filters.php:add_action( 'wp_head',             'locale_stylesheet'                      );
    default-filters.php:add_action( 'wp_head',             'noindex',                          1    );
    default-filters.php:add_action( 'wp_head',             'wp_print_styles',                  8    );
    default-filters.php:add_action( 'wp_head',             'wp_print_head_scripts',            9    );
    default-filters.php:add_action( 'wp_head',             'wp_generator'                           );
    default-filters.php:add_action( 'wp_head',             'rel_canonical'                          );
    default-filters.php:add_action( 'wp_head',             'wp_shortlink_wp_head',            10, 0 );
    default-filters.php:    add_action( 'wp_head', 'wp_no_robots' );
    
    

2012年11月20日火曜日

PaaS(openshift)を試してみる

日経 Linux 12月号に「PaaSはここまで使える」の連載記事が、無料で利用できる openshift の紹介だったので早速利用してみた。ひょっとしたら地球の裏側にひっそりとあるかもしれない仮想マシンに wordpress 環境を構築し、ssh でログインできたりするのは、ちょっと感動的です。ってインターネットの時代、隣の席のマシンにアクセスするのも、遠く離れたマシンにアクセスするのもさして違いはないのだろうけれど。それにしても、無料っていうのはすごいです。
  1. Openshift のクライアント環境作成(ubuntu12.10)
    日経 Linux には、「クライアントOSは、Fedora、Redhat」が良いと記載があったが、OpenShiftのページには、windowsやmac へのクライアントツールも紹介されている。もちろん、ubuntu の記載もあった。

    まず、Openshift のクライアントツールの利用には、ruby と git のインストールする。
    $ sudo apt-get install ruby-full rubygems git-core
    
    openshift クライアントは、ruby でできているらしいので、ruby のパッケージ管理ツール gem でクライントツールをインストールする。
    $ sudo gem install rhc
    

  2. Openshfit の仮想マシン環境のセットアップ
    ◇まずは、OpenShift のアカウント作成

    ◇アプリケーションの選択1(PHP)

    ◇アプリケーションの選択2(MySql)


  3. Openshfit クライアントの設定
    サーバーにアプリケーション環境の PHPとMySqlの導入が完了したら、クライアントでOpenshiftクライアントの初期設定を行う。自動的にSSHのキーを作ってローカルとサーバーに配置してくれる。また、git の初期設定を実施する。
    $ rhc
    $ cd ~/work
    $ git config --global user.email "userid@xxxxx.or.jp"
    $ git config --global user.name "userid"
    

    関連として以下の記事をざっと参照しておくと理解しやすいかも。
    ◇git の説明
    ◇shh の説明

  4. Server に wordpress をインストール
    ◇git clone で OpenShift アプリケーション環境のダウンロード
    $ git clone ssh://5e2448xxxxxxx@wp-naoki.rhcloud.com/~/git/wp.git/
    

    ◇github から wordpress のサンプルをダウンロード
    $ git remote add upstream -m master git://github.com/openshift/wordpress-example.git
    $ git pull -s recursive -X theirs upstream master
    

    ◇git push で wordpress をアップロード
    $ git push 
    

    ◇ブラウザで動作確認

2012年11月19日月曜日

ためしに「買い物カゴ」プラグイン

wordpress への買い物カゴ設置というのは plugin だけで簡単に設置できるという噂。特にすぐに必要というわけでものないけれど、wordpress の twentyeleven のソースコード読みはちょっと中断して、買い物カゴ設置がどのようなものなのか先に見てみよう。



  1. 買い物カゴの plugin ってどんなのがあるのだろう。
    まずは、「wordpress、買い物カゴ」で検索してみると、このサイトにであった。宣伝ぽい気もするけどとりあえず導入してみることにした。


    そして、plugin を解凍してディレクトリに配置
    $ ~/ダウンロード$ unzip  WP-OliveCartBasic-1.0.9.zip
    $ ~/ダウンロード$ cd /var/www/wordpress/wp-content/plugins
    $ sudo -s
    # cp -rp ~/ダウンロード/WP-OliveCartBasic-1.0.9/plugins/wp-olivecart .
    # chown -R www-data:www-data wp-olivecart
    

  2. wordpress へ plugin 導入
    管理画面のplugin画面に olivecart が増えているので有効化すると、olivecart の管理メニューが増えた。


  3. 記事を投稿
    • 投稿画面のツールメニューに「カート」が増えている。


    • 「カート」ツールを押すと、商品別に「在庫管理」、「挿入ボタン」がある。


    • とりあえず、投稿記事に「在庫管理」と「挿入ボタン」をつけて更新



  4. 投稿の確認
    カートボタンが追加されてる。けど、在庫状況が表示されていない。なおかつ、決済してもメールが飛んでこない。



  5. 在庫非表示の対処
    • 在庫表示部分のHTMLコードを見てみると
      <div class="entry-content">
      <p>あいうえお<br />
      <img src="http://naomusi.mydns.jp/wordpress/wp-content/plugins/wp-olivecart/stock.php?number=2-M-white" /><br />
      <input name="button" type="submit" value="カートに入れる" onclick="postIn('2-M-white')" /></p>
      </div><!-- .entry-content -->
      

    • stock.php を直接叩いてみると
      $ php -q stock.php
      PHP Fatal error:  Call to undefined function imagecreatefromgif() in /var/www/wordpress/wp-content/plugins/wp-olivecart/stock.php on line 31
      

    • imagecreatefromgif 関数を検索
      ここに出ている通り、gd ライブラリがPHPに導入されていないらしい。ubuntu には、これに従って導入してみる。
      $ sudo apt-get install php5-gd
      $ sudo /etc/init.d/apache2 restart
      

  6. とりあえず sendmail をインストールしてみる。
    $ sudo apt-get install sendmail
    
    以上であっけなく、メールが届いた。sendmail はセキュリティや設定などがよくわからないがとりあえず良しとしよう。

2012年11月18日日曜日

wordpres の index.html

wordpress のオリジナルテーマ作成の下調べとして index.html の中身を見てみよう。



<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 */
get_header(); ?>
    <div id="primary">
      <div id="content" role="main">
      <?php if (have_posts()) : ?>
        <?php twentyeleven_content_nav('nav-above'); ?>
        <?php /* Start the Loop */ ?>
        <?php while(have_posts()) : the_post(); ?>
          <?php get_template_part('content',get_post_format()); ?>
        <?php endwhile; ?>
        <?php twentyeleven_content_nav('nav-below'); ?>
      <?php else : ?>
        <article id="post-0" class="post no-results not-found">
          <header class="entry-header">
            <h1 class="entry-title"><?php _e('Nothing Found','twentyeleven'); ?></h1>
          </header><!-- .entry-header -->
          <div class="entry-content">
            <p><?php _e('Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.','twentyeleven'); ?></p>
            <?php get_search_form(); ?>
          </div><!-- .entry-content -->
        </article><!-- #post-0 -->
      <?php endif; ?>
      </div><!-- #content -->
    </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
  • get_header() ってなんだ?
    「このタグは、現在のテーマディレクトリから header.php ファイルを読み込みます。このファイルがないときは、wp-content/themes/default/header.php を読み込みます。」だそうです。 (wordpress codex 日本語版より)  内容についてはソースが長そうなので次に回そう。初期画面のカバー写真より上を作っているのだろう。。

  • have_posts() ってなんだ?
    「(ループ内か、ループの前でのみ使用可能) 表示する投稿が残っているかを示す。」だそうです。

  • if(): endif/while(): 〜 endwhile ってなんだ?
    PHPはPerlと同じで "if() {}"、"while() {}" のように記載するものとばかり思っていたので、最初 endif や endwhile を見た時は、wordpress の拡張機能かと思った。でも PHP は別構文が用意されているんですね。知らなかった。

  • twentyeleven_content_nav() ってなんだ?
    function twentyeleven_content_nav( $nav_id ) {
      global $wp_query;
      if ( $wp_query->max_num_pages > 1 ) : ?>
        <nav id="<?php echo $nav_id; ?>">
          <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
          <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div>
          <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>
        </nav><!-- #nav-above -->
      <?php endif;
    }
    
    投稿記事が複数ページに渡る場合に、前ページ、次ページの案内を出す部分みたいだな。。
  • get_template_part() ってなんだ?
  • 「(ヘッダー、サイドバー、フッター以外の)テンプレートパーツをテンプレートに読み込みます。子テーマ で多重定義して簡単にセクションを再利用できます。テーマのその名前のテンプレートパーツをインクルードします。name を指定した場合は、特定の部分をインクルードします。{slug}.php ファイルが無い場合は、インクルードしません。 パラメータに関しては、"{slug}-{name}.php" を呼び出します。 」(参照) か。

  • _e() ってなんだ?
    メッセージの国際化対応関数なんですね。(参照)

  • <article> はなんだ?
    「<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。」(参照) か。コメントとか引用とかにつかうのかな。ここも参照かな。

  • get_search_from() ってなんだ?
    「テーマの searchform.php を使用して検索フォームを表示します。テーマに searchform.php が無い場合は、WordPress はビルトインの検索フォームを表示します。」 (wordpress codex 日本語版より)  か。。
    <?php
    /**
     * The template for displaying search forms in Twenty Eleven
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    ?>
      <form method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>">
        <label for="s" class="assistive-text"><?php _e('Search', 'twentyeleven'); ?></label>
        <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e('Search', 'twentyeleven'); ?>" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e('Search', 'twentyeleven'); ?>" />
      </form>
    

  • get_sidebar() ってなんだ?
    「このタグは、現在のテーマディレクトリから sidebar.php ファイルを読み込みます。このファイルが無いときは、wp-content/themes/default/sidebar.php を読み込みます。」 (wordpress codex 日本語版より)  か。。
    <?php
    /**
     * The Sidebar containing the main widget area.
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    
    $options = twentyeleven_get_theme_options();
    $current_layout = $options['theme_layout'];
    
    if ('content' != $current_layout) :
    ?>
        <div id="secondary" class="widget-area" role="complementary">
          <?php if (! dynamic_sidebar('sidebar-1')) : ?>
    
            <aside id="archives" class="widget">
              <h3 class="widget-title"><?php _e('Archives', 'twentyeleven'); ?></h3>
              <ul>
                <?php wp_get_archives(array('type' => 'monthly')); ?>
              </ul>
            </aside>
    
            <aside id="meta" class="widget">
              <h3 class="widget-title"><?php _e('Meta', 'twentyeleven'); ?></h3>
              <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
                <?php wp_meta(); ?>
              </ul>
            </aside>
    
          <?php endif; // end sidebar widget area ?>
        </div><!-- #secondary .widget-area -->
    <?php endif; ?>
    

  • get_footer ってなんだ?
    「このタグは、現在のテーマディレクトリから footer.php ファイルを読み込みます。このファイルが無いときは、 wp-content/themes/default/footer.php を読み込みます。 」 (wordpress codex 日本語版より)  か。。
    <?php
    /**
     * The template for displaying the footer.
     *
     * Contains the closing of the id=main div and all content after
     *
     * @package WordPress
     * @subpackage Twenty_Eleven
     * @since Twenty Eleven 1.0
     */
    ?>
      </div><!-- #main -->
      <footer id="colophon" role="contentinfo">
          <?php
            /* A sidebar in the footer? Yep. You can can customize
             * your footer with three columns of widgets.
             */
            if (! is_404())
              get_sidebar('footer');
          ?>
          <div id="site-generator">
            <?php do_action('twentyeleven_credits'); ?>
            <a href="<?php echo esc_url(__('http://wordpress.org/', 'twentyeleven')); ?>" title="<?php esc_attr_e('Semantic Personal Publishing Platform', 'twentyeleven'); ?>" rel="generator"><?php printf(__('Proudly powered by %s', 'twentyeleven'), 'WordPress'); ?></a>
          </div>
      </footer><!-- #colophon -->
    </div><!-- #page -->
    <?php wp_footer(); ?>
    </body>
    </html>
    

2012年11月15日木曜日

ブロックのポジション

今日はブロックのポジション指定とブロックを使ったメニューを確認。blogger で文章中に使うことはないだろうけれど、自作ホームページ作成などには必要になるかもしれないし。。



  • ベースブロックの指定位置に表示
    段落 <p> とかは、デフォルトスタイル指定で上下左右にマージンが取られているのか。。
    
    

    りんご

    みかん
    ぶどう

    りんご

    みかん
    ぶどう

  • ブロックを並べてメニューの元を作成 ブロックの上にカーソルが来た時にバックグラウンドカラーを変更するには、hover 属性で変更か。。
    
    
      

  • サブメニューの非表示化
    
    
      

  • javascript でサブメニューの表示オン・オフ
    表示のオン・オフは動作するけれど、非表示エリアにマウスカーソルが乗っても反応してしまう。
    
    
    
      

  • カーソル反応位置の調整
    非表示エリアにマウスカーソルが乗っても反応しないように、postion : absolute を追加。しかし、アンカー<a>のサイズが文字サイズに。。
    
    
    
      

  • アンカーサイズの調整
    
    
    
      

2012年11月14日水曜日

ブロックのレイアウト

blogger に彩りを添えるべく、今日はブロックレイアウトの確認をしよう。



  • 二個のブロックならべ
    
    

  • 三個のブロックならべ
    
    
    中央
    中央

  • 左サイドバー風
    
      

  • 右サイドバー風
    
    

  • 両サイドバー風
    
    
    中央
    中央

  • 両サイドバー風+フッター
    
    
    中央
    中央

2012年11月13日火曜日

ブロックの確認と修飾

プログラムコード表示でHTMLデビューしたので、今日はブロックの修飾機能の確認です。今後に生きるかはわかりませんが。。



  • まずは段落の範囲から
    
    

    今日も眠い

    今日も眠い

  • ボックスの幅指定
    
    

    今日も眠い

    今日も眠い

  • ボックスの背景指定
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの背景表示エリア
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(破線)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(角丸)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(シャドウ)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • ボックスの罫線(シャドウ+ぼかし)
    
    

    今日も眠い
    明日も眠いだろうなぁ

    今日も眠い
    明日も眠いだろうなぁ

  • 画像に合わせたボックス表示
    
    

    紅葉

    紅葉

  • ボックスに合わせた画像表示
    
    

    紅葉

    紅葉

2012年11月12日月曜日

ブログへのプログラムコード表示

ブログの作成ページでも基本的なページは作れるけれど、プログラムコードの表示エリアを罫線で囲みたいとか、ここの文章の文字の色は変えたいとかは「作成」タグではできないみたい。他の人のページを見ると罫線で囲ったり、色変えたり、画像を並べたり綺麗に配置されてる。blog を書く人にとっては、HTML や CSS はごく当たり前に使うものなのですね。ここは私も「HTML」編集画面デビューしよう。まずは、プログラムコードの囲み枠から!



  1. プログラムコード用の罫線囲み 一番に使いたいのがプログラムコード表示エリアを罫線で囲むこと。pre タグの CSS 定義が Blogger で有効かたしかめてみる。
    こんなコードを書いてみると。。。
    <style type="text/css">
    pre  {
     border: solid 0.1px white;
     padding: 5px 0 5px 10px;
    }
    </style>
    <pre>
    $ ls -l
    </pre>
    
    こんな結果なりました。
    $ ls -l
    
    常に失敗はつきもので、html タグを pre の中に記述する時に"<",">" は "&lt","&gt" に置き換えないとうまく表示されないのですね。というわけで本当はこのように記載しています。
    &ltstyle type="text/css"&gt
    pre  {
     border: solid 0.1px white;
     padding: 5px 0 5px 10px;
    }
    &ltstyle&gt
    &ltpre&gt
    $ ls -l
    &ltpre&gt
    
  2.  
  3. Open Source Java script(SyntaxHighlighter)
    プログラムコードの囲み表示について検索していたら、便利そうな javascript に出会った。これを導入しておけば、先ほどコードも以下のように綺麗に整形されてラクラクです。
    <style type="text/css">
    pre  {
     border: solid 0.1px white;
     padding: 5px 0 5px 10px;
    }
    </style>
    <pre>
    $ ls -l
    </pre>
    

    導入方法は沢山の人が紹介しているけれど一応記載しておこう(ここ)
    •  テンプレートの「HTMLの編集」を選択

    •  テンプレート編集>HTMLの編集を続行

    •  </header> 前にコードペーストし保存

    • 実際に貼り付けるのは必要なコードのモジュールだけ
      <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
      <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
      
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
      
      
      <!-- 
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
      <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
      -->
      
      <script language='javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
      SyntaxHighlighter.all();
      </script>
      
      

2012年11月11日日曜日

リモートデスクトップ

家のテレビ録画機はWindows7! 自動録画予約で網にかかった番組をTMGEncで圧縮して暇な時に ubuntu上で見るわけですが、テレビの前に正座して操作すると目も足もつかれます。そんな訳で「これはリモートデスクトップの出番だよな」と思いながら設定してみました。

ubuntu12.10 でリモートデスクトップと検索すると remmina というプログラムが出てきます。windows7 のリモート操作を許可にして(もともと許可状態でしたが。。)、プロトコルにRDPを選んで試してみましたが繋がりません。

いろいろ調べてみると、Windows7 のHomeエディションは、リモートデスクトップ機能が搭載されていないらしい。(それなら、リモート操作許可のパネルは無効にしておいてほしいですね)

仕方がないので、VNC を Windows7 にインストールして再度トライすると繋がりました。少しガクガクした感じですが、番組予約や圧縮作業などには問題なく使えそうです。おまけに、スリープ状態のWindows7に remmina から接続しに行くと、自動的に目覚めてくれるのでわざわざ歩いて起こしにいく必要もなくなりました。



※後日、こちらの解決策にいたりました。