文系プログラマによるTIPSブログスマートフォン用の表示で見る文系プログラマによるTIPSブログ文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。javaTwitterGooglePocket皆大好き、はてなブックマークウィジェットについてのトピックです。ブログパーツの設定このウィジェットがちょっと問題があるので、色々解決策を考えてみたいと思います。皆さんはhttpsの画面はhttpのリソースを読み込むと警告が表示される仕様はご存知でしょうか。js、css、画像ファイルが主な警告の原因となりがちです。adsenseで表示される画像がhttpであっても警告が表示されてしまいます。IEの場合は画面下部にデカデカと警告バーが表示される程の鬱陶しさです。こんな警告が出てしまってはhttpsの画面ではてなブックマークウィジェットは使えません・・・キャッシュが効かないjs自体のキャッシュは効きます、が、jsで取得するブックマークの内容まではキャッシュできません。内部的にはブックマーク情報をjsonで取得しています。画面を表示する度にjsonを取得、という無駄な処理をしています。物凄い勢いでブックマークされるサイトならともかく、当ブログのようにPV数が少ないサイトでは、キャッシュをして4時間に1回程度の頻度でキャッシュ破棄・更新、をすれば十分です。ウィジェットの処理中はhtmlの描画処理はブロック(停止)されます。自前でウィジェット作っちゃえ!!まずはウィジェットのコードを見てみます。widget.jsを読み込んでますね。"default";Hatena.BookmarkWidget.load();</script>ではwidget.jsの中身を解読してみます。json?これだ!!ここではてなのサーバに対してブックマーク情報をjsonで取得するリクエストを生成しているようです。このコードを元に、jsonを取得するurlを作ってみます。すると以下のようになります。http://b.hatena.ne.jp/entrylist/json?&url=http://treeapps.hatenablog.com/&sort=countこれを実行するとjsonが返ります。自前でウィジェットを作れる!jsonをパースしてEHCache等でキャッシュし、自分でウィジェットのhtmlを書けばよいのです。EHCacheに関しては以前に記事を書いたので、合わせてご覧下さい。xmlをDTOにバインドする簡単ライブラリの記事も書いたので、是非ご覧下さい!後日談:実際やってみた!今回はjavaで実装します。JSONをDTOにマッピングするために、JSONICを使うのでクラスパスに通します。javaguavaも使うので、合わせてクラスパスに通します。}}取得したjsonは実はjsonpなので、jsonに無理やり変換してからDTOにバインドしてます。後はこれを画面に表示するだけです。↓tree-tipsではこんな感じで実装してみました。自由にデザインできるんですが、ユーザの慣れの観点を考慮して敢えて見た目を似せました。bootで静的リソースにキャッシュ回避のための「?xxx=xxx」を自動追加するできるんだな、これが。週間)昔は業務系SIer、今はベンチャー企業でプログラムを書いています。INFILEを実行できるようにするmacのAutomatorでhomebrewのコマンドをFinderのサービスから実行できるようにするReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。単行本(ソフトカバー)この商品を含むブログを見るAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。大型本この商品を含むブログを見るSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。