[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"post-android_view_rounded_corners":3,"blog-categories":155,"blog-sidebar-banners":350},{"post":4},{"id":5,"date":6,"date_gmt":7,"guid":8,"modified":10,"modified_gmt":11,"slug":12,"status":13,"type":14,"link":15,"title":16,"content":18,"excerpt":21,"author":23,"featured_media":24,"comment_status":25,"ping_status":26,"sticky":20,"template":27,"format":28,"meta":29,"categories":31,"tags":33,"acf":34,"aioseo_notices":35,"_links":36,"_embedded":78},213,"2023-02-22T08:58:00","2023-02-21T23:58:00",{"rendered":9},"https://blog.cloco.co.jp/?p=213","2026-03-12T19:43:19","2026-03-12T10:43:19","android_view_rounded_corners","publish","post","https://blog.cloco.co.jp/android_view_rounded_corners/",{"rendered":17},"AndroidでViewを角丸にする4つの方法",{"rendered":19,"protected":20},"\n\u003Cp>こんにちは。タピオカです♪\u003Cbr>初めての記事よろしくお願いします。\u003Cbr>今回は、AndroidでViewを角丸にする方法についてご紹介します。\u003C/p>\n\n\n\n\u003Cdiv id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n\u003Cdiv class=\"ez-toc-title-container\">\n\u003Cp class=\"ez-toc-title \" >目次\u003C/p>\n\u003Cspan class=\"ez-toc-title-toggle\">\u003Ca href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\">\u003Cspan class=\"ez-toc-js-icon-con\">\u003Cspan class=\"\">\u003Cspan class=\"eztoc-hide\" style=\"display:none;\">Toggle\u003C/span>\u003Cspan class=\"ez-toc-icon-toggle-span\">\u003Csvg style=\"fill: #424242;color:#424242\" xmlns=\"http://www.w3.org/2000/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\">\u003Cpath d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\">\u003C/path>\u003C/svg>\u003Csvg style=\"fill: #424242;color:#424242\" class=\"arrow-unsorted-368013\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\">\u003Cpath d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"/>\u003C/svg>\u003C/span>\u003C/span>\u003C/span>\u003C/a>\u003C/span>\u003C/div>\n\u003Cnav>\u003Cul class='ez-toc-list ez-toc-list-level-1 ' >\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-1\" href=\"https://blog.cloco.co.jp/android_view_rounded_corners/#%E6%A6%82%E8%A6%81\" title=\"概要\">概要\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-2\" href=\"https://blog.cloco.co.jp/android_view_rounded_corners/#1%E8%83%8C%E6%99%AF%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" title=\"1.背景を指定して角丸にする方法\">1.背景を指定して角丸にする方法\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-3\" href=\"https://blog.cloco.co.jp/android_view_rounded_corners/#2ViewOutlineProvider%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" title=\"2.ViewOutlineProviderを使って角丸にする方法\">2.ViewOutlineProviderを使って角丸にする方法\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-4\" href=\"https://blog.cloco.co.jp/android_view_rounded_corners/#3CardView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" title=\"3.CardViewを使って角丸にする方法\">3.CardViewを使って角丸にする方法\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-5\" href=\"https://blog.cloco.co.jp/android_view_rounded_corners/#4%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0View%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" title=\"4.カスタムViewを作って角丸にする方法\">4.カスタムViewを作って角丸にする方法\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-6\" href=\"https://blog.cloco.co.jp/android_view_rounded_corners/#Extra_databinding%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%82%88%E3%82%8A%E8%A4%87%E9%9B%91%E3%81%AA%E4%BB%95%E6%A7%98%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" title=\"Extra. databindingを活用して、より複雑な仕様に対応する方法\">Extra. databindingを活用して、より複雑な仕様に対応する方法\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-7\" href=\"https://blog.cloco.co.jp/android_view_rounded_corners/#%E3%81%BE%E3%81%A8%E3%82%81\" title=\"まとめ\">まとめ\u003C/a>\u003C/li>\u003C/ul>\u003C/nav>\u003C/div>\n\u003Ch2 class=\"wp-block-heading\" id=\"概要\">\u003Cspan class=\"ez-toc-section\" id=\"%E6%A6%82%E8%A6%81\">\u003C/span>概要\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>AndroidでViewを角丸にすることは複雑な問題ではないですが、実装方法が様々な方法があります。\u003Cbr>今回はよく使われる４つの方法について、それぞれの実装方法とメリット・デメリットをご紹介したいと思います。\u003Cbr>\u003Cbr>\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"1背景を指定して角丸にする方法\">\u003Cspan class=\"ez-toc-section\" id=\"1%E8%83%8C%E6%99%AF%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#1%E8%83%8C%E6%99%AF%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" class=\"broken_link\">\u003C/a>1.背景を指定して角丸にする方法\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"xmlで実装する場合\">\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#xml%E3%81%A7%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88\" class=\"broken_link\">\u003C/a>XMLで実装する場合\u003C/h3>\n\n\n\n\u003Cp>Viewを角丸にするために \u003Ccode><shape>\u003C/code> を使うのが最もシンプルな方法であり、以下2つのステップで実装できます。\u003C/p>\n\n\n\n\u003Cp>1.\u003Ccode>res/drawable\u003C/code> に \u003Ccode>shape.xml\u003C/code> を作る\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><?xml version="1.0" encoding="utf-8"?>\n<shape xmlns:android="http://schemas.android.com/apk/res/android">\n    <solid android:color="@android:color/black" />\n    <corners android:radius="16dp" />\n</shape>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><?xml version="1.0" encoding="utf-8"?>\n<shape xmlns:android="http://schemas.android.com/apk/res/android">\n    <solid android:color="@android:color/black" />\n    <corners android:radius="16dp" />\n</shape>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>2.Viewの背景を\u003Ccode>shape.xml\u003C/code>に指定する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><View\n    android:layout_height="48dp"\n    android:layout_width="match_parent"\n    android:background="@drawable/shape" />\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>※\u003Ccode>topLeftRadius\u003C/code>や\u003Ccode>bottomLeftRadius\u003C/code>などを指定すると、角を個別に調整することができます。\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><?xml version="1.0" encoding="utf-8"?>\n<shape xmlns:android="http://schemas.android.com/apk/res/android">\n    <solid android:color="@android:color/black" />\n    <corners android:topLeftRadius="16dp"\n        android:topRightRadius="8dp"\n        android:bottomRightRadius="8dp" />\n</shape>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg fetchpriority=\"high\" decoding=\"async\" width=\"540\" height=\"100\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/sample-01.png\" alt=\"\" class=\"wp-image-214\"/>\u003C/figure>\n\n\n\n\u003Cp>※\u003Ccode>shape.xml\u003C/code>の代わりに\u003Ccode>.9.png\u003C/code>を使うことで、複雑な形状を実装することができます。（e.g.チャットアプリの吹き出しなど）\u003Cbr>\u003Ca href=\"https://stg.blog.cloco.tech/static/04f5aeb6d92c2dac74952ac5209db5bc/07484/sample-02.png\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"broken_link\">\u003C/a>\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg decoding=\"async\" width=\"540\" height=\"100\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/sample-02.png\" alt=\"\" class=\"wp-image-215\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"コードで実装する場合\">コードで実装する場合\u003C/h3>\n\n\n\n\u003Cp>コードで実装する場合、\u003Ccode>GradientDrawable\u003C/code>を利用し、以下2つのステップで実装できます。\u003C/p>\n\n\n\n\u003Cp>1.\u003Ccode>layout.xml\u003C/code>でViewの\u003Ccode>id\u003C/code>を指定する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><View android:id="@+id/view"\n    android:layout_height="48dp"\n    android:layout_width="match_parent" />\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Col start=\"2\">\n\u003Cli>Viewの背景に\u003Ccode>GradientDrawable\u003C/code>を指定する\u003C/li>\n\u003C/ol>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>val view = findViewById<View>(R.id.view)\nval shape = GradientDrawable()\nshape.color = ColorStateList.valueOf(getColor(android.R.color.black))\nshape.cornerRadius = resources.displayMetrics.density * 16 // 16dp\nview.background = shape\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"tips-backgroundtintを指定するとshapeの色を変更できる\">\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#tips-backgroundtint%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%A8shape%E3%81%AE%E8%89%B2%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%A7%E3%81%8D%E3%82%8B\" class=\"broken_link\">\u003C/a>Tips. backgroundTintを指定すると、shapeの色を変更できる\u003C/h3>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><View ... android:backgroundTint="@android:color/white" />\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg decoding=\"async\" width=\"540\" height=\"100\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/sample-03.png\" alt=\"\" class=\"wp-image-216\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"背景指定のメリットとデメリット\">背景指定のメリットとデメリット\u003C/h3>\n\n\n\n\u003Cul>\n\u003Cli>メリット\n\u003Cul>\n\u003Cli>実装が非常に簡単なこと\u003C/li>\n\n\n\n\u003Cli>角を個別に調整することができること\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\n\n\u003Cli>デメリット\n\u003Cul>\n\u003Cli>Viewのクロッピングがないので、その他のプロパティやサブViewに制約がないこと\u003Cbr>サブViewや\u003Ccode>src\u003C/code>、\u003Ccode>foreground\u003C/code>などは\u003Ccode>shape.xml\u003C/code>の範囲を超えられます。\u003C/li>\n\n\n\n\u003Cli>複雑な仕様で再利用するのは難しいこと\u003Cbr>例えば、backgroundTintにて色を指定すると全ての\u003Ccode><shape>\u003C/code>が指定した色になるため、それぞれの\u003Ccode><shape>\u003C/code>に色を変更したい場合は、指定したい色ごとに\u003Ccode>shape.xml\u003C/code>を作成する必要があります。また、角丸の形状をそれぞれ指定したい場合も、別々に\u003Ccode>shape.xml\u003C/code>を作成する必要があります。\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"2viewoutlineproviderを使って角丸にする方法\">\u003Cspan class=\"ez-toc-section\" id=\"2ViewOutlineProvider%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#2viewoutlineprovider%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" class=\"broken_link\">\u003C/a>2.ViewOutlineProviderを使って角丸にする方法\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>\u003Ccode>ViewOutlineProvider\u003C/code>はViewをクリップする方法で、以下2つのステップで実装できます。\u003Cbr>1.\u003Ccode>layout.xml\u003C/code>でViewの\u003Ccode>id\u003C/code>を指定する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><View android:id="@+id/view"\n    android:layout_height="48dp"\n    android:layout_width="match_parent"\n    android:background="@android:color/black" />\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>2.コードで\u003Ccode>ViewOutlineProvider\u003C/code>を設定する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>view.clipToOutline = true\nview.outlineProvider = object : ViewOutlineProvider() {\n    override fun getOutline(v: View, outline: Outline) {\n        outline.setRoundRect(0, 0, v.width, v.height, 16 * v.resources.displayMetrics.density)\n    }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"viewoutlineproviderを使うメリットとデメリット\">\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#viewoutlineprovider%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%A8%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" class=\"broken_link\">\u003C/a>ViewOutlineProviderを使うメリットとデメリット\u003C/h3>\n\n\n\n\u003Cul>\n\u003Cli>メリット\n\u003Cul>\n\u003Cli>\u003Ccode>outlineProvider\u003C/code>を指定して、\u003Ccode>clipToOutline\u003C/code>を\u003Ccode>true\u003C/code>に設定すると、サブViewや\u003Ccode>src\u003C/code>、\u003Ccode>foreground\u003C/code>、\u003Ccode>background\u003C/code>などは\u003Ccode>Outline\u003C/code>の範囲を超えられること\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\n\n\u003Cli>デメリット\n\u003Cul>\n\u003Cli>\u003Ccode><shape>\u003C/code>の\u003Ccode>topLeftRadius\u003C/code>プロパティのような個別に角丸のサイズを設定できないこと\u003C/li>\n\n\n\n\u003Cli>xmlで直接使用できないこと\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"3cardviewを使って角丸にする方法\">\u003Cspan class=\"ez-toc-section\" id=\"3CardView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#3cardview%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" class=\"broken_link\">\u003C/a>3.CardViewを使って角丸にする方法\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>\u003Ccode>CardView\u003C/code>はGoogle公式のカスタムViewで、以下2つのステップで実装できます。\u003Cbr>1.\u003Ccode>build.gradle\u003C/code>で\u003Ccode>CardView\u003C/code>を導入する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>dependencies {\n    implementation "androidx.cardview:cardview:1.0.0"\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>2.\u003Ccode>layout.xml\u003C/code>で\u003Ccode>CardView\u003C/code>を使う\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><androidx.cardview.widget.CardView\n    android:layout_height="wrap_content"\n    android:layout_width="match_parent"\n    app:cardCornerRadius="16dp"\n    app:cardElevation="0dp"\n    app:cardBackgroundColor="@android:color/black">\n\n    <View\n        android:layout_width="match_parent"\n        android:layout_height="48dp" />\n\n</androidx.cardview.widget.CardView>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"cardviewを使うメリットとデメリット\">\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#cardview%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%A8%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" class=\"broken_link\">\u003C/a>CardViewを使うメリットとデメリット\u003C/h3>\n\n\n\n\u003Cul>\n\u003Cli>メリット\n\u003Cul>\n\u003Cli>\u003Ccode>CardView\u003C/code>は\u003Ccode>ViewOutlineProvider\u003C/code>に似ているが、サブViewや\u003Ccode>foreground\u003C/code>などが\u003Ccode>CardView\u003C/code>の範囲を超えられないこと\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\n\n\u003Cli>デメリット\n\u003Cul>\n\u003Cli>追加のライブラリをインポートする必要があること\u003C/li>\n\n\n\n\u003Cli>角丸のサイズを個別に設定できないこと\u003C/li>\n\n\n\n\u003Cli>本質はFrameLayoutであるので、FrameLayoutが必要ない場合はレイアウト階層が増加すること\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"4カスタムviewを作って角丸にする方法\">\u003Cspan class=\"ez-toc-section\" id=\"4%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0View%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#4%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0view%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E8%A7%92%E4%B8%B8%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" class=\"broken_link\">\u003C/a>4.カスタムViewを作って角丸にする方法\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>カスタムViewの実現は以下2つのステップで実装できます。\u003Cbr>1.カスタムViewを定義する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>/** カスタムViewの例の一つは下の通りに */\nclass CustomLayout @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :\n    FrameLayout(context, attrs, defStyleAttr) {\n\n    override fun dispatchDraw(canvas: Canvas) = with(context) {\n        val radius = 16f * v.resources.displayMetrics.density\n        val rect = RectF(0f, 0f, width.toFloat(), height.toFloat())\n        val path = Path().apply { addRoundRect(rect, radius, radius, Path.Direction.CW) }\n        canvas.clipPath(path)\n        super.dispatchDraw(canvas)\n    }\n\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>2.\u003Ccode>layout.xml\u003C/code>でカスタムViewを使う\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><[パッケージ名].CustomLayout\n    android:layout_height="wrap_content"\n    android:layout_width="match_parent">\n    <View\n        android:layout_height="48dp"\n        android:layout_width="match_parent"\n        android:background="@android:color/black" />\n</[パッケージ名].CustomLayout>\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"カスタムviewを使うメリットとデメリット\">\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0view%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%A8%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" class=\"broken_link\">\u003C/a>カスタムViewを使うメリットとデメリット\u003C/h3>\n\n\n\n\u003Cul>\n\u003Cli>メリット\n\u003Cul>\n\u003Cli>仕様に合わせて角丸のサイズだけでなく、様々な形を設定することができること\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\n\n\u003Cli>デメリット\n\u003Cul>\n\u003Cli>実装が非常に複雑であること\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"extra-databindingを活用してより複雑な仕様に対応する方法\">\u003Cspan class=\"ez-toc-section\" id=\"Extra_databinding%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%82%88%E3%82%8A%E8%A4%87%E9%9B%91%E3%81%AA%E4%BB%95%E6%A7%98%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#extra-databinding%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%A6%E3%82%88%E3%82%8A%E8%A4%87%E9%9B%91%E3%81%AA%E4%BB%95%E6%A7%98%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95\" class=\"broken_link\">\u003C/a>Extra. databindingを活用して、より複雑な仕様に対応する方法\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"コードで実装する場合-1\">\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88-1\" class=\"broken_link\">\u003C/a>コードで実装する場合\u003C/h3>\n\n\n\n\u003Cp>より複雑な仕様に対応する場合、上記でご紹介した各方法では簡潔さに欠けてしまいます。\u003Cbr>そこで、databindingを活用すると3つのステップでシンプルに実装できます。\u003Cbr>※例えば、ボーダーを描画し、クリック効果があるボタンを角丸にしたい場合等\u003Cbr>\u003Cbr>1.まず、databindingを導入する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>apply plugin: "kotlin-kapt"\n\nandroid {\n    buildFeatures.dataBinding = true\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>2.\u003Ccode>ViewOutlineProvider\u003C/code>を改造する\u003Cbr>\u003Ccode>ViewOutlineProvider\u003C/code>はxmlで直接使用できないとご紹介しましたが、このデメリットはdatabindingである程度補うことができます。\u003Cbr>databindingの\u003Ccode>BindingAdapter\u003C/code>アノテーションを利用することで、xmlで使用できる属性を定義できます。\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>@JvmStatic\n@BindingAdapter("corner")\nfun View.corner(radiusPixel: Float) {\n    clipToOutline = true\n    outlineProvider = ViewOutlineProvider { setRoundRect(0, 0, it.width, it.height, radiusPixel) }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>呼び出し方法も簡単で、\u003Ccode>app:corner=\"@{@dimen/corner_size}\"\u003C/code>のように\u003Ccode>\"@{...}\"\u003C/code>でxmlに定義されたリソースを呼び出すと、databindingは自動的\u003Ccode>@dimen/corner_size\u003C/code>が表すdpの値をFloatのpxの値に変換することができます。\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><Button\n    android:layout_width="match_parent"\n    android:layout_height="48dp"\n    android:foreground="?selectableItemBackground"\n    app:corner="@{@dimen/corner_size}" />\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>※直接dp値を指定する場合\u003Cbr>\u003Ccode>\"@{}\"\u003C/code>が\u003Ccode>16dp\u003C/code>、\u003Ccode>16sp\u003C/code>のような値を受け取れないので、直接dp値を入力したい場合、数字をdp値として入力し、コードの中でpixelに変換する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>@JvmStatic\n@BindingAdapter("corner")\nfun View.corner(radiusDp: Float) {\n    clipToOutline = true\n    // dpをpixelに変換する\n    val radiusPixel = radiusDp * v.resources.displayMetrics.density\n    outlineProvider = ViewOutlineProvider { setRoundRect(0, 0, it.width, it.height, radiusPixel) }\n}\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode><Button\n    android:layout_width="match_parent"\n    android:layout_height="48dp"\n    android:foreground="?selectableItemBackground"\n    app:corner="@{16f}" /> <!--ここで、16dp/16spのような値を受け取れない->\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cp>3.ボーダーを描画する機能を追加する\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>@JvmStatic\n@BindingAdapter("corner", "borderColor", "borderSize")\nfun View.corner(radius: Float, stroke: ColorStateList, size: Float) {\n    clipToOutline = true\n    outlineProvider = object : ViewOutlineProvider() {\n        override fun getOutline(v: View, outline: Outline) {\n            outline.setRoundRect(0, 0, v.width, v.height, radius * v.resources.displayMetrics.density)\n        }\n    }\n    post {\n        background = GradientDrawable().apply {\n            color = backgroundTintList\n            setStroke((size * resources.displayMetrics.density).roundToInt(), stroke)\n            cornerRadius = radius * resources.displayMetrics.density\n        }\n        backgroundTintList = null\n    }\n}\n\n<Button\n    android:layout_width="match_parent"\n    android:layout_height="48dp"\n    android:foreground="?selectableItemBackground"\n    app:corner="@{16f}"\n    app:borderSize="@{2f}"\n    app:borderColor="@{@color/border_color}"\n    android:backgroundTint="@color/background_color" />\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"100\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/sample-04.png\" alt=\"\" class=\"wp-image-217\"/>\u003C/figure>\n\n\n\n\u003Cp>※Styleをまとめたい場合\u003Cbr>\u003Ccode>style.xml\u003C/code>で設定できないので、まとめたい場合は新しい\u003Ccode>BindingAdapter\u003C/code>メソットを作ります。\u003C/p>\n\n\n\n\u003Cdiv class=\"hcb_wrap\">\u003Cpre class=\"prism line-numbers lang-plain\">\u003Ccode>@JvmStatic\n@BindingAdapter("corner", "borderColor", "borderSize")\nfun View.corner(radius: Float, stroke: ColorStateList, size: Float) {\n\t\t// ...\n}\n\n@JvmStatic\n@BindingAdapter("style1")\nfun View.style1(radius: Float) {\n    backgroundTintList = ColorStateList.valueOf(context.getColor(R.color.background_color))\n    corner(radius, ColorStateList.valueOf(context.getColor(R.color.border_color)), 1f)\n}\n\n<Button\n    android:layout_width="match_parent"\n    android:layout_height="48dp"\n    android:layout_marginTop="4dp"\n    android:foreground="?actionBarItemBackground"\n    app:style1="@{16f}" />\u003C/code>\u003C/pre>\u003C/div>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"databindingを使うメリットとデメリット\">\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#databinding%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%A8%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" class=\"broken_link\">\u003C/a>databindingを使うメリットとデメリット\u003C/h3>\n\n\n\n\u003Cul>\n\u003Cli>メリット\n\u003Cul>\n\u003Cli>複雑な要件を処理する際に、コード実装の柔軟性とxmlレイアウトの簡潔性があるため、テンプレートコードを減らせること\u003C/li>\n\u003C/ul>\n\u003C/li>\n\n\n\n\u003Cli>デメリット\n\u003Cul>\n\u003Cli>入力値に関して、カスタムViewのカスタム属性に比べて自由度が低いこと\u003Cbr>例えば\u003Ccode>\"@{...}\"\u003C/code>では\u003Ccode>16dp\u003C/code>、\u003Ccode>16sp\u003C/code>のような値を受け取れないことや、\u003Ccode>BindingAdapter\u003C/code>で拡張された属性は\u003Ccode>style.xml\u003C/code>で設定できない等\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ul>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"まとめ\">\u003Cspan class=\"ez-toc-section\" id=\"%E3%81%BE%E3%81%A8%E3%82%81\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/android_view_rounded_corners/#%E3%81%BE%E3%81%A8%E3%82%81\" class=\"broken_link\">\u003C/a>まとめ\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>Viewを角丸にする方法はたくさんありますが、完璧な方法はないので、状況に応じて最適な方法を選択する必要があります。\u003C/p>\n",false,{"rendered":22,"protected":20},"\u003Cp>こんにちは。タピオカです♪初めての記事よろしくお願いします。\u003C/p>\n",11,549,"closed","open","","standard",{"om_disable_all_campaigns":20,"_monsterinsights_skip_tracking":20,"_monsterinsights_sitenote_active":20,"_monsterinsights_sitenote_note":27,"_monsterinsights_sitenote_category":30,"_themeisle_gutenberg_block_has_review":20,"footnotes":27},0,[32],12,[],[],[],{"self":37,"collection":40,"about":43,"author":46,"replies":50,"version-history":53,"predecessor-version":57,"wp:featuredmedia":61,"wp:attachment":64,"wp:term":67,"curies":74},[38],{"href":39},"https://blog.cloco.co.jp/wp-json/wp/v2/posts/213",[41],{"href":42},"https://blog.cloco.co.jp/wp-json/wp/v2/posts",[44],{"href":45},"https://blog.cloco.co.jp/wp-json/wp/v2/types/post",[47],{"embeddable":48,"href":49},true,"https://blog.cloco.co.jp/wp-json/wp/v2/users/11",[51],{"embeddable":48,"href":52},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=213",[54],{"count":55,"href":56},4,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/213/revisions",[58],{"id":59,"href":60},370,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/213/revisions/370",[62],{"embeddable":48,"href":63},"https://blog.cloco.co.jp/wp-json/wp/v2/media/549",[65],{"href":66},"https://blog.cloco.co.jp/wp-json/wp/v2/media?parent=213",[68,71],{"taxonomy":69,"embeddable":48,"href":70},"category","https://blog.cloco.co.jp/wp-json/wp/v2/categories?post=213",{"taxonomy":72,"embeddable":48,"href":73},"post_tag","https://blog.cloco.co.jp/wp-json/wp/v2/tags?post=213",[75],{"name":76,"href":77,"templated":48},"wp","https://api.w.org/{rel}",{"author":79,"wp:featuredmedia":94,"wp:term":132},[80],{"id":23,"name":81,"url":27,"description":82,"link":83,"slug":84,"avatar_urls":85,"acf":87,"_links":88},"タピオカ","　","https://blog.cloco.co.jp/author/qiao-liyun/","qiao-liyun",{"24":86,"48":86,"96":86},"https://blog.cloco.co.jp/wp-content/uploads/2024/01/qiap02.png",[],{"self":89,"collection":91},[90],{"href":49},[92],{"href":93},"https://blog.cloco.co.jp/wp-json/wp/v2/users",[95],{"id":24,"date":96,"slug":97,"type":98,"link":99,"title":100,"author":101,"featured_media":30,"aioseo_notices":102,"acf":103,"caption":104,"alt_text":27,"media_type":105,"mime_type":106,"media_details":107,"source_url":116,"_links":117},"2026-03-12T19:43:08","android_view_rounded_corners-2","attachment","https://blog.cloco.co.jp/android_view_rounded_corners/android_view_rounded_corners-2/",{"rendered":12},1,[],[],{"rendered":27},"image","image/png",{"width":108,"height":109,"file":110,"filesize":111,"sizes":112,"image_meta":113},1200,800,"2023/02/android_view_rounded_corners.png",907822,{},{"aperture":114,"credit":27,"camera":27,"caption":27,"created_timestamp":114,"copyright":27,"focal_length":114,"iso":114,"shutter_speed":114,"title":27,"orientation":114,"keywords":115},"0",[],"https://blog.cloco.co.jp/wp-content/uploads/2023/02/android_view_rounded_corners.png",{"self":118,"collection":120,"about":123,"author":126,"replies":129},[119],{"href":63},[121],{"href":122},"https://blog.cloco.co.jp/wp-json/wp/v2/media",[124],{"href":125},"https://blog.cloco.co.jp/wp-json/wp/v2/types/attachment",[127],{"embeddable":48,"href":128},"https://blog.cloco.co.jp/wp-json/wp/v2/users/1",[130],{"embeddable":48,"href":131},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=549",[133,154],[134],{"id":32,"link":135,"name":136,"slug":137,"taxonomy":69,"acf":138,"_links":139},"https://blog.cloco.co.jp/category/mobile_app/","スマホアプリ","mobile_app",[],{"self":140,"collection":143,"about":146,"wp:post_type":149,"curies":152},[141],{"href":142},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/12",[144],{"href":145},"https://blog.cloco.co.jp/wp-json/wp/v2/categories",[147],{"href":148},"https://blog.cloco.co.jp/wp-json/wp/v2/taxonomies/category",[150],{"href":151},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=12",[153],{"name":76,"href":77,"templated":48},[],[156,177,197,218,238,257,272,291,310,331],{"id":157,"count":158,"description":27,"link":159,"name":160,"slug":161,"taxonomy":69,"parent":30,"meta":162,"acf":163,"_links":164},13,3,"https://blog.cloco.co.jp/category/dx/","DX","dx",[],[],{"self":165,"collection":168,"about":170,"wp:post_type":172,"curies":175},[166],{"href":167},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/13",[169],{"href":145},[171],{"href":148},[173],{"href":174},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=13",[176],{"name":76,"href":77,"templated":48},{"id":178,"count":101,"description":27,"link":179,"name":180,"slug":181,"taxonomy":69,"parent":30,"meta":182,"acf":183,"_links":184},6,"https://blog.cloco.co.jp/category/qa/","QA","qa",[],[],{"self":185,"collection":188,"about":190,"wp:post_type":192,"curies":195},[186],{"href":187},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/6",[189],{"href":145},[191],{"href":148},[193],{"href":194},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=6",[196],{"name":76,"href":77,"templated":48},{"id":198,"count":199,"description":27,"link":200,"name":201,"slug":202,"taxonomy":69,"parent":30,"meta":203,"acf":204,"_links":205},14,2,"https://blog.cloco.co.jp/category/web_app/","webアプリ","web_app",[],[],{"self":206,"collection":209,"about":211,"wp:post_type":213,"curies":216},[207],{"href":208},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/14",[210],{"href":145},[212],{"href":148},[214],{"href":215},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=14",[217],{"name":76,"href":77,"templated":48},{"id":219,"count":101,"description":27,"link":220,"name":221,"slug":222,"taxonomy":69,"parent":30,"meta":223,"acf":224,"_links":225},10,"https://blog.cloco.co.jp/category/architect/","アーキテクト","architect",[],[],{"self":226,"collection":229,"about":231,"wp:post_type":233,"curies":236},[227],{"href":228},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/10",[230],{"href":145},[232],{"href":148},[234],{"href":235},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=10",[237],{"name":76,"href":77,"templated":48},{"id":55,"count":199,"description":27,"link":239,"name":240,"slug":241,"taxonomy":69,"parent":30,"meta":242,"acf":243,"_links":244},"https://blog.cloco.co.jp/category/infra/","インフラ","infra",[],[],{"self":245,"collection":248,"about":250,"wp:post_type":252,"curies":255},[246],{"href":247},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/4",[249],{"href":145},[251],{"href":148},[253],{"href":254},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=4",[256],{"name":76,"href":77,"templated":48},{"id":32,"count":258,"description":27,"link":135,"name":136,"slug":137,"taxonomy":69,"parent":30,"meta":259,"acf":260,"_links":261},8,[],[],{"self":262,"collection":264,"about":266,"wp:post_type":268,"curies":270},[263],{"href":142},[265],{"href":145},[267],{"href":148},[269],{"href":151},[271],{"name":76,"href":77,"templated":48},{"id":158,"count":158,"description":27,"link":273,"name":274,"slug":275,"taxonomy":69,"parent":30,"meta":276,"acf":277,"_links":278},"https://blog.cloco.co.jp/category/project_management/","プロジェクトマネージメント","project_management",[],[],{"self":279,"collection":282,"about":284,"wp:post_type":286,"curies":289},[280],{"href":281},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/3",[283],{"href":145},[285],{"href":148},[287],{"href":288},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=3",[290],{"name":76,"href":77,"templated":48},{"id":23,"count":55,"description":27,"link":292,"name":293,"slug":294,"taxonomy":69,"parent":30,"meta":295,"acf":296,"_links":297},"https://blog.cloco.co.jp/category/beginner/","初心者","beginner",[],[],{"self":298,"collection":301,"about":303,"wp:post_type":305,"curies":308},[299],{"href":300},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/11",[302],{"href":145},[304],{"href":148},[306],{"href":307},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=11",[309],{"name":76,"href":77,"templated":48},{"id":311,"count":312,"description":27,"link":313,"name":314,"slug":315,"taxonomy":69,"parent":30,"meta":316,"acf":317,"_links":318},9,7,"https://blog.cloco.co.jp/category/it_industry_news/","業界最新情報","it_industry_news",[],[],{"self":319,"collection":322,"about":324,"wp:post_type":326,"curies":329},[320],{"href":321},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/9",[323],{"href":145},[325],{"href":148},[327],{"href":328},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=9",[330],{"name":76,"href":77,"templated":48},{"id":312,"count":258,"description":27,"link":332,"name":333,"slug":334,"taxonomy":69,"parent":30,"meta":335,"acf":336,"_links":337},"https://blog.cloco.co.jp/category/company_introduction/","自社紹介","company_introduction",[],[],{"self":338,"collection":341,"about":343,"wp:post_type":345,"curies":348},[339],{"href":340},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/7",[342],{"href":145},[344],{"href":148},[346],{"href":347},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=7",[349],{"name":76,"href":77,"templated":48},[],1775546928900]