はてなアイコンの裏側の紹介 CloudflareとHonoX

<!DOCTYPE html><html lang="ja" data-admin-domain="//blog.hatena.ne.jp" data-admin-origin="https://blog.hatena.ne.jp" data-author="hatenatech" data-avail-langs="ja en" data-blog="developer.hatenastaff.com" data-blog-host="developer.hatenastaff.com" data-blog-is-public="1" data-blog-name="Hatena Developer Blog" data-blog-owner="hatenatech" data-blog-show-ads="" data-blog-show-sleeping-ads="" data-blog-uri="https://developer.hatenastaff.com/" data-blog-uuid="12704346814673975483" data-blogs-uri-base="https://developer.hatenastaff.com" data-brand="regular_plan" data-data-layer="{"hatenablog":{"admin":{},"analytics":{"brand_property_id":"UA-69076420-1","measurement_id":"G-3BWZEZJFYG","non_sampling_property_id":"","property_id":"UA-29716941-27","separated_property_id":"UA-29716941-19"},"blog":{"blog_id":"12704346814673975483","content_seems_japanese":"true","disable_ads":"brand","enable_ads":"false","enable_keyword_link":"false","entry_show_footer_related_entries":"false","force_pc_view":"true","is_public":"true","is_responsive_view":"true","is_sleeping":"false","lang":"ja","name":"Hatena Developer Blog","owner_name":"hatenatech","uri":"https://developer.hatenastaff.com/"},"brand":"regular_plan","page_id":"entry","permalink_entry":{"author_name":"kouki_dan","categories":"","character_count":4066,"date":"2025-02-07","entry_id":"6802418398325577934","first_category":"","hour":"18","title":"\u306f\u3066\u306a\u30a2\u30a4\u30b3\u30f3\u306e\u88cf\u5074\u306e\u7d39\u4ecb Cloudflare\u3068HonoX","uri":"https://developer.hatenastaff.com/entry/2025/02/07/180711"},"pro":"pro","router_type":"blogs"}}" data-device="pc" data-dont-recommend-pro="false" data-global-domain="https://hatena.blog" data-globalheader-color="b" data-globalheader-type="pc" data-has-touch-view="1" data-help-url="https://help.hatenablog.com" data-hide-header="1" data-no-suggest-touch-view="1" data-page="entry" data-parts-domain="https://hatenablog-parts.com" data-plus-available="1" data-pro="true" data-router-type="blogs" data-sentry-dsn="https://03a33e4781a24cf2885099fed222b56d@sentry.io/1195218" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-static-domain="https://cdn.blog.st-hatena.com" data-version="3302d0c519de548bcb3552ea0bf509" data-initial-state="{}"><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="max-image-preview:large"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10; IE=11"> <title>はてなアイコンの裏側の紹介 CloudflareとHonoX - Hatena Developer Blog</title> <link rel="canonical" href="https://developer.hatenastaff.com/entry/2025/02/07/180711"> <meta itemprop="name" content="はてなアイコンの裏側の紹介 CloudflareとHonoX - Hatena Developer Blog"> <meta itemprop="image" content="https://ogimage.blog.st-hatena.com/12704346814673975483/6802418398325577934/1738919237"> <meta property="og:title" content="はてなアイコンの裏側の紹介 CloudflareとHonoX - Hatena Developer Blog"> <meta property="og:type" content="article"> <meta property="og:url" content="https://developer.hatenastaff.com/entry/2025/02/07/180711"> <meta property="og:image" content="https://ogimage.blog.st-hatena.com/12704346814673975483/6802418398325577934/1738919237"> <meta property="og:image:alt" content="はてなアイコンの裏側の紹介 CloudflareとHonoX - Hatena Developer Blog"> <meta property="og:description" content="先日、はてラボで「はてなアイコン」をリリースしました。普段はスマートフォンアプリを書いていることが多い id:kouki_dan です。 labo.hatenastaff.com サービスの紹介はリリース時のエントリを参照してください。このエントリでは技術的な裏側の紹介をしていきます！ Cloudflareスタックを試したかった 2年くらい前に、Cloudflare D1などが発表されて盛り上がっていた頃、Cloudflareを使ってなんか作りたいな〜と思っていました。はてなの社内には自由研究用のリソースとして、AWS, Google Cloudをはじめ、様々なクラウドサービスを特段の申請不要…"> <meta property="og:site_name" content="Hatena Developer Blog"> <meta property="article:published_time" content="2025-02-07T09:07:11Z"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://ogimage.blog.st-hatena.com/12704346814673975483/6802418398325577934/1738919237"> <meta name="twitter:title" content="はてなアイコンの裏側の紹介 CloudflareとHonoX - Hatena Developer Blog"> <meta name="twitter:description" content="先日、はてラボで「はてなアイコン」をリリースしました。普段はスマートフォンアプリを書いていることが多い id:kouki_dan です。 labo.hatenastaff.com サービスの紹介はリリース時のエントリを参照してください。このエントリでは技術的な裏側の紹介をしていきます！ Cloudflareスタックを試…"> <meta name="twitter:app:name:iphone" content="はてなブログアプリ"> <meta name="twitter:app:id:iphone" content="583299321"> <meta name="twitter:app:url:iphone" content="hatenablog:///open?uri=https%3A%2F%2Fdeveloper.hatenastaff.com%2Fentry%2F2025%2F02%2F07%2F180711"> <meta name="twitter:site" content="@hatenatech"> <meta name="description" content="先日、はてラボで「はてなアイコン」をリリースしました。普段はスマートフォンアプリを書いていることが多い id:kouki_dan です。 labo.hatenastaff.com サービスの紹介はリリース時のエントリを参照してください。このエントリでは技術的な裏側の紹介をしていきます！ Cloudflareスタックを試したかった 2年くらい前に、Cloudflare D1などが発表されて盛り上がっていた頃、Cloudflareを使ってなんか作りたいな〜と思っていました。はてなの社内には自由研究用のリソースとして、AWS, Google Cloudをはじめ、様々なクラウドサービスを特段の申請不要…"> <script id="embed-gtm-data-layer-loader" data-data-layer-page-specific="{"hatenablog":{"blogs_permalink":{"blog_afc_issued":"false","is_author_pro":"true","entry_afc_issued":"false","has_related_entries_with_elasticsearch":"false","is_blog_sleeping":"false"}}}"> (function() { function loadDataLayer(elem, attrName) { if (!elem) { return {}; } var json = elem.getAttribute(attrName); if (!json) { return {}; } return JSON.parse(json); } var globalVariables = loadDataLayer( document.documentElement, 'data-data-layer' ); var pageSpecificVariables = loadDataLayer( document.getElementById('embed-gtm-data-layer-loader'), 'data-data-layer-page-specific' ); var variables = [globalVariables, pageSpecificVariables]; if (!window.dataLayer) { window.dataLayer = []; } for (var i = 0; i < variables.length; i++) { window.dataLayer.push(variables[i]); } })(); </script>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-P4CXTW');</script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-T5VB5VT');</script>  <link rel="shortcut icon" href="https://developer.hatenastaff.com/icon/favicon"> <link rel="apple-touch-icon" href="https://developer.hatenastaff.com/icon/touch"> <link rel="icon" sizes="192x192" href="https://developer.hatenastaff.com/icon/link"> <link rel="alternate" type="application/atom+xml" title="Atom" href="https://developer.hatenastaff.com/feed"> <link rel="alternate" type="application/rss+xml" title="RSS2.0" href="https://developer.hatenastaff.com/rss"> <link rel="alternate" type="application/json+oembed" href="https://hatena.blog/oembed?url=https%3A%2F%2Fdeveloper.hatenastaff.com%2Fentry%2F2025%2F02%2F07%2F180711&format=json" title="oEmbed Profile of はてなアイコンの裏側の紹介 CloudflareとHonoX"> <link rel="alternate" type="text/xml+oembed" href="https://hatena.blog/oembed?url=https%3A%2F%2Fdeveloper.hatenastaff.com%2Fentry%2F2025%2F02%2F07%2F180711&format=xml" title="oEmbed Profile of はてなアイコンの裏側の紹介 CloudflareとHonoX"> <link rel="author" href="http://www.hatena.ne.jp/kouki_dan/"> <link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=3302d0c519de548bcb3552ea0bf509"> <link rel="stylesheet" type="text/css" href="https://usercss.blog.st-hatena.com/blog_style/12704346814673975483/1fa4bda2b838dbee663a43d9c2668709531ee66d"> <script> </script> <style> div#google_afc_user, div.google-afc-user-container, div.google_afc_image, div.google_afc_blocklink { display: block !important; } </style> <script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","dateModified":"2025-02-07T18:07:17+09:00","datePublished":"2025-02-07T18:07:11+09:00","headline":"はてなアイコンの裏側の紹介 CloudflareとHonoX","image":["https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenatech/20250207/20250207180713.png"]}</script> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/files/12704346814673975483/4207112889961654141"> <link rel="preload" as="image" href="/file/8599973812307228497"> <link rel="preload" as="image" href="/file/8599973812307235616"> <link rel="preload" as="image" href="/file/8599973812307232702"> <link rel="preload" as="image" href="/file/8599973812307228478"> <link rel="preload" as="image" href="/file/8599973812307228480"> <meta name="google-site-verification" content="_wvN3qHawvIWkS6I_8lnJft96KtJduafGB4E5ddcxaA"> <meta name="google-site-verification" content="J3sw3XXusfz61jXgjxrw9RWJeqGmpH6CzQKGGjh9lp0">  <meta name="ahrefs-site-verification" content="36e3bc8bbce0396d9583e8a77f6497dad7343ca2ff9ca5d56a5a3fecb414306c"> </head> <body class="page-entry enable-top-editarea enable-bottom-editarea globalheader-off globalheader-ng-enabled"> <div id="globalheader-container" data-brand="hatenablog" style="display: none"> <iframe id="globalheader" height="37" frameborder="0" allowtransparency="true"></iframe> </div> <div id="container"> <div id="container-inner"> <div id="top-editarea"> <header id="global-header"> <div class="hatena-module hatena-module-search-box"> <div class="hatena-module-body">  <img class="icon-search" src="https://cdn.blog.st-hatena.com/files/12704346814673975483/13574176438017835249" width="15" height="auto" alt="Search"> <form class="search-form unedited" role="search" action="/search" method="get"> <input tabindex="0" type="text" name="q" class="search-module-input" value="" placeholder="Search" required=""> </form> </div> </div> <div id="blog-title-local"> <a href="/">  <span><img src="https://cdn.blog.st-hatena.com/files/12704346814673975483/13574176438017835249" width="auto" height="32" alt=""></span> <h1>Hatena Developer Blog</h1> </a> </div> <span id="sp-navigation"></span> <ul class="global-navigation"> <li class="sp-navigation-list"><a href="/">ブログトップ</a></li> <li class="sp-navigation-list"><a href="/archive">記事一覧</a></li> <li class="sp-navigation-list"><a href="/about">このブログについて</a></li> <li><a href="//hatenacorp.jp/">会社情報</a></li> <li><a href="//hatenacorp.jp/recruit/">採用情報</a></li> <li><a href="/presentations">登壇資料一覧</a></li> <li><a href="//hatena.connpass.com/" target="_blank">イベント</a></li> <li class="service-blogs">サービス開発ブログ <ul> <li class="service-bookmark"><a href="//bookmark.hatenastaff.com/">はてなブックマーク開発ブログ</a></li> <li class="service-blog"><a href="//staff.hatenablog.com/">はてなブログ開発ブログ</a></li> <li class="service-mackerel"><a href="//mackerel.io/ja/blog/">Mackerel ブログ</a></li> </ul> </li> </ul> </header> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> </script> <script type="text/javascript"> var spViewWidth = 1100; var globalNavi = $('.global-navigation'); var windowWidth = $(window).width(); var windowHeight = $(window).height(); var naviTotalHeight = 0; var naviOpen = 0; var searchOpen = 0; var scrollTop = 0; function addClassScrolling() { if (windowWidth < spViewWidth) { scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 0) { $('#global-header').addClass('scrolling'); } else { $('#global-header').removeClass('scrolling'); } } else { $('#global-header').removeClass('scrolling'); } } $(window).on('scroll', function() { addClassScrolling(); }); $('#sp-navigation').click(function() { naviOpen++; if (naviOpen % 2 == 0) { $(window).off('.noScroll'); $('.global-navigation').css('display','none'); } else { $('.global-navigation').fadeIn(400, function() { windowHeight = $(window).height(); $('.global-navigation > li').each(function() { naviTotalHeight += $(this).outerHeight(true); }); naviTotalHeight += globalNavi.position().top + parseInt(globalNavi.css('padding-top')) + parseInt(globalNavi.css('margin-top')); if (windowHeight > naviTotalHeight) { $(window).on('touchmove.noScroll', function(e) { e.preventDefault();}); } }); } $('html, body, #global-header').toggleClass('navOpen'); }); $('.icon-search').click(function() { if (windowWidth < spViewWidth) { searchOpen++; $('html, body, .hatena-module-search-box').toggleClass('searchOpen'); if (searchOpen % 2 == 0) { $(window).off('.noScroll'); $('#blog-title-local').fadeIn(120).css('display', 'flex'); } else { $(window).on('touchmove.noScroll', function(e) { e.preventDefault();}); $('#blog-title-local').fadeOut(60); $('.search-module-input').focus(); } } }); if (windowWidth < spViewWidth) { $('.search-module-input').focusout(function() { $('html, body, .hatena-module-search-box').removeClass('searchOpen'); searchOpen++; if (!$('#global-header').hasClass('navOpen')) { $(window).off('.noScroll'); } $('#blog-title-local').fadeIn(120).css('display', 'flex'); }); } $(window).on('resize', function() { windowWidth = $(window).width(); windowHeight = $(window).height(); if (windowWidth > spViewWidth) { $('.global-navigation').css('display','flex'); if (naviOpen % 2 != 0) { naviOpen++; $(window).off('.noScroll'); $('.global-navigation').css('display','flex'); $('html, body, #global-header').toggleClass('navOpen'); } } else { if (!$('#global-header').hasClass('navOpen')) { $('.global-navigation').css('display','none'); } } addClassScrolling(); }); </script> </div> <div id="content" class="hfeed"> <div id="content-inner"> <div id="wrapper"> <div id="main"> <div id="main-inner">   <article class="entry hentry test-hentry js-entry-article date-first autopagerize_page_element chars-4400 words-400 mode-markdown entry-odd" id="entry-6802418398325577934" data-keyword-campaign="" data-uuid="6802418398325577934" data-publication-type="entry"> <div class="entry-inner"> <header class="entry-header"> <div class="date entry-date first"> <a href="https://developer.hatenastaff.com/archive/2025/02/07" rel="nofollow"> <time datetime="2025-02-07T09:07:11Z" title="2025-02-07T09:07:11Z"> <span class="date-year">2025</span><span class="hyphen">-</span><span class="date-month">02</span><span class="hyphen">-</span><span class="date-day">07</span> </time> </a> </div> <h1 class="entry-title"> <a href="https://developer.hatenastaff.com/entry/2025/02/07/180711" class="entry-title-link bookmark">はてなアイコンの裏側の紹介 CloudflareとHonoX</a> </h1> </header> <div class="entry-content hatenablog-entry"> <p>先日、はてラボで「はてなアイコン」をリリースしました。普段はスマートフォンアプリを書いていることが多い <a href="http://blog.hatena.ne.jp/kouki_dan/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/kouki_dan/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:kouki_dan</a> です。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Flabo.hatenastaff.com%2Fentry%2FHatenaIcon" title="新サービス「はてなアイコン」をはてラボでリリースしました - はてラボ開発者ブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://labo.hatenastaff.com/entry/HatenaIcon">labo.hatenastaff.com</a></cite></p> <p>サービスの紹介はリリース時のエントリを参照してください。このエントリでは技術的な裏側の紹介をしていきます！</p> <h2 id="Cloudflareスタックを試したかった">Cloudflareスタックを試したかった</h2> <p>2年くらい前に、Cloudflare D1などが発表されて盛り上がっていた頃、Cloudflareを使ってなんか作りたいな〜と思っていました。はてなの社内には自由研究用のリソースとして、AWS, Google Cloudをはじめ、様々なクラウドサービスを特段の申請不要でエンジニアが自由に試せる環境が用意されています。もちろん費用は会社が出してくれて、常識的な範囲で使ってねということになっています。2年くらい前にCloudflareも追加してもらい、社内で自由にCloudflareスタックを試せる環境が整いました。</p> <p>その頃に <a href="http://blog.hatena.ne.jp/onishi/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/onishi/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:onishi</a> にCloudflareスタックでなんか作りたいよ〜。なんかちょうどいいアイデアありませんか？って話していたところ、出てきたのがはてなアイコンのアイデアです。そこで、リリースエントリで「ブックマークしたURLを表示すると何故かリダイレクトされるという技術検証」と語られていた検証が始まります。</p> <p>技術検証なので、Cloudflare Workerのブラウザエディタ上で、HTMLとJavaScriptを書いてあーでもない、こーでもないと、いろんなパターンを試していました。Faviconに関しては、単純にリダイレクトするくらいで動くかも？と思っていたのですが、単純にリダイレクトをするだけだと、ChromeのブックマークではFaviconがリダイレクト先のものになったりしていました。この辺りはブラウザの仕様次第なので、metaタグを使ったり、JavaScriprtを使ったりと、考えられることを色々と試していました。Cloudflareのブラウザエディタは、ワンクリックでデプロイでき、デプロイも異常に早く、本物のHTTPSのURLが発行されるので、検証が簡単に行えます。</p> <p><span itemscope="" itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenatech/20250207/20250207180713.png" width="1200" height="1081" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></span></p> <p>このエディタ上で、技術検証を行い、当初実現したかった、「ブックマークしたURLを表示すると何故かリダイレクトされてFaviconも自由に設定できる」という挙動の実現方法を確立しました。コミット履歴を見ると、1年半前の2023年9月頃にやっていたようです。単一のサイトに対するはてなアイコンの100行弱のPoCがここで出来上がりました。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink=""><span class="synComment">// index.js</span> <span class="synPreProc">export</span> <span class="synStatement">default</span> <span class="synSpecial">{</span> <span class="synStatement">async</span> <span class="synIdentifier">fetch</span><span class="synSpecial">(</span> request: Request<span class="synStatement">,</span> env: Env<span class="synStatement">,</span> ctx: ExecutionContext <span class="synSpecial">)</span>: <span class="synType">Promise</span><span class="synStatement"><</span>Response<span class="synStatement">></span> <span class="synSpecial">{</span> <span class="synIdentifier">if</span> <span class="synSpecial">(</span>request<span class="synStatement">.</span>url<span class="synStatement">.</span><span class="synIdentifier">endsWith</span><span class="synSpecial">(</span><span class="synConstant">"/manifest.json"</span><span class="synSpecial">))</span> <span class="synSpecial">{</span> <span class="synType">const</span> data <span class="synStatement">=</span> <span class="synSpecial">{</span> <span class="synIdentifier">short_name</span><span class="synStatement">:</span> <span class="synConstant">"Hatena"</span><span class="synStatement">,</span> <span class="synIdentifier">name</span><span class="synStatement">:</span> <span class="synConstant">"Hatena"</span><span class="synStatement">,</span> <span class="synIdentifier">display</span><span class="synStatement">:</span> <span class="synConstant">"standalone"</span><span class="synStatement">,</span> <span class="synIdentifier">start_url</span><span class="synStatement">:</span> <span class="synConstant">"/"</span><span class="synStatement">,</span> <span class="synIdentifier">icons</span><span class="synStatement">:</span> <span class="synSpecial">[</span> <span class="synSpecial">{</span> <span class="synIdentifier">src</span><span class="synStatement">:</span> <span class="synConstant">"img.png"</span><span class="synStatement">,</span> <span class="synIdentifier">sizes</span><span class="synStatement">:</span> <span class="synConstant">"1024x1024"</span><span class="synStatement">,</span> <span class="synIdentifier">type</span><span class="synStatement">:</span> <span class="synConstant">"image/png"</span><span class="synStatement">,</span> <span class="synSpecial">}</span><span class="synStatement">,</span> <span class="synSpecial">]</span><span class="synStatement">,</span> <span class="synSpecial">}</span><span class="synStatement">;</span> <span class="synType">const</span> json <span class="synStatement">=</span> <span class="synType">JSON</span><span class="synStatement">.</span><span class="synIdentifier">stringify</span><span class="synSpecial">(</span>data<span class="synSpecial">)</span><span class="synStatement">;</span> <span class="synStatement">return</span> <span class="synStatement">new</span> <span class="synIdentifier">Response</span><span class="synSpecial">(</span>json<span class="synStatement">,</span> <span class="synSpecial">{</span> <span class="synIdentifier">headers</span><span class="synStatement">:</span> <span class="synSpecial">{</span> <span class="synConstant">"content-type"</span><span class="synStatement">:</span> <span class="synConstant">"application/json;charset=UTF-8"</span><span class="synStatement">,</span> <span class="synSpecial">}</span><span class="synStatement">,</span> <span class="synSpecial">})</span><span class="synStatement">;</span> <span class="synSpecial">}</span> return new <span class="synIdentifier">Response</span><span class="synSpecial">(</span> ` <html<span class="synStatement">></span> <head<span class="synStatement">></span> <title<span class="synStatement">></span></title<span class="synStatement">></span> <link rel<span class="synStatement">=</span><span class="synConstant">"icon"</span> href<span class="synStatement">=</span><span class="synConstant">"img.png"</span><span class="synStatement">/</span>> <link rel<span class="synStatement">=</span><span class="synConstant">"apple-touch-icon"</span> href<span class="synStatement">=</span><span class="synConstant">"img.png"</span><span class="synStatement">/</span>> <link rel<span class="synStatement">=</span><span class="synConstant">"manifest"</span> href<span class="synStatement">=</span><span class="synConstant">"manifest.json"</span><span class="synStatement">></span> </head<span class="synStatement">></span> <style<span class="synStatement">></span> body <span class="synSpecial">{</span> display<span class="synStatement">:</span> grid; justify<span class="synStatement">-</span>items: center; align<span class="synStatement">-</span>items: center; width<span class="synStatement">:</span> 100%; height<span class="synStatement">:</span> 100%; <span class="synSpecial">}</span> </style<span class="synStatement">></span> <body<span class="synStatement">></span> <div id<span class="synStatement">=</span><span class="synConstant">"message"</span><span class="synStatement">></span> ブックマークしてね<span class="synStatement">!</span> </div<span class="synStatement">></span> <script<span class="synStatement">></span> <span class="synIdentifier">if</span> <span class="synSpecial">(</span>location<span class="synStatement">.</span>search <span class="synStatement">===</span> <span class="synConstant">"?edit"</span><span class="synSpecial">)</span> <span class="synSpecial">{</span> history<span class="synStatement">.</span><span class="synIdentifier">pushState</span><span class="synSpecial">({}</span><span class="synStatement">,</span> <span class="synConstant">""</span><span class="synStatement">,</span> location<span class="synStatement">.</span>pathname<span class="synSpecial">)</span>; <span class="synSpecial">}</span> else <span class="synSpecial">{</span> var message <span class="synStatement">=</span> <span class="synConstant">document</span><span class="synStatement">.</span><span class="synIdentifier">getElementById</span><span class="synSpecial">(</span><span class="synConstant">"message"</span><span class="synSpecial">)</span>; message<span class="synStatement">.</span>parentElement<span class="synStatement">.</span><span class="synIdentifier">removeChild</span><span class="synSpecial">(</span>message<span class="synSpecial">)</span>; setTimeout(function() <span class="synSpecial">{</span> <span class="synConstant">document</span><span class="synStatement">.</span><span class="synIdentifier">getElementById</span><span class="synSpecial">(</span><span class="synConstant">"link"</span><span class="synSpecial">)</span><span class="synStatement">.</span><span class="synIdentifier">click</span><span class="synSpecial">()</span>; <span class="synSpecial">}</span><span class="synStatement">,</span> 100); <span class="synSpecial">}</span> </script<span class="synStatement">></span> <a id<span class="synStatement">=</span><span class="synConstant">"link"</span> href<span class="synStatement">=</span><span class="synConstant">"https://hatena.ne.jp"</span> rel<span class="synStatement">=</span><span class="synConstant">"noopener noreferrer"</span><span class="synStatement">></span> <img src<span class="synStatement">=</span><span class="synConstant">"img.png"</span> width<span class="synStatement">=</span><span class="synConstant">300</span> height<span class="synStatement">=</span><span class="synConstant">300</span><span class="synStatement">/</span>> </a<span class="synStatement">></span> </body<span class="synStatement">></span> </html<span class="synStatement">></span> <span class="synConstant">`,</span> <span class="synConstant"> {</span> <span class="synConstant"> headers: {</span> <span class="synConstant"> "content-type": "text/html;charset=UTF-8",</span> <span class="synConstant"> },</span> <span class="synConstant"> }</span> <span class="synConstant"> );</span> <span class="synConstant"> },</span> <span class="synConstant">};</span> </pre> <h2 id="リリースを目指してHonoXで作り直す">リリースを目指してHonoXで作り直す</h2> <p>PoCができた段階で、仕事が忙しかったりで、1年くらい放置してしまっていました。何がきっかけだったのかは忘れましたが、リリースを目指して作り直すことになりました。この時に選んだフレームワークは <a href="https://github.com/honojs/honox">HonoX</a>です。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fhonojs%2Fhonox" title="GitHub - honojs/honox: HonoX - Hono based meta framework" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://github.com/honojs/honox">github.com</a></cite></p> <p>HonoXはアルファステージですがCloudflareと組み合わせやすそうなことが魅力でした。もともと技術的にはCloudflareスタックを試したい、ということが起点にあったので、アルファステージということには目を瞑って、HonoXを選びました。ラボなんでね。</p> <p>HonoXはCloudflareへのデプロイが簡単で早いのがお気に入りです。D1やR2など、他のCloudflareのプロダクトも簡単に利用を開始でき、Cloudflareで何か小さいものを作りたい、という時にはとてもオススメしたい選択肢だと思います。</p> <p>Viteを初めて使ったので、この辺りで結構躓きましたが、ファイルベースのルーティングも、Honoの資産が使えることもとてもよく、全体的に開発体験は良かったです。</p> <p>使った技術スタックは、以下の通りです。基本はHonoXの通りにPagesとFunctionsにデプロイ。データはD1に置き、画像はR2。セッション情報をKVに置くという使い方をしています。認証には、はてなのアカウントサーバーが持つ、OpenID Connectの機能を使用し、はてなIDを使えるようにしています。<a href="#f-b400ceb4" id="fn-b400ceb4" name="fn-b400ceb4" title="現在ははてなIDのOpenID Connectの実装は社内のラボサービスなどに向けたもの。社員以外でも使えるようにする予定があるとかないとか・・？">*1</a></p> <ul> <li>HonoX <ul> <li>フレームワーク</li> </ul> </li> <li>Cloudflare Pages (Functions) <ul> <li>アセットとSSR</li> </ul> </li> <li>Cloudflare D1 <ul> <li>ユーザー情報やアイコンの情報など</li> </ul> </li> <li>Cloudflare R2 <ul> <li>アイコンの画像ファイル</li> </ul> </li> <li>Cloudflare KV <ul> <li>セッション情報</li> </ul> </li> </ul> <h2 id="そしてリリースへ">そしてリリースへ</h2> <p>HonoXとCloudflareをフル活用して開発してきたはてなアイコンが、機能的にはだいたい今の形まで出来上がってきました。デザイン以外は・・。デザインをどうしようかなぁとずっと <a href="http://blog.hatena.ne.jp/onishi/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/onishi/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:onishi</a> と話していたところ、 <a href="http://blog.hatena.ne.jp/akawakami/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/akawakami/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:akawakami</a> がやってきて、CSSをどんどん書いて、今本番で出ているように素晴らしいデザインを当ててくれました。</p> <p>リリースできそうな感じになってきていて、いつリリースするかを考えていると、今週末の1/31にははてなの半期末の納会で全社員が集まるタイミングがあるからそこでライブデプロイ＆リリースしたらいいんじゃない？という話が浮かび上がってきました。</p> <p>そうと決まると、<a href="http://blog.hatena.ne.jp/onishi/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/onishi/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:onishi</a> は告知を書き、<a href="http://blog.hatena.ne.jp/akawakami/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/akawakami/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:akawakami</a>はデザインの最終調整を行い、<a href="http://blog.hatena.ne.jp/kouki_dan/" class="hatena-id-icon"><img src="https://cdn.profile-image.st-hatena.com/users/kouki_dan/profile.png" width="16" height="16" alt="" class="hatena-id-icon">id:kouki_dan</a> は環境を開発環境から本番環境へと移動したりして、当日を迎えます。ちょうどリリースされた1/31の17時くらいは、実ははてなでは全社納会が開催されていました。</p> <p></p><blockquote data-conversation="none" class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">新サービス「はてなアイコン」をはてラボでリリースしました <a href="https://t.co/TIgFDLgvrz">https://t.co/TIgFDLgvrz</a></p>— はてラボ (@hatelabo) <a href="https://twitter.com/hatelabo/status/1885244043501985811?ref_src=twsrc%5Etfw">2025年1月31日</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <p></p> <p>無事ライブリリースを終え、今に至ります！</p> <h2 id="まとめ">まとめ</h2> <p>はてなには自由研究用のリソースとしていろんなクラウドリソースをエンジニアが自由に試せる環境があります。はてなアイコンはそのCloudflareを使って色々実験していたら生まれたプロダクトです。社内でCloudflareはあまり使われていなかったので、なんか欲しいな〜と思ってラボでリリースを目指していました。実際にリリースできて、HonoXを使ってCloudflareのプロダクト満載で簡単なWebアプリケーションを作るという例がはてなアイコンです。はてなではいろんなエンジニアを募集しています！ぜひ興味がある方はカジュアル面談から始めましょう！</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fhatena.co.jp%2Frecruit%2Fengineer" title="エンジニア採用 - 採用情報 - 株式会社はてな" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://hatena.co.jp/recruit/engineer">hatena.co.jp</a></cite></p> <div class="footnote"> <p class="footnote"><a href="#fn-b400ceb4" id="f-b400ceb4" name="f-b400ceb4" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">現在ははてなIDのOpenID Connectの実装は社内のラボサービスなどに向けたもの。社員以外でも使えるようにする予定があるとかないとか・・？</span></p> </div> </div> <footer class="entry-footer"> <div class="entry-tags-wrapper"> <div class="entry-tags"> </div> </div> <p class="entry-footer-section track-inview-by-gtm" data-gtm-track-json="{"area": "finish_reading"}"> <span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="kouki_dan">kouki_dan</span></span> <span class="entry-footer-time"><a href="https://developer.hatenastaff.com/entry/2025/02/07/180711"><time data-relative="" datetime="2025-02-07T09:07:11Z" title="2025-02-07T09:07:11Z" class="updated">2025-02-07 18:07</time></a></span> </p> <div class="hatena-star-container" data-hatena-star-container="" data-hatena-star-url="https://developer.hatenastaff.com/entry/2025/02/07/180711" data-hatena-star-title="はてなアイコンの裏側の紹介 CloudflareとHonoX" data-hatena-star-variant="profile-icon" data-hatena-star-profile-url-template="https://blog.hatena.ne.jp/{username}/"></div> <div class="social-buttons"> <div class="social-button-item"> <a href="https://b.hatena.ne.jp/entry/s/developer.hatenastaff.com/entry/2025/02/07/180711" class="hatena-bookmark-button" data-hatena-bookmark-url="https://developer.hatenastaff.com/entry/2025/02/07/180711" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;"></a> </div> <div class="social-button-item"> <div class="fb-share-button" data-layout="box_count" data-href="https://developer.hatenastaff.com/entry/2025/02/07/180711"></div> </div> <div class="social-button-item"> <a class="entry-share-button entry-share-button-twitter test-share-button-twitter" href="https://x.com/intent/tweet?text=%E3%81%AF%E3%81%A6%E3%81%AA%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E8%A3%8F%E5%81%B4%E3%81%AE%E7%B4%B9%E4%BB%8B+Cloudflare%E3%81%A8HonoX+-+Hatena+Developer+Blog&url=https%3A%2F%2Fdeveloper.hatenastaff.com%2Fentry%2F2025%2F02%2F07%2F180711" title="X（Twitter）で投稿する"></a> </div> </div> <div class="customized-footer"> <div class="entry-footer-modules" id="entry-footer-secondary-modules"> <div class="hatena-module hatena-module-html"> <div class="hatena-module-body"> <div class="hatena-gig-ad-slot"></div> </div> </div> <div class="hatena-module hatena-module-html"> <div class="hatena-module-body"> <a href="https://hatena.blog/dev?utm_source=developer.hatenastaff.com&utm_medium=referral&utm_campaign=devblog_announcement" target="_blank" rel="noopener" class="entry-footer-devblog"> <div class="entry-footer-devblog-content"> <h3 id="400社以上の技術ブログが毎日読める">400社以上の技術ブログが<br>毎日読める</h3> <p>もっと技術ブログを読みたいあなたに！ <br>現場のエンジニアの知見が満載。</p> </div> </a> </div> </div> </div> <div class="entry-footer-html"><div class="entry-footer-follow"> <h3>Hatena Developer Blogの<wbr>更新情報を<wbr>受け取る</h3> <iframe src="https://blog.hatena.ne.jp/hatenatech/developer.hatenastaff.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="130" height="28"></iframe> <a href="https://twitter.com/hatenatech" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-show-screen-name="false">@hatenatechさんをフォロー</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> <div class="entry-footer-recruit"> <h3> <a href="https://hatena.co.jp/recruit">はてなで一緒に働きませんか？</a> </h3> <p>日本全国フルリモートOK!</p> <ul> <li><a href="http://hatenacorp.jp/recruit/career/application-engineer">Webアプリケーションエンジニア</a></li> <li><a href="http://hatenacorp.jp/recruit/career/sp-application-engineer">iOS、Androidアプリエンジニア</a></li> <li><a href="http://hatenacorp.jp/recruit/career/sre">SRE (Site Reliability Engineer)</a></li> <li><a href="http://hatenacorp.jp/recruit/career/cre">CRE (Customer Reliability Engineer)</a></li> </ul> </div> </div> </div> <div class="comment-box js-comment-box"> <ul class="comment js-comment"> <li class="read-more-comments" style="display: none;"><a>もっと読む</a></li> </ul> <a class="leave-comment-title js-leave-comment-title">コメントを書く</a> </div> </footer> </div> </article>   <div class="pager pager-permalink permalink"> <span class="pager-prev"> <a href="https://developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-2" rel="prev"> <span class="pager-arrow">« </span> 様々なマンガアプリを素早く開発できる「G… </a> </span> <span class="pager-next"> <a href="https://developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-1" rel="next"> 『Inside GigaViewer for Apps』連載開始… <span class="pager-arrow"> »</span> </a> </span> </div> </div> </div> <aside id="box1"> <div id="box1-inner"> </div> </aside> </div> <aside id="box2"> <div id="box2-inner"> <div class="hatena-module hatena-module-html"> <div class="hatena-module-body"> <script> const $allVideos = $("iframe[src*='vimeo.com'], iframe[src*='youtube.com'], iframe[src*='speakerdeck.com'], iframe[src*='slideshare'], iframe.flickr-embed-frame"); const $fluidEl = $(".entry-content"); $allVideos.each(function() { $(this) .attr('data-aspectRatio', this.height / this.width) .removeAttr('height') .removeAttr('width'); }); $(window).on('resize', function(){ let newWidth = $fluidEl.width(); $allVideos.each(function() { let $el = $(this); $el .width(newWidth) .height(newWidth * $el.attr('data-aspectRatio')); }); }).resize(); </script> </div> </div> <div class="hatena-module hatena-module-html"> <div class="hatena-module-body"> <script> if ($('input.search-result-input').length) { const inputElm = $('input.search-result-input'); const value = inputElm.val(); inputElm.val('').attr('placeholder', '').val(value).focus(); } $('.archive-entry').each(function() { if (!$('.entry-thumb-link', this).length) { $(this).addClass('no-included-image-entry'); } }); </script> </div> </div> <div class="hatena-module hatena-module-profile"> <div class="hatena-module-title"> プロフィール </div> <div class="hatena-module-body"> <a href="https://developer.hatenastaff.com/about" class="profile-icon-link"> <img src="https://cdn.profile-image.st-hatena.com/users/hatenatech/profile.png?1626690673" alt="id:hatenatech" class="profile-icon"> </a> <span class="id"> <a href="https://developer.hatenastaff.com/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="hatenatech">id:hatenatech</span></a> <a href="https://blog.hatena.ne.jp/-/pro?plus_via=blog_plus_badge&utm_source=pro_badge&utm_medium=referral&utm_campaign=register_pro" title="はてなブログPro"><i class="badge-type-pro">はてなブログPro</i></a> </span> <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box"> <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once=""> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> <div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div> <div class="profile-about"> <a href="https://developer.hatenastaff.com/about">このブログについて</a> </div> </div> </div> <div class="hatena-module hatena-module-authors-list"> <div class="hatena-module-title"> 執筆者リスト </div> <div class="hatena-module-body"> <ul class="hatena-urllist authors-urllist"> <li> <a href="https://developer.hatenastaff.com/archive/author/gurrium"> <img src="https://cdn.profile-image.st-hatena.com/users/gurrium/profile.png?1615810806" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="gurrium"> id:gurrium </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/kouki_dan"> <img src="https://cdn.profile-image.st-hatena.com/users/kouki_dan/profile.png?1448722593" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="kouki_dan"> id:kouki_dan </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/hatenatech"> <img src="https://cdn.profile-image.st-hatena.com/users/hatenatech/profile.png?1626690673" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="hatenatech"> id:hatenatech </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/cohalz"> <img src="https://cdn.profile-image.st-hatena.com/users/cohalz/profile.png?1551482788" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="cohalz"> id:cohalz </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/onk"> <img src="https://cdn.profile-image.st-hatena.com/users/onk/profile.png" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="onk"> id:onk </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/k1s1eee"> <img src="https://cdn.profile-image.st-hatena.com/users/k1s1eee/profile.png?1659421184" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="k1s1eee"> id:k1s1eee </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/yigarashi"> <img src="https://cdn.profile-image.st-hatena.com/users/yigarashi/profile.png?1554348534" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="yigarashi"> id:yigarashi </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/rskmm0chang"> <img src="https://cdn.profile-image.st-hatena.com/users/rskmm0chang/profile.png?1722834993" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="rskmm0chang"> id:rskmm0chang </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/daiksy"> <img src="https://cdn.profile-image.st-hatena.com/users/daiksy/profile.png?1512953941" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="daiksy"> id:daiksy </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/s-shiro"> <img src="https://cdn.profile-image.st-hatena.com/users/s-shiro/profile.png?1699544919" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="s-shiro"> id:s-shiro </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/masayoshi"> <img src="https://cdn.profile-image.st-hatena.com/users/masayoshi/profile.png?1511143704" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="masayoshi"> id:masayoshi </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/koudenpa"> <img src="https://cdn.profile-image.st-hatena.com/users/koudenpa/profile.png?1629369911" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="koudenpa"> id:koudenpa </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/yutailang0119"> <img src="https://cdn.profile-image.st-hatena.com/users/yutailang0119/profile.png?1568353628" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="yutailang0119"> id:yutailang0119 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/mangano-ito"> <img src="https://cdn.profile-image.st-hatena.com/users/mangano-ito/profile.png?1725887797" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="mangano-ito"> id:mangano-ito </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/walnuts1018"> <img src="https://cdn.profile-image.st-hatena.com/users/walnuts1018/profile.png?1717401262" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="walnuts1018"> id:walnuts1018 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/chaya2z"> <img src="https://cdn.profile-image.st-hatena.com/users/chaya2z/profile.png?1671522946" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="chaya2z"> id:chaya2z </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/onishi"> <img src="https://cdn.profile-image.st-hatena.com/users/onishi/profile.png?1711953087" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="onishi"> id:onishi </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/MysticDoll"> <img src="https://cdn.profile-image.st-hatena.com/users/MysticDoll/profile.png?1610948817" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="MysticDoll"> id:MysticDoll </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/lufiabb"> <img src="https://cdn.profile-image.st-hatena.com/users/lufiabb/profile.png?1539935021" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="lufiabb"> id:lufiabb </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/heleeen"> <img src="https://cdn.profile-image.st-hatena.com/users/heleeen/profile.png?1549545311" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="heleeen"> id:heleeen </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/fxwx23"> <img src="https://cdn.profile-image.st-hatena.com/users/fxwx23/profile.png?1560875953" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="fxwx23"> id:fxwx23 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/taxintt"> <img src="https://cdn.profile-image.st-hatena.com/users/taxintt/profile.png?1579445666" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="taxintt"> id:taxintt </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/cockscomb"> <img src="https://cdn.profile-image.st-hatena.com/users/cockscomb/profile.png?1512697380" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="cockscomb"> id:cockscomb </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/masayosu"> <img src="https://cdn.profile-image.st-hatena.com/users/masayosu/profile.png?1591081263" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="masayosu"> id:masayosu </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/Furutsuki"> <img src="https://cdn.profile-image.st-hatena.com/users/Furutsuki/profile.png?1503402472" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="Furutsuki"> id:Furutsuki </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/hagihala"> <img src="https://cdn.profile-image.st-hatena.com/users/hagihala/profile.png?1348931532" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="hagihala"> id:hagihala </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/maku693"> <img src="https://cdn.profile-image.st-hatena.com/users/maku693/profile.png?1608107800" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="maku693"> id:maku693 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/blog-media"> <img src="https://cdn.profile-image.st-hatena.com/users/blog-media/profile.png?1627444619" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="blog-media"> id:blog-media </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/motemen"> <img src="https://cdn.profile-image.st-hatena.com/users/motemen/profile.png" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="motemen"> id:motemen </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/d-haru"> <img src="https://cdn.profile-image.st-hatena.com/users/d-haru/profile.png?1665992949" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="d-haru"> id:d-haru </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/kmuto"> <img src="https://cdn.profile-image.st-hatena.com/users/kmuto/profile.png?1669474947" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="kmuto"> id:kmuto </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/arthur-1"> <img src="https://cdn.profile-image.st-hatena.com/users/arthur-1/profile.png?1648713639" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="arthur-1"> id:arthur-1 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/nabe1216"> <img src="https://cdn.profile-image.st-hatena.com/users/nabe1216/profile.png?1572919930" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="nabe1216"> id:nabe1216 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/tkzwtks"> <img src="https://cdn.profile-image.st-hatena.com/users/tkzwtks/profile.png?1473181177" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="tkzwtks"> id:tkzwtks </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/masawada"> <img src="https://cdn.profile-image.st-hatena.com/users/masawada/profile.png?1510304018" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="masawada"> id:masawada </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/momochi29"> <img src="https://cdn.profile-image.st-hatena.com/users/momochi29/profile.png?1550489611" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="momochi29"> id:momochi29 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/mizdra"> <img src="https://cdn.profile-image.st-hatena.com/users/mizdra/profile.png?1701668305" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="mizdra"> id:mizdra </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/KGA"> <img src="https://cdn.profile-image.st-hatena.com/users/KGA/profile.png" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="KGA"> id:KGA </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/tokizuoh"> <img src="https://cdn.profile-image.st-hatena.com/users/tokizuoh/profile.png?1719729147" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="tokizuoh"> id:tokizuoh </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/miki_bene"> <img src="https://cdn.profile-image.st-hatena.com/users/miki_bene/profile.png?1445842470" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="miki_bene"> id:miki_bene </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/astj"> <img src="https://cdn.profile-image.st-hatena.com/users/astj/profile.png?1375861047" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="astj"> id:astj </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/nanto_vi"> <img src="https://cdn.profile-image.st-hatena.com/users/nanto_vi/profile.png" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="nanto_vi"> id:nanto_vi </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/do-su-0805"> <img src="https://cdn.profile-image.st-hatena.com/users/do-su-0805/profile.png?1537317991" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="do-su-0805"> id:do-su-0805 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/nakiwo"> <img src="https://cdn.profile-image.st-hatena.com/users/nakiwo/profile.png?1603101572" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="nakiwo"> id:nakiwo </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/wtatsuru"> <img src="https://cdn.profile-image.st-hatena.com/users/wtatsuru/profile.png?1512697216" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="wtatsuru"> id:wtatsuru </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/missasan"> <img src="https://cdn.profile-image.st-hatena.com/users/missasan/profile.png?1614821959" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="missasan"> id:missasan </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/hogashi"> <img src="https://cdn.profile-image.st-hatena.com/users/hogashi/profile.png?1440928833" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="hogashi"> id:hogashi </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/polamjag"> <img src="https://cdn.profile-image.st-hatena.com/users/polamjag/profile.png?1548587016" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="polamjag"> id:polamjag </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/susisu"> <img src="https://cdn.profile-image.st-hatena.com/users/susisu/profile.png?1688642403" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="susisu"> id:susisu </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/hitode909"> <img src="https://cdn.profile-image.st-hatena.com/users/hitode909/profile.png?1556637331" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="hitode909"> id:hitode909 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/Pasta-K"> <img src="https://cdn.profile-image.st-hatena.com/users/Pasta-K/profile.png?1512700207" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="Pasta-K"> id:Pasta-K </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/chris4403"> <img src="https://cdn.profile-image.st-hatena.com/users/chris4403/profile.png?1512697416" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="chris4403"> id:chris4403 </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/yashigani_w"> <img src="https://cdn.profile-image.st-hatena.com/users/yashigani_w/profile.png?1512697699" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="yashigani_w"> id:yashigani_w </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/ueday"> <img src="https://cdn.profile-image.st-hatena.com/users/ueday/profile.png?1513151360" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="ueday"> id:ueday </span> </a> </li> <li> <a href="https://developer.hatenastaff.com/archive/author/pokutuna"> <img src="https://cdn.profile-image.st-hatena.com/users/pokutuna/profile.png" class="authors-user-icon"> <span class="authors-user-name" data-load-nickname="1" data-user-name="pokutuna"> id:pokutuna </span> </a> </li> </ul> </div> </div> <div class="hatena-module hatena-module-recent-entries "> <div class="hatena-module-title"> <a href="https://developer.hatenastaff.com/archive"> 最新記事 </a> </div> <div class="hatena-module-body"> <ul class="recent-entries hatena-urllist "> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="urllist-date-link recent-entries-date-link"> <a href="https://developer.hatenastaff.com/archive/2025/02/19" rel="nofollow"> <time datetime="2025-02-19T03:00:00Z" title="2025年2月19日"> 2025-02-19 </time> </a> </div> <a href="https://developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-2" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">様々なマンガアプリを素早く開発できる「GigaViewer for Apps」のしくみ iOS 編</a> <a href="https://b.hatena.ne.jp/entry/s/developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-2" class="bookmark-widget-counter"> <img src="https://b.hatena.ne.jp/entry/image/https://developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-2" alt="はてなブックマーク - 様々なマンガアプリを素早く開発できる「GigaViewer for Apps」のしくみ iOS 編"> </a> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="urllist-date-link recent-entries-date-link"> <a href="https://developer.hatenastaff.com/archive/2025/02/07" rel="nofollow"> <time datetime="2025-02-07T09:07:11Z" title="2025年2月7日"> 2025-02-07 </time> </a> </div> <a href="https://developer.hatenastaff.com/entry/2025/02/07/180711" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">はてなアイコンの裏側の紹介 CloudflareとHonoX</a> <a href="https://b.hatena.ne.jp/entry/s/developer.hatenastaff.com/entry/2025/02/07/180711" class="bookmark-widget-counter"> <img src="https://b.hatena.ne.jp/entry/image/https://developer.hatenastaff.com/entry/2025/02/07/180711" alt="はてなブックマーク - はてなアイコンの裏側の紹介 CloudflareとHonoX"> </a> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="urllist-date-link recent-entries-date-link"> <a href="https://developer.hatenastaff.com/archive/2025/02/05" rel="nofollow"> <time datetime="2025-02-05T03:00:00Z" title="2025年2月5日"> 2025-02-05 </time> </a> </div> <a href="https://developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-1" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">『Inside GigaViewer for Apps』連載開始！技術と開発の舞台裏 #GigaViewer</a> <a href="https://b.hatena.ne.jp/entry/s/developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-1" class="bookmark-widget-counter"> <img src="https://b.hatena.ne.jp/entry/image/https://developer.hatenastaff.com/entry/inside-gigaviewer-for-apps-1" alt="はてなブックマーク - 『Inside GigaViewer for Apps』連載開始！技術と開発の舞台裏 #GigaViewer"> </a> </div> </li> </ul> </div> </div> <div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="https://developer.hatenastaff.com/archive"> <div class="hatena-module-title"> <a href="https://developer.hatenastaff.com/archive">月別アーカイブ</a> </div> <div class="hatena-module-body"> <ul class="hatena-urllist"> <li class="archive-module-year archive-module-year-hidden" data-year="2025"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2025" class="archive-module-year-title archive-module-year-2025"> 2025 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2025/02" class="archive-module-month-title archive-module-month-2025-2"> 2025 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2025/01" class="archive-module-month-title archive-module-month-2025-1"> 2025 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2024"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2024" class="archive-module-year-title archive-module-year-2024"> 2024 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/12" class="archive-module-month-title archive-module-month-2024-12"> 2024 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/11" class="archive-module-month-title archive-module-month-2024-11"> 2024 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/10" class="archive-module-month-title archive-module-month-2024-10"> 2024 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/09" class="archive-module-month-title archive-module-month-2024-9"> 2024 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/08" class="archive-module-month-title archive-module-month-2024-8"> 2024 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/07" class="archive-module-month-title archive-module-month-2024-7"> 2024 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/06" class="archive-module-month-title archive-module-month-2024-6"> 2024 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/05" class="archive-module-month-title archive-module-month-2024-5"> 2024 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/04" class="archive-module-month-title archive-module-month-2024-4"> 2024 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/03" class="archive-module-month-title archive-module-month-2024-3"> 2024 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/02" class="archive-module-month-title archive-module-month-2024-2"> 2024 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2024/01" class="archive-module-month-title archive-module-month-2024-1"> 2024 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2023"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2023" class="archive-module-year-title archive-module-year-2023"> 2023 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/12" class="archive-module-month-title archive-module-month-2023-12"> 2023 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/11" class="archive-module-month-title archive-module-month-2023-11"> 2023 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/10" class="archive-module-month-title archive-module-month-2023-10"> 2023 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/09" class="archive-module-month-title archive-module-month-2023-9"> 2023 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/08" class="archive-module-month-title archive-module-month-2023-8"> 2023 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/07" class="archive-module-month-title archive-module-month-2023-7"> 2023 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/06" class="archive-module-month-title archive-module-month-2023-6"> 2023 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/05" class="archive-module-month-title archive-module-month-2023-5"> 2023 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/04" class="archive-module-month-title archive-module-month-2023-4"> 2023 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/03" class="archive-module-month-title archive-module-month-2023-3"> 2023 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/02" class="archive-module-month-title archive-module-month-2023-2"> 2023 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2023/01" class="archive-module-month-title archive-module-month-2023-1"> 2023 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2022"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2022" class="archive-module-year-title archive-module-year-2022"> 2022 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/12" class="archive-module-month-title archive-module-month-2022-12"> 2022 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/11" class="archive-module-month-title archive-module-month-2022-11"> 2022 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/10" class="archive-module-month-title archive-module-month-2022-10"> 2022 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/09" class="archive-module-month-title archive-module-month-2022-9"> 2022 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/08" class="archive-module-month-title archive-module-month-2022-8"> 2022 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/07" class="archive-module-month-title archive-module-month-2022-7"> 2022 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/06" class="archive-module-month-title archive-module-month-2022-6"> 2022 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/05" class="archive-module-month-title archive-module-month-2022-5"> 2022 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/04" class="archive-module-month-title archive-module-month-2022-4"> 2022 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/03" class="archive-module-month-title archive-module-month-2022-3"> 2022 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/02" class="archive-module-month-title archive-module-month-2022-2"> 2022 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2022/01" class="archive-module-month-title archive-module-month-2022-1"> 2022 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2021"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2021" class="archive-module-year-title archive-module-year-2021"> 2021 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/12" class="archive-module-month-title archive-module-month-2021-12"> 2021 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/11" class="archive-module-month-title archive-module-month-2021-11"> 2021 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/10" class="archive-module-month-title archive-module-month-2021-10"> 2021 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/09" class="archive-module-month-title archive-module-month-2021-9"> 2021 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/08" class="archive-module-month-title archive-module-month-2021-8"> 2021 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/07" class="archive-module-month-title archive-module-month-2021-7"> 2021 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/06" class="archive-module-month-title archive-module-month-2021-6"> 2021 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/05" class="archive-module-month-title archive-module-month-2021-5"> 2021 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/04" class="archive-module-month-title archive-module-month-2021-4"> 2021 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/03" class="archive-module-month-title archive-module-month-2021-3"> 2021 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/02" class="archive-module-month-title archive-module-month-2021-2"> 2021 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2021/01" class="archive-module-month-title archive-module-month-2021-1"> 2021 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2020"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2020" class="archive-module-year-title archive-module-year-2020"> 2020 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/12" class="archive-module-month-title archive-module-month-2020-12"> 2020 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/11" class="archive-module-month-title archive-module-month-2020-11"> 2020 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/10" class="archive-module-month-title archive-module-month-2020-10"> 2020 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/09" class="archive-module-month-title archive-module-month-2020-9"> 2020 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/08" class="archive-module-month-title archive-module-month-2020-8"> 2020 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/07" class="archive-module-month-title archive-module-month-2020-7"> 2020 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/06" class="archive-module-month-title archive-module-month-2020-6"> 2020 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/05" class="archive-module-month-title archive-module-month-2020-5"> 2020 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/04" class="archive-module-month-title archive-module-month-2020-4"> 2020 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/03" class="archive-module-month-title archive-module-month-2020-3"> 2020 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/02" class="archive-module-month-title archive-module-month-2020-2"> 2020 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2020/01" class="archive-module-month-title archive-module-month-2020-1"> 2020 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2019"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2019" class="archive-module-year-title archive-module-year-2019"> 2019 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/12" class="archive-module-month-title archive-module-month-2019-12"> 2019 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/11" class="archive-module-month-title archive-module-month-2019-11"> 2019 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/09" class="archive-module-month-title archive-module-month-2019-9"> 2019 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/08" class="archive-module-month-title archive-module-month-2019-8"> 2019 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/07" class="archive-module-month-title archive-module-month-2019-7"> 2019 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/06" class="archive-module-month-title archive-module-month-2019-6"> 2019 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/05" class="archive-module-month-title archive-module-month-2019-5"> 2019 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/04" class="archive-module-month-title archive-module-month-2019-4"> 2019 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/03" class="archive-module-month-title archive-module-month-2019-3"> 2019 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/02" class="archive-module-month-title archive-module-month-2019-2"> 2019 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2019/01" class="archive-module-month-title archive-module-month-2019-1"> 2019 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2018"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2018" class="archive-module-year-title archive-module-year-2018"> 2018 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/12" class="archive-module-month-title archive-module-month-2018-12"> 2018 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/11" class="archive-module-month-title archive-module-month-2018-11"> 2018 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/10" class="archive-module-month-title archive-module-month-2018-10"> 2018 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/09" class="archive-module-month-title archive-module-month-2018-9"> 2018 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/08" class="archive-module-month-title archive-module-month-2018-8"> 2018 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/07" class="archive-module-month-title archive-module-month-2018-7"> 2018 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/06" class="archive-module-month-title archive-module-month-2018-6"> 2018 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/05" class="archive-module-month-title archive-module-month-2018-5"> 2018 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/04" class="archive-module-month-title archive-module-month-2018-4"> 2018 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/03" class="archive-module-month-title archive-module-month-2018-3"> 2018 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/02" class="archive-module-month-title archive-module-month-2018-2"> 2018 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2018/01" class="archive-module-month-title archive-module-month-2018-1"> 2018 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2017"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2017" class="archive-module-year-title archive-module-year-2017"> 2017 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/12" class="archive-module-month-title archive-module-month-2017-12"> 2017 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/11" class="archive-module-month-title archive-module-month-2017-11"> 2017 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/10" class="archive-module-month-title archive-module-month-2017-10"> 2017 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/09" class="archive-module-month-title archive-module-month-2017-9"> 2017 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/08" class="archive-module-month-title archive-module-month-2017-8"> 2017 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/07" class="archive-module-month-title archive-module-month-2017-7"> 2017 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/06" class="archive-module-month-title archive-module-month-2017-6"> 2017 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/05" class="archive-module-month-title archive-module-month-2017-5"> 2017 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/04" class="archive-module-month-title archive-module-month-2017-4"> 2017 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/03" class="archive-module-month-title archive-module-month-2017-3"> 2017 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/02" class="archive-module-month-title archive-module-month-2017-2"> 2017 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2017/01" class="archive-module-month-title archive-module-month-2017-1"> 2017 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2016"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2016" class="archive-module-year-title archive-module-year-2016"> 2016 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/12" class="archive-module-month-title archive-module-month-2016-12"> 2016 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/11" class="archive-module-month-title archive-module-month-2016-11"> 2016 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/10" class="archive-module-month-title archive-module-month-2016-10"> 2016 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/09" class="archive-module-month-title archive-module-month-2016-9"> 2016 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/08" class="archive-module-month-title archive-module-month-2016-8"> 2016 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/07" class="archive-module-month-title archive-module-month-2016-7"> 2016 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/06" class="archive-module-month-title archive-module-month-2016-6"> 2016 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/05" class="archive-module-month-title archive-module-month-2016-5"> 2016 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/04" class="archive-module-month-title archive-module-month-2016-4"> 2016 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/03" class="archive-module-month-title archive-module-month-2016-3"> 2016 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/02" class="archive-module-month-title archive-module-month-2016-2"> 2016 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2016/01" class="archive-module-month-title archive-module-month-2016-1"> 2016 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2015"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2015" class="archive-module-year-title archive-module-year-2015"> 2015 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/12" class="archive-module-month-title archive-module-month-2015-12"> 2015 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/11" class="archive-module-month-title archive-module-month-2015-11"> 2015 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/10" class="archive-module-month-title archive-module-month-2015-10"> 2015 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/09" class="archive-module-month-title archive-module-month-2015-9"> 2015 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/08" class="archive-module-month-title archive-module-month-2015-8"> 2015 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/07" class="archive-module-month-title archive-module-month-2015-7"> 2015 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/06" class="archive-module-month-title archive-module-month-2015-6"> 2015 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/05" class="archive-module-month-title archive-module-month-2015-5"> 2015 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/04" class="archive-module-month-title archive-module-month-2015-4"> 2015 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/03" class="archive-module-month-title archive-module-month-2015-3"> 2015 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/02" class="archive-module-month-title archive-module-month-2015-2"> 2015 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2015/01" class="archive-module-month-title archive-module-month-2015-1"> 2015 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2014"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2014" class="archive-module-year-title archive-module-year-2014"> 2014 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/12" class="archive-module-month-title archive-module-month-2014-12"> 2014 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/11" class="archive-module-month-title archive-module-month-2014-11"> 2014 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/10" class="archive-module-month-title archive-module-month-2014-10"> 2014 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/09" class="archive-module-month-title archive-module-month-2014-9"> 2014 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/08" class="archive-module-month-title archive-module-month-2014-8"> 2014 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/07" class="archive-module-month-title archive-module-month-2014-7"> 2014 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/06" class="archive-module-month-title archive-module-month-2014-6"> 2014 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/05" class="archive-module-month-title archive-module-month-2014-5"> 2014 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/03" class="archive-module-month-title archive-module-month-2014-3"> 2014 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2014/02" class="archive-module-month-title archive-module-month-2014-2"> 2014 / 2 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2013"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2013" class="archive-module-year-title archive-module-year-2013"> 2013 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/12" class="archive-module-month-title archive-module-month-2013-12"> 2013 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/11" class="archive-module-month-title archive-module-month-2013-11"> 2013 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/10" class="archive-module-month-title archive-module-month-2013-10"> 2013 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/09" class="archive-module-month-title archive-module-month-2013-9"> 2013 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/08" class="archive-module-month-title archive-module-month-2013-8"> 2013 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/06" class="archive-module-month-title archive-module-month-2013-6"> 2013 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/05" class="archive-module-month-title archive-module-month-2013-5"> 2013 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2013/04" class="archive-module-month-title archive-module-month-2013-4"> 2013 / 4 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2012"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2012" class="archive-module-year-title archive-module-year-2012"> 2012 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2012/10" class="archive-module-month-title archive-module-month-2012-10"> 2012 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2012/09" class="archive-module-month-title archive-module-month-2012-9"> 2012 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2012/05" class="archive-module-month-title archive-module-month-2012-5"> 2012 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2012/04" class="archive-module-month-title archive-module-month-2012-4"> 2012 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2012/03" class="archive-module-month-title archive-module-month-2012-3"> 2012 / 3 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2011"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2011" class="archive-module-year-title archive-module-year-2011"> 2011 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2011/08" class="archive-module-month-title archive-module-month-2011-8"> 2011 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2011/07" class="archive-module-month-title archive-module-month-2011-7"> 2011 / 7 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2011/06" class="archive-module-month-title archive-module-month-2011-6"> 2011 / 6 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2011/04" class="archive-module-month-title archive-module-month-2011-4"> 2011 / 4 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2011/03" class="archive-module-month-title archive-module-month-2011-3"> 2011 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2011/02" class="archive-module-month-title archive-module-month-2011-2"> 2011 / 2 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2011/01" class="archive-module-month-title archive-module-month-2011-1"> 2011 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2010"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2010" class="archive-module-year-title archive-module-year-2010"> 2010 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2010/12" class="archive-module-month-title archive-module-month-2010-12"> 2010 / 12 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2010/11" class="archive-module-month-title archive-module-month-2010-11"> 2010 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2010/08" class="archive-module-month-title archive-module-month-2010-8"> 2010 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2010/07" class="archive-module-month-title archive-module-month-2010-7"> 2010 / 7 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2007"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2007" class="archive-module-year-title archive-module-year-2007"> 2007 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2007/08" class="archive-module-month-title archive-module-month-2007-8"> 2007 / 8 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2007/03" class="archive-module-month-title archive-module-month-2007-3"> 2007 / 3 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2007/01" class="archive-module-month-title archive-module-month-2007-1"> 2007 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2006"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2006" class="archive-module-year-title archive-module-year-2006"> 2006 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2006/05" class="archive-module-month-title archive-module-month-2006-5"> 2006 / 5 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2006/02" class="archive-module-month-title archive-module-month-2006-2"> 2006 / 2 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2005"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://developer.hatenastaff.com/archive/2005" class="archive-module-year-title archive-module-year-2005"> 2005 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2005/11" class="archive-module-month-title archive-module-month-2005-11"> 2005 / 11 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2005/10" class="archive-module-month-title archive-module-month-2005-10"> 2005 / 10 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2005/09" class="archive-module-month-title archive-module-month-2005-9"> 2005 / 9 </a> </li> <li class="archive-module-month"> <a href="https://developer.hatenastaff.com/archive/2005/08" class="archive-module-month-title archive-module-month-2005-8"> 2005 / 8 </a> </li> </ul> </li> </ul> </div> </div> <div class="hatena-module hatena-module-html"> <div class="hatena-module-title">ツイート</div> <div class="hatena-module-body"> <div class="sidebar-tweets-timeline"> <a class="twitter-timeline" href="https://twitter.com/hatenatech" data-width="100%" data-height="300" data-chrome="nofooter" data-tweet-limit="2"> </a> </div> </div> </div> </div> </aside> </div> </div> <div id="bottom-editarea"> <footer> <a href="//hatenacorp.jp/"> <img src="https://cdn.blog.st-hatena.com/files/12704346814673975483/13574176438017835249" width="auto" height="32" alt=""> <span id="footer-copyright">© Hatena Co., Ltd.</span> </a> </footer> </div> </div> </div> <script async="" src="https://s.hatena.ne.jp/js/widget/star.js"></script> <script> if (typeof window.Hatena === 'undefined') { window.Hatena = {}; } if (!Hatena.hasOwnProperty('Star')) { Hatena.Star = { VERSION: 2, }; } </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v17.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="quote-box"> <div class="tooltip-quote tooltip-quote-stock"> <i class="blogicon-quote" title="引用をストック"></i> </div> <div class="tooltip-quote tooltip-quote-tweet js-tooltip-quote-tweet"> <a class="js-tweet-quote" target="_blank" data-track-name="quote-tweet" data-track-once=""> <img src="https://cdn.blog.st-hatena.com/images/admin/quote/quote-x-icon.svg?version=3302d0c519de548bcb3552ea0bf509" title="引用して投稿する"> </a> </div> </div> <div class="quote-stock-panel" id="quote-stock-message-box" style="position: absolute; z-index: 3000"> <div class="message-box" id="quote-stock-succeeded-message" style="display: none"> <p>引用をストックしました</p> <button class="btn btn-primary" id="quote-stock-show-editor-button" data-track-name="curation-quote-edit-button">ストック一覧を見る</button> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="message-box" id="quote-login-required-message" style="display: none"> <p>引用するにはまずログインしてください</p> <button class="btn btn-primary" id="quote-login-button">ログイン</button> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="error-box" id="quote-stock-failed-message" style="display: none"> <p>引用をストックできませんでした。再度お試しください</p> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="error-box" id="unstockable-quote-message-box" style="display: none; position: absolute; z-index: 3000;"> <p>限定公開記事のため引用できません。</p> </div> </div> <script type="x-underscore-template" id="js-requote-button-template"> <div class="requote-button js-requote-button"> <button class="requote-button-btn tipsy-top" title="引用する"><i class="blogicon-quote"></i></button> </div> </script> <div id="hidden-subscribe-button" style="display: none;"> <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box"> <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once=""> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> <div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div> </div> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?v=1.12.4&version=3302d0c519de548bcb3552ea0bf509"></script> <script src="https://cdn.blog.st-hatena.com/js/texts-ja.js?version=3302d0c519de548bcb3552ea0bf509"></script> <script id="vendors-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/vendors.js?version=3302d0c519de548bcb3552ea0bf509" crossorigin="anonymous"></script> <script id="hatenablog-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/hatenablog.js?version=3302d0c519de548bcb3552ea0bf509" crossorigin="anonymous" data-page-id="entry"></script> <script>Hatena.Diary.GlobalHeader.init()</script> </body></html>

CINXE.COM

はてなアイコンの裏側の紹介 CloudflareとHonoX - Hatena Developer Blog