2013年12月3日火曜日

TiddlyWikiをレスポンシブデザインぽくする

いろんなメモを手軽に書きとめておくのに、とても便利なツールが TiddlyWiki です。 使い始めて 2 年ほどですが、今では便利で手放せないツールになっています。

( 追記:Dec 22, 2014
   現在は最新版の TiddlyWiki5 と区別するため、 TiddlyWiki Classic と呼ばれています。
  http://classic.tiddlywiki.com/ )

半年前にノート PC を新調(Windows XP のサポート終了が近づき止むを得ず。)して、画面サイズがスクエア液晶からワイド液晶に変わったことで TiddlyWiki の使い勝手に影響が出てきました。 その理由は画面幅が広がったのをいいことに、ウインドウを左右に並べて使うことが増えたからです。

(余談ですが、そんなに広い画面ではありません。 14 インチ 1024 x 768 から 14 インチ 1366 x 768 に変わっただけなので、物理サイズでは縦寸法が狭くなり横に広がった感じです。使い始めの時は少し後悔しましたが最近はだいぶ慣れました。 Retina ディスプレイの 15 インチ MacBook Pro がほしいです。)

TiddlyWiki の画面レイアウトは標準で 3 カラム構成です。画面左から 「メインメニュー」、「tiddlerコンテンツ」、「サイドバー」 とレイアウトされています。画面幅いっぱいにウインドウを広げて使うときは問題ないのですが、ウインドウ幅を狭めて使うときには左右のカラムがとても邪魔になります。 というのも、画面幅に応じて変化するのは中央の「tiddlerコンテンツ」の領域なので、幅が狭くなると使いづらくなってしまうのです。 

幅 600 px だとこんなかんじです。 ウインドウ幅の半分以上がメニューとサイドバーに占領されてしまいます。

そこで、ウインドウサイズに合わせてカラム数を可変するようにしてみました。  方法は、カスタムスタイルシートに css を追加、メディアクエリーでウインドウ幅に応じたメニューの位置やカラム数を変更しています。 ブラウザは Firefox を使用しています、IE8 だとうまく動かないかもしれません。

手順

  1. サイドバーの隠し tiddler タブMore-Shadowedから「StyleSheet」を開きます。

  2. 開いた「StyleSheet」に以下の内容を追加します。

  3. /*{{{*/
    #sidebar {
        right: 10px;
    }
    @media screen and (max-width: 1000px) {
      .headerForeground {
        padding: 1em 0px 1em 1em;
      }
      .headerShadow {
        padding: 1em 0px 1em 1em;
      }
      #mainMenu {
        float: right;
        width: 20%;
        text-align: left;
        position: relative;
        line-height: 1.4em;
        padding: 1em 0.5em 1em 0.5em;
        font-size: 1em;
        margin-right: 5px;
        margin-top: 10px; 
      }
      #sidebar {
        float: right;    
        right: 10px;
        width: 20%;
        margin-top: 130px;
        line-height: 1.4em;
        padding: 1em 0.5em 1em 0.5em;
        font-size: 0.9em;
      }
      #displayArea {
        margin: 1em 1em 1em 1em;
        float: left;
        position: absolute;
        width: 75%;
      }
      img{
        max-width: 100%;
        height: auto;
      }
    }
    @media screen and (max-width: 760px) {
      .header {
        height: 50px;
      }
      .siteTitle {
        font-size: 2em;
      }
      .siteSubtitle {
        display: none;
      }
      #backstageButton {
        top: 22px;
      }
      #mainMenu {
        float: left;
        width: 45%;
        text-align: left;
        margin-left: 10px;   
      }
      #sidebar {
        display: none;
      }
      #displayArea {
          margin-top: 0px;
          float: left;
          position: relative;
          width: 97%;
      }
    }
    /*}}}*/
    

これで、ウインドウサイズに合わせてカラム数を可変できるようになりました。 ただし、このままでは「サイドバー」にアクセスしづらいのでメニュー表示用の tiddler を作成しておきます。


メニュー表示用 tiddler を作成

  • 新規 tiddler を作成します。
  • 作成する tiddler のタイトル

    menu
    

    コンテンツに以下を追加します。

    <<search>>
    
    <<closeAll>> <<permaview>> <<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "Change TiddlyWiki advanced options">>
    
    <<slider chkSideBarTabsPanel SideBarTabs "SideBarTabs »" "View SideBarTabs">>
    

上記 menu をメインメニューに追加します。

  1. サイドバーの隠し tiddler タブMore-Shadowedから、「MainMenu」を開きます。

  2. メインメニューに 「menu」 へのリンクを追加します。

  3. [[menu]]
    

これで、画面左上のメインメニューのリンク「menu」から「サイドバー」にアクセスできるようになります。


画面レイアウト

ウインドウサイズを変えると、こんなかんじになります。


3 カラムレイアウト


2 カラムレイアウト


1 カラムレイアウト

追記:May 29, 2014
実際の動作がわかるように tiddlyspot に登録しました。 babooshka.tiddlyspot.com で確認できます。

追記:Jul 07, 2016
その後の改良版はこちら icm7216.github.io/MyTiddlyWiki/ に置いています。




改良その1:使いやすいタブメニューにする

上記のメニュー tiddler は、メニューコンテンツをひとつの tiddler に纏めただけなので見た目があまりよくありません。 そこで「tabsマクロ」を使って、タブメニューにしてみました。

TiddlyWiki の組み込みマクロ「tabsマクロ」は、タブを使って tiddler を表示するときに便利な機能です。 このマクロはとても便利なのですが、切り替えるタブごとに表示する tiddler を作る必要があります、そんなわけでチョト面倒です。 そんなときは「PartTiddlerPlugin」を併用すると、ひとつの tiddler だけでタブを実現できます。

上画像のタブメニューはこのような記述になっています。 前半部分は表示するタブのための記述、後半部分はタブを選択したときに表示する内容の記述です。 先ほど作った「menu」tiddler を書き換えて使います。

<<tabs txtMenuTab
  "file" "newTiddler  saveChanges" ./menu1
  "search" "search" ./menu2
  "SideBarTabs" "View SideBarTabs" SideBarTabs
  "about" "about" ./menu3
>>
<part menu1 hidden>
!File Menu
@@color:#000;background-color:#FFF;
<<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<closeAll>> <<permaview>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "TiddlyWiki options">>
@@
</part>
<part menu2 hidden>
!Search Menu
<<search>>
</part>
<part menu3 hidden>
!about
[[TiddlyWiki|http://www.tiddlywiki.com/]] version <<version>>
</part>

同じタブメニューを「PartTiddlerPlugin」を使わずに、個別に tiddler を作るとこのようになります。

  • タブメニューmenuのtiddler
  • <<tabs txtMenuTab
      "file" "newTiddler  saveChanges" menu1
      "search" "search" menu2
      "SideBarTabs" "View SideBarTabs" SideBarTabs
      "about" "about" menu3
    >>
    
  • menu1の表示用tiddler
  • !File Menu
    @@color:#000;background-color:#FFF;
    <<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<closeAll>> <<permaview>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "TiddlyWiki options">>
    @@
    
  • menu2の表示用tiddler
  • !Search Menu
    <<search>>
    
  • menu3の表示用tiddler
    !about
    [[TiddlyWiki|http://www.tiddlywiki.com/]] version <<version>>
    

タブが増えれば、同様に表示用の tiddler も増えることになるので、この「PartTiddlerPlugin」の便利さがよくわかりますね。

「PartTiddlerPlugin」はこのリンクからインポートできます。
abegoExtensions - UdoBorkowski's Extensions for TiddlyWiki


改良その2:タブメニューに、よく使うタグを登録する

TiddleWiki のタグ機能は tiddler の分類にとても便利です。 よく使うタグをこのメニューに登録しておけば、tiddler へのアクセスが便利になります。

たとえば、タグ名「memo」を登録する場合ならこのように記述します。 タグ名の一覧表示には「listマクロ」を使っています。

<<tabs txtMenuTab
  "file" "newTiddler  saveChanges" ./menu1
  "search" "search" ./menu2
  "SideBarTabs" "View SideBarTabs" SideBarTabs
  "about" "about" ./menu3
  "memo" "memo" ./menu4
>>
<part menu1 hidden>
!File Menu
@@color:#000;background-color:#FFF;
<<newTiddler>> <<newJournal "DD MMM YYYY" "journal">> <<saveChanges>> <<closeAll>> <<permaview>> <<slider chkSliderOptionsPanel OptionsPanel "options »" "TiddlyWiki options">>
@@
</part>
<part menu2 hidden>
!Search Menu
<<search>>
</part>
<part menu3 hidden>
!about
[[TiddlyWiki|http://www.tiddlywiki.com/]] version <<version>>
</part>
<part menu4 hidden>
!memo
<<list filter "[tag[memo]] [sort[-modified]]">>
</part>

タブメニューが、こんなかんじになります。 これでウインドウ幅が狭いときの使いにくさが改善できました。

0 件のコメント :