about

Webに関わる日々の中から、諸々を1コママンガのように切り抜いて行けたらと思い描きました。誰をバカにする意味も含んでいません。風刺こそが打破し難い現状をくすぐる最良の道具だと思っています。よりよいWeb開発のためになれば幸いです。

Blogger + PDCA的開発備忘録

Bloggerは強力だけれど、諸々ジャジャ馬。なのでメモ。

P：企画

1. コンセプト：1コママンガ風、絵日記的なにか
2. 仕様：絵は、720x500と決める(余り積極的な意味はない、テンプレみて回って最大サイズだったから程度)絵はtopで正方形サムネールで表示されるため、720x720にすることに変更。
3. テンプレ選び：ゴテゴテしてよいと思ったので、これ→Diary/Notebook Blogger template - BTemplates

D：実施

1. ドメイン決めて(これが大変、Twitterもアカウント作成(＝Gmailも))、Blog作成：「シンプル」→不要なWidget削除→テンプレ当て。
2. データ投入：基本、タイトルと画像だけくらいにしたい。
3. モバイル版の選択、選択肢が少ないのが辛いけど、今回も「鳥」で。
4. 独自CSS/JS組込み
5. 諸々Widget登録：殆どHTML/JSウィジェット

C：確認 ＋ A：改善

1. 【済】念のためIE8目視確認、難しいことをしなければ良いのではないでしょうかw、一応IE対応と書いてあるし。
2. 【済】パンくず代わりに「ページ」を追加、左上に来るように調整
3. 【済】attributionの位置が気に入らないので変更

   locked='false' に修正、これで動かせる

   <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
   

4. 【済】Twitter/Facebook/RSS/mail部分修正：Twtter/RSSしか使わない
5. 【済】なんとsearchがテンプレ本家を検索するようにハードコードされていた、ので修正
6. 【済】右下のRecent Tweetを自分のを見るように修正
7. 【済】一旦Backup：Blogのエクスポート＋テンプレのバックアップ
8. 【済】topで画面をクリックしたら個別ページに進んで欲しい、readmoreを追加。サムネールで個別ページに飛ぶのもOK。

   </head>の前に下記を追加

   <!-- readmore -->
   <script type='text/javascript'>
   var thumbnail_mode = &quot;no-float&quot; ;
   summary_noimg = 200;
   summary_img = 120;
   img_thumb_height = 200;
   img_thumb_width = 200;
   </script>
   <script type='text/javascript'>
   //<![CDATA[
   function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
   }
    
   function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   }
    
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
    
   //]]>
   </script>
   <!-- end : readmore -->
   

   </data:post.body>を探して下記に置き換える(最初の方)

   <!--
         <data:post.body/>
   -->
   <!--readmore-->
   <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <!-- for debug <data:blog.pageType/> / !=index <br/> -->
    <data:post.body/>
   <b:else/>
     <div expr:id='&quot;summary&quot; + data:post.id'>
      <div class='csnippet'>
       <b:if cond='data:post.thumbnailUrl'>
        <div class='Image'>
         <script type='text/javascript'>
          //<![CDATA[
          function bp_thumbnail_resize(image_url,post_title)
          {
           var image_size=250;
           var show_default_thumbnail=true;
           var default_thumbnail='';
           if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
           image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
           if(image_url!="") return image_tag; else return "";
          }
          //]]>
         </script>
         <a expr:href='data:post.url'>
         <script type='text/javascript'>
          document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
         </script>
         </a>
        </div>
       </b:if>
       <div class='post-body'>
        <b:if cond='data:post.snippet'>
         <data:post.snippet/>
        </b:if>
       </div>
      </div>
      <span class='rmlink' style='float:right;padding-top:5px;'>
       <a expr:href='data:post.url'>read more...</a>
      </span>
     </div>
   </b:if>
   <!-- end : readmore -->
   

9. 【暫定】次ページ/前ページが微妙：要調整
10. 【済】画像OnMouseの青いのが微妙：要調整
11. 【暫定】AD系も、とりあえずAmazonいれたけれど、微妙。というか動きがうざい。多分却下。
12. 【済】ロゴ考えなかきゃ(先にすべき)
13. 【暫定】topでもソーシャルボタンが見えて欲しい。暫定的にNinja追加。
14. 【どーも、本気みたいだからコンテンツも気にせねば】HTML5ロゴが下にあるけれど、本当だろうか。何を確認すれば良い？
15. 【済】Facebook/mailはコメントアウト
16. 【済】Google Translate ON
17. 左上のロゴが何だか崩れる、そのうちPicasaに置くなりして様子見を。
18. 検索と翻訳を考えれば、台詞もテキスト化しておかないと。

その他

mitmix.net